What is a partial and what is a prefab?

In this article we are going to look at what is a partial and what is a prefabs. Both of these concepts are exclusively for frontend app development on Dittofi. You cannot create a partial or a prefab for any backend code.

Let's kick off by taking a look at:

• What is a partial?

• How to find, edit and delete partials?

Then we will look at:

• What is a prefab?

• How to find, edit and delete prefabs?

What is a partial?

When you are building the frontend of your app, there may be parts of the frontend that you want to reuse multiple times. For example, you might design and build a form and then want to reuse this form in multiple points of your app. To speed things up, Dittofi allows you to design and build a component, such as a form. Save this component as a "partial" and then reuse this partial throughout your app.

For example, consider the following design and build of a login form.

This form is built out of several elements that can be viewed inside the Navigator, as below.

To save down the layout and styles of this form, you need to (1) select the form, (2) click on the three white dots in the bar on the form and (3) choose the option to "create partial" from the popup.

How to find, edit and delete partials?

Once you've done this, your form will be saved as a Partial that you can reuse in your app development.

All of your partials are visible under the Elements tab, as shown below.

You can edit the name and description of your partial by clicking on the downward facing arrow next to your partial and clicking "Edit Partial", as shown below.

You can also delete the partial from the same place.

Once you've created a partial you can reuse it anywhere within your app by dragging and dropping the partial onto the apps canvas. This is shown below, where we add our Form Partial to a column element.

After you've added the partial to your app, you are able to make changes to it, however please note, editing a partial will impact all versions of the partial that are used within your app.

To edit a partial, you need to double click on the partial and then you can edit it, as shown below.

NOTE

Partials update everywhere that you use them. As you will see in a moment, Prefabs do not update everywhere that you use them.

What is a Prefab

A Prefab is the same as a Partial but with one crucial difference, editing an instance of your Prefab will not update all instances of your Prefab throughout your app.

To illustrate this, let's take the example of our form again and, instead of turning the form into a Partial, let's turn it into a Prefab by (1) selecting the form, (2) clicking on the three white dots in the bar on the form and (3) choosing the option to "create prefab" from the popup.

How to find, edit and delete prefabs?

You are able to find prefabs under the elements tab as shown below.

The name and description of the prefab can be edited from under the downward facing arrow, as shown below.

You can also delete the prefab in the same place.

Once you've created a prefab you can reuse it anywhere within your app by dragging and dropping the prefab onto the apps canvas. This is shown below, where we add our Form Prefab twice into two column elements on our page.

After you've added the prefab to your app, you are able to make changes to it. Note, editing a prefab will NOT impact other instances of your prefab within your app.

To edit a prefab, you can click on the element inside the prefab that you want to edit and then change it. For example, we might want to update one of the forms below to just look like a form to recover passwords.