Page builder reference

The pages tab (A) is displayed when you are working with individual pages.

Various tabs accessed from the Pages menu are used to customize or work with the individual components in the main menu.

As shown, the components (B) menu is opened when you work with individual pages. This menu contains groups of components for building web pages such as layout and navigation components.

Each of the tabs (B - E) is explained briefly below:

Components (B)

You can design individual web pages using the available components. Using the layout components, you first create a container for anchoring other components such as Buttons.

An additional partials tab provides access to any custom components. For example, if you create a standardized header menu that you want to reuse on each page of your application. Partials can be dragged and dropped onto individual pages as required.

See below for details on how partials are created based on components.

Data (C)

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. Read more about this by checking out this article.

Component tree (D)

Using the component tree, you can review how the various components are organized on the page. You can quickly select and open the options for individual components from the components tree.

The component tree shows how the various components are nested.

Page Settings (E)

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.

At the end of the Options menu for each component, is a standard set of buttons:

Convert to partial

Using the convert to partial button you can convert a component together with all nested components within it to a partial. This can then be reused within your application.

In this way, you can improve the efficiency in building web pages and the consistency across your application.

Save as new component

You can reuse customized components across all applications that you build on the Betty Blocks platform.

A pop-up window is displayed where you can define the component name and category to which you want to assign the new component.

You can also make a component available in the Block Store for use across all your applications.

Delete from page

You can delete a component that you have specified on a web page. A pop-up window requests that you confirm that you want the component deleted. All nested components are also deleted.

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

Click on the create new interaction button to display the available options.

The trigger initiates the interaction. For example, when a user clicks a specified button. Additional triggers such as Change and More are also available with related options.
​

Select component function from the menu displayed. This is the function that is executed when the interaction is triggered.
​

Select target component: The component that is targeted.

Note: Only available when you are toggling or enabling or hiding etc.