Pages
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Pages

      Creating and using partials

      Turning components into partials to be able to reuse them on different pages in your application.

      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 comprising one or multiple components. Creating partials is essential for those citizen developers who want their web applications to have the same components and functionality on various application pages. 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

      1. Open your page builder and create a new page or choose an already existing one.

      2. Once it is done, go to the sidebar and pick up the navigation bar component.

      3. Drag it onto the page’s canvas.

      4. Let’s say this navigation bar is the component you want to reuse on other pages. Click on it once.

      5. Now find a special button at the bottom of the options on the sidebar. Click on it.

      6. In the pop-up window, come up with a name for your partial and click on Save.
      Saving an app bar as a partial

      Reusing and editing partial

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

      1. Go to another page. In our case, it will be the home page.

      2. Open the partial overview on the sidebar.

      3. There you will see the header partial we’ve created. Drag it to the needed place on your page.
      Reusing a partial in the page builder

      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.
      Partial editor

      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.
      Converting a partial to a component

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

      1. Create a new page and choose one of the page templates. Pick one that has a header on preview, like CRUD with dialogs.

      2. Fill in the name and choose the page to be either authenticated or public and click on ‘Create page’.

      3. In the next configuration step, click Select partial on the top menu.

      4. After you go through all configurations, save your progress and your new page will be created with a reused header partial.
      Creating a new page

      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.

      1. 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.

      2. Fill in the name and choose the page to be either authenticated or public and click on ‘Create page’.

      3. In the next configuration step, select the ‘Auto generate partial’ option.

      4. 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