IndianTechnoEra: UI Builder 5 | Pages

UI Builder Pages

In Lesson 5, we delve into the concept of pages within UI Builder. A page is the building block of user experiences, offering users the ability to manage their work, access information, and seek assistance. 

An experience contains a collection of pages that include content for users to manage their work, find information, and get help.  So, what makes up a page?  

A page consists of containers and components, each of which is outlined below.

To understand pages better, we need to explore their key elements: containers and components.

Containers

A container, a type of component, serves as a foundational organizational unit within a page. 

Containers can house one or more other components, and you can have multiple containers within a single page. 

These containers allow you to structure the layout of your page using various available layouts.

The image below illustrates a container on the CSM Landing Page within the CSM Configurable Workspace, showcasing a Grid layout with 5 columns and 1 row. 

Each column holds a container, and within those containers, you find a Data visualization component.

Components

Components are the essential building blocks that enrich the user interface with various elements, including menus, data lists and forms, images, buttons, graphical reporting, and more. Components contribute to the functionality and interactivity of your pages.

The image below highlights the Data visualization components on the CSM Landing Page within the CSM Configurable Workspace.

Starter Experiences

When you create a new workspace or custom portal experience within App Engine Studio, it comes with a set of baseline pages known as a starter experience.

 These pages are preconfigured and can be adapted to meet your specific requirements.

However, if you create an experience directly within UI Builder, it won't include pre-built starter pages. Nevertheless, you can access the same page templates when creating your own pages.

Creating a New Page

In addition to using default pages or starter experiences, you have the flexibility to craft custom pages. 

Follow these steps to create a new page within UI Builder:

• Select an Option to Create a Page: You can either go to Menu > Create page from the top bar or, within the Page management panel, click the Page options icon (three vertical dots) and choose + Create page.

• Select a Page Template: Page templates come with pre-defined components, data resources, and layouts. You can choose an existing template or create a blank page from scratch.

• Specify a Name and Path: Provide a name and a path for your new page. The path acts as an identifier and can be appended to the instance URL to access the page.

• Add Parameters: You can add required or optional parameters to your page, as needed.

• Edit the Access Control Rule: If your experience was not created in App Engine Studio, ensure the appropriate users have access by editing the ux_route read ACL.

• Save Your Work: Don't forget to save your page configuration.

Using Page Templates

When creating a new page, you have the option to start with a blank page or use pre-configured page templates:

"Create blank page" allows you to design your page from the ground up, adding your own containers and components.

"Use Template" lets you choose from a selection of pre-designed templates that come equipped with the necessary containers, components, and data resources. These templates are fully customizable and receive updates during system upgrades.

Legacy templates are also available, which were developed before the Tokyo release. They can be selected and customized. Keep in mind that they may not include the latest features and layout systems available in newer versions, so consider upgrading them if necessary.

Defining Page Parameters

After creating a new page, you can include required or optional page parameters through the Page options menu. 

These parameters allow you to pass data through the URL for use within the page. 

Required parameters, such as sys_id, table, or query, are vital for components to bind to their values and display content. 

Optional parameters offer flexibility, allowing you to pass values like colors or text strings.

You can even add test values for these parameters in UI Builder, enabling you to preview actual record data on your page. By doing this, you can provide the necessary information for components to display the contents you desire.

Creating Page Variants

All pages are considered variants, with a default variant automatically created when a new page is generated. If you want to display different content based on user audience or other conditions, you can create additional variants. 

A page variant presents a different version of the page while using the same URL path. Audiences and conditions play a key role in page variants:

Audiences

Audiences define groups of users, typically based on roles, but with the UX Framework User Criteria plugin enabled, they can also be defined based on various criteria like role, group, user, company, department, location, or even custom scripts.

Conditions 

Conditions can be set to specify when a particular page variant should be displayed. 

They can be configured with an order of priority, with lower numbers indicating higher priority. 

Conditions allow you to specify an encoded query to determine when to show the page. The encoded query must be based on data values being passed by page parameters via the URL.

Create a page variant

To create a page variant, follow these steps:

• Open the page you wish to create a variant for within UI Builder.

• Initiate variant creation by selecting "+ Create" within the Variants section of the Page management console.

• Specify whether to create the new page variant from a blank page or an existing page template.

• Name the variant page and create it.

• Optionally, add an audience that will have access to the variant page. This can be done by selecting "Edit audiences" from the variant page options menu.

• Select an existing audience from the dropdown list or create a new one (by selecting the Open audiences in platform link).

• Open audiences in platform link, select New on the audience list view pop-up window. Give the new audience record a Name, specify the Roles that belong to it, and select Submit.

• Select the newly created audience then save and done

• If needed, specify conditions for displaying the page variant by entering an encoded query string in the Variant conditions field, and set the order to determine priority.  Select the variant page options menu (three vertical dots), then select Edit conditions.

• Specify the condition and order and save the page variant configuration.

With your page variants created, you can tailor your content for different audiences and conditions.

Knowledge Test

Q1: Match the terms and definitions;

Here are the matched terms and their definitions:

• Basic elements of a page - Component
• Govern how containers and components are organized on a page - Layouts
• A type of component that can contain one or more other components - Containers

Q2: Page templates are pre-configured pages that can contain what?

• Containers
• Components
• Data resources
• All the above

Q3: When using a legacy page template for the creation of a new page, which two options can you choose from?

• Using the original template provides the full ability to customize the page. (right)
• Copying the template which limits the ability to customize the page. (right)

Q4: What is true about Page Parameters?

• They let you pass data through the URL to be utilized within the page
• They can be required or optional
• You can bind their values to components
• All the above (right)

Q5: If you need to display different content on a page based on who the audience is, how can this be configured?

• Define a page template
• Define a page variant (right)
• Define a portal
• Define an app shell

Next

In Lesson 6, we will explore Components, delving into their role in enhancing UI Builder pages.