After reading this article you’ll know how to:

Turn the navigation bar component into the header partial
Reuse the partial on another page
Auto-generate partials while setting up a new page

Partial is a part of your application’s page that consists of one or multiple components. Creating partials is essential for those citizen developers who want their website to have the same components with functionality on various pages in their application. Usually, these components will be the header and footer of the page. In this article, we will go through the way of turning the navigation bar (header) into the partial, and then we will reuse it. Also, you are going to find out how to auto-generate partials while setting up a new page.

Learn more about partials by watching a video:

Creating partial

Open your page builder and create a new page or choose an already existing one.
Once it is done, go to the sidebar and pick up the navigation bar component.
Drag it onto the page’s canvas.
Let’s say this navigation bar is the component you want to reuse on other pages. Click on it once.
Now find a special button at the bottom of the options on the sidebar. Click on it.
In the pop-up window, come up with a name for your partial and click on ‘Save’.

Reusing and editing partial

In this part, we will reuse the header partial we’ve just created on another page in the application.

Go to another page. In our case, it will be the home page.
Open the partial overview on the sidebar.
There you will see the header partial we’ve created. Drag it to the needed place on your page.

Of course, you can always edit your partial, but mind that changes will apply to all the pages you’ve used this partial on.

Click once on the partial. In the sidebar menu, choose the ‘Edit partial’ option. The partial editor will be opened and after clicking on the partial again, you will be able to edit it.

Also, it’s possible to turn the partial back into the regular component. To do this, come back to the partial options and choose the ‘Convert to components’. Now your partial became a regular component once again.

One more way of reusing partials is during setting up a new page. Let’s try this in practice.

Create a new page and choose one of the page templates. Pick one that has a header on preview, like CRUD with dialogs.
Fill in the name and choose the page to be either authenticated or public and click on ‘Create page’.
In the next configuration step, click ‘Select partial’ on the top menu.
After you go through all configurations, save your progress and your new page will be created with a reused header partial.

Auto generating partials

Last but not least use case we are going to walk through is auto generating the top menu and footer partials. This function might appeal to those who want to quickly create the default header and footer for their application and then later edit them.

Create a new page and choose one of the page templates. Pick one that has a header and footer on preview, like CRUD with dialogs.
Fill in the name and choose the page to be either authenticated or public and click on ‘Create page’.
In the next configuration step, select the ‘Auto generate partial’ option.
After you go through all configurations, save your progress and your new page will be created with the default header and footer.

Creating a new page with auto-generated partials

Working with a navigation bar

Introduction to page templates

Header and footer template

Creating a new page

Back office template