Pages menu overview

Design and create the user interface for an application using the extensive set of building blocks provided in the pages menu.

The pages menu provides access to the building blocks for creating individual pages for an application. Using the various components and elements you can, for example, first design the layout of the user interface for your application. Where required, you can work with a more experienced developer to add the additional functionality required for your application.

The following explains the various tabs and elements included in the Pages menu.

A. The name you have assigned to the page is displayed. A page name can be edited via the settings menu (E).

Different tabs are available in the pages menu for both designing and applying in-depth functionality for an application.

B. When you click on the components tab, the components menu tab opens. A partials tab is also available.

Components tab:

You can drag and drop items onto the main canvas. You first need to create the layout for your page. For example, a single or multi-column layout or a grid layout. Once applied to the canvas, you can then drag and drop other components as required to build your user interface.

Once on the canvas, the menu changes to show the options and interactions tabs for customizing the selected component.

Partials tab:

The partials tab provides access to any custom components. You can create, for example, 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.

You can use the options, styles, and interactions tabs to customize the look and feel and the functionality applied to individual components. For example, to define:

The placement and text or name options for an element.
Specific style characteristics for a component, such as a border color.
Interactions are triggered when, for example, a button is clicked.

Tip! If you try to drag and drop certain components such as buttons onto the canvas before creating a layout, the drop cannot be captured. You need to first drag and drop a layout, for example, a column or a box to the canvas. Once the structure is defined, you can drag the required component, for example, a button or media component to the canvas.

C. Using the data tab, you can create variables for your application. These 'page variables' can be used to display data without using data components. Check out this article to learn more about these variables and how they work.

D. Using the component tree tab, you can view all components in a parent-child framework. When you double-click on an item, the options menu for the item is opened.

In the options tab, you can also change the default component name using the edit button. Apply a specific name and click the check button (✓) to implement the name change. Once applied, this name is reflected in the component tree.

E. The settings tab contains details about an individual page. For example, you can add a description to describe the purpose of the page. The settings page also provides the details for the URL link for the page and enables you to specify whether an authentication profile is required for restricting access to a page/application.

You can also set the search engine optimization (SEO) description on the settings page. This is the information that is displayed in response to a search for content. You can specify the keywords and terms to ensure that your application is correctly populated in the search results provided by a search engine.

Any changes applied on the settings tab need to be saved. You can use the save button on the settings tab to ensure that these types of changes are applied. For example, where you specify that you want a page to act as the home page for your application.