Documentation

Page Builder Reference

In this article

​Learn how to navigate through the Page Builder and what it is all about!

Sam van de Kreeke

Published: 24-06-2020

Last updated: 21-08-2020

The Page Builder has multiple windows that serve for different purposes. These are the following windows:

  • Components
  • Partials
  • Data
  • Page settings


Components

The components window contains the component set with all its components. It’s where you’ll be able to get all the components from and drag them onto the canvas.

If you want to know more about the components themselves, feel free to check out our Component Reference!


Partials

The partials window contains all the partials that you’ve converted throughout the Page Builder. These partials can be used on every page and can be dragged onto the canvas as many times as you’d like.


Data

The data window contains all the input variables that you’ve created within that particular page. These input variables can be used to make components dynamic.


Page settings

In the settings window you can change settings that are associated with the page

Page name: The name of your page is how the page will be displayed throughout the platform.
Path: The path of your page, which is the part behind the application url.
Description: The description of your page.
Component set url: The url of your custom component set. This should be the url of where you are hosting it.
Authentication profile: The authentication profile required to access your page.


Page Type

Select one of the available Page Type option for your page to be associated with. Each type is used for a different purpose and has a slightly different outcome.

  • Homepage: Set the page as the default page when running the app, opening after pressing the Play button.
  • 404: Set the page as the default page to return when a 404 (Not found) statuscode is rendered.


Component options

Each component has its own set of options, but they all have something in common. In the bottom of the window you’ll see 3 options each component has

  • Component interactions
  • Convert to partial
  • Remove from page


Component interaction

Component interactions are interactions with a function between components based on a certain trigger.

Choose a trigger: The trigger that will execute the interaction after it has been triggered from the page.
Choose an interaction: The kind of interaction that will be made between the components.
Select function name: The function that will be executed when the interaction is triggered, only available when Choose an interaction is set to Custom.
Select target component: The component that will be targeted, only available when Choose an interaction is set to Custom or Toggle.
Choose option name: The option of the component that will be targeted, only available when Choose an interaction is set to Toggle.


Convert to partial

The convert to partial option lets you convert a component together with all its child components to a partial. This partial can then be used inside of all other pages that you’ve created!


Remove from page

This option removes the component or partial from the page. Once removed it can’t be undone, but you can manually drag the components back onto the canvas again.

In this article