Designing the user interface

You can build the user interface by placing various components on the page.

1. To design the user interface, on the menu bar, click the Enable Developer mode icon.
2. To open the page designer, click .
3. To add components, right click on the parent component. The list of all existing child components is displayed.

   
4. Select the required component from the list.

To know how to add components to a page, visit the Working with page components section.

Adding components to the homepage

You can view that the page is already added as a component in the Tree tab.

1. In the page designer, right click on the Page component, add a Vertical Layout Panel component to arrange the page elements vertically in a single column. By default, the child component, Vertical Section, is added.

2. Right-click on the first Vertical Section component, and add a Card Wrapper component to clearly define the sections of the page into header and body. By default, the child components, Card Header and Card Body, are added.

   1. Right-click on the Card Header component, and click Delete. We can add the title to the page under the Card Body component.

   2. Right-click on the Card Body component and select a header component, namely H1.

   3. Double-click on the H1 component, the properties tab is displayed. Under General properties, in the Text field, type the required page title. For example: Welcome to the Customer Portal!

3. Right-click on the second Vertical Section component, and add a Card Wrapper component.

   1. In the Properties tab of the Card Header component, under General properties, in the Title field, type the required section title. For example: Ticket Management. The section title will be used as a placeholder to navigate to the ticket summary page.

4. Right-click on the Card Header component, and add Trigger On Click.

   1. To define an action on click, right-click on the trigger and add the Go To Page action.

   2. In the Properties tab of the Go To Page action, under General properties, in the Page State field, type the Page state of the ticket summary page. For example: app.cptickets

• To copy the Page State of a component:

  • In the Navigation menu, under the Developer role, in the Developer group, click Pages.

  • Under the Page column, double-click on the ticket summary page name, cpticketmgmt. The Page Details page is displayed.

  • Copy the value in the Page State field. You can use this value to navigate to the cpticketmgmt page canvas.

5. To add an explanation to the section, right-click on the Card Body component, and add a Paragraph component.

1. In the Properties tab of the Paragraph component, under General properties, in the Text field, type the required description. For example: Create, Prioritize, and Monitor tickets

You can change the font color and font type for the description under the Text Style properties. You can also change the position of the description by changing the margin values under Layout properties.

6. Right-click on the Card Body component, and add a Button component. By default, the Trigger On Click is added.

1. In the Properties tab of the Button component, under Label properties, in the Text field, type View Lookups.

2. Right-click on the trigger and add the Go To Page action.

3. In the Properties tab of the Go To Page action, under General properties, in the Page State field, type the Page state of the lookup page. For example: app.lookuppage

7. On the menu bar, click . The components added to the page are saved.

8. To view the page functionalities, on the menu-bar, click . You can now access the page with all the defined functionalities.