The Pages menu is displayed when you are working with individual pages in the Page Builder. The following explains the various tabs and elements included in the Pages menu.

The Pages menu (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.

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.

The following additional buttons are available


Component buttons

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 interaction

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

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.

Note: This is only available when Choose an interaction is set to Custom.

Select target component: The component that is targeted.

Note: Only available when Choose an interaction is set to Custom or Toggle.

Choose option name: The option of the component that is targeted.

Note: This option is only available when Choose an interaction is set to Toggle.

Did this answer your question?