UI Builder Fundamentals

Create a Landing Page

Lab 2 25 minutes

Lab objectives
In this lab, you will using UI Builder to open the Safety WS workspace experience and create
a new landing page for it. This page will display Safety Issues opened by the logged in user.

A. Open the Safety WS experience in UI Builder

1. In this lab, we will be using UI Builder independently as you are not required to
purchase AES to use it. Therefore, close the AES browser tab if you still have it open
and return to your original browser tab.

2. Within the standard UI, navigate to Now Experience Framework > UI Builder within the
All menu on the Unified Navigation header. UI Builder will open in a new browser tab.
3. Sort the My experiences list by Display name in descending order, then select the
Safety WS experience to open it for editing.

Note: Notice the +Create experience button in the upper right. We could have used this
button to create the Safety WS experience as well. However, recall that when you
create an experience within AES it will include a few starter pages. When you create an
experience within UI Builder, it will not contain any pages.

4. Notice the Home page is displayed by default. If you select the Page dropdown, you
will see that a few starter workspace experience pages have been included.

Note: The Home page just keeps loading in UI Builder, a defect in the Tokyo release. We
will not be using this page, so it will not affect the labs in this course.
B. Create a New Landing Page
Although there are a few pages already provided for us in the Safety WS experience, for
the purposes of this lab, we are going to create a new landing page starting from a
blank page.

1. Change the application scope to Safety if needed. Select the Application Picker
dropdown in the header, choose Safety, and select Apply.

2. To begin the creation of the landing page, select the three dots at the right of the
Page dropdown to access the Page Options menu. Select + Create page.
3. Within the Select a page template dialog window, select Create blank page.

4. Within the PAGE Settings dialog window, specify the following values:

Name: Safety Landing Page

Path: safety-landing-page (automatically populates)

5. Select Create.
 6. Notice the new page has been created as the default page variant.

C. Configure the New Landing Page

Add components to the new page to display a title, an image, a list of Safety Issues the
logged in user created, and a donut report showing the logged in user’s active Safety
Issue records by priority.

1. Begin by adding a container to the page. This can be done directly within the stage
in the center panel by selecting the + icon or you can use the Content tree on the
left. Using the Content tree, select + Add component under Body (Flex). Then within
the Components window, search for and select the Container component.
2. Underneath Container 1(Flex) in the Content tree, select + Add component. Search
for and select the Rich text component, this will be the header on our page.

3. Select Rich text 1 in the Content tree to highlight the component. Within the
Configuration panel, select the Config tab and the Edit html button.
4. Replace the existing text with Safety Issues Workspace. Give it a size of 36pt, then
bold and center the text, and select Apply.

Note: Select the three dots in the menu bar to expose the second row of menu options.

5. Select Save in the upper right-hand corner of UI Builder to save your work. Remember
to save often so you don’t lose any work!

6. Within the Content tree, select Rich text 1, then click the three dots on the right to
bring up a menu. Select Add component after and choose the Container
component within the Components window.

Image below.
7. Select Container 2 (Flex) in the Content tree to highlight it. Within the Configuration
panel, select the Styles tab. Change the layout of this container to Grid so we can
define it to have two columns and one row by updating the following Layout
properties:

Type: Grid
Direction: Select
Columns: 2
Rows: 1

8. Under Container 2 (Grid) in the Content tree, select + Add component and choose
the Image component.

Note: Here we will display an image file that already exists within the Images table. This
table can be found by navigating to System UI > Images within the All menu on the
Unified Navigation header. New image files can be added here as well, for use with
the Image component.
9. Select Image 1 in the Content tree. Within the Configuration panel, the preset
options are displayed. Choose None as we do not want to use a preset on this
component.

10. Within the Config tab in the Configuration panel, update the following values to
configure the Image component properties:

Image source: /safety_shield.png

Fit: None (dictates how the image will fit in the container)
Position: Center
Height: 400

11. Select Save in the upper right-hand corner to save your work.
12. Highlight Image 1 in the Content tree, then click the three dots on the right. Select
Add component after and choose the Data Visualization component to add a
graphical report.

13. Notice the data visualization component currently has a Data visualization type of
Single Score. However, we want to display a Donut visualization that displays how
many active records were opened by the logged in user, grouped by Priority.

Ensure the Single score 1 component is highlighted in the Content tree. Within the
Configuration panel, select the Config tab and update the following property.

Data visualization type: Donut

14. Select Save in the upper right-hand corner to save your work.

15. Ensure Donut is now selected in the Content tree. Within the Configuration panel and
the Config tab, find the Data > Data sources section and select the +Add data
source button.

16. Within the Add data source page, search for the Issue table to use as the data
source for the data visualization. Click to the right of the magnifying glass icon, type
“Issue”, and hit enter.
17. Select the Issue [x_snc_safety_issue] table under the Tables section.

18. Within the Filters section, select + Add custom conditions to define the Issue table
filters that will be used within the report.

19. Specify the following conditions to display only active Issue records that were
opened by the logged in user and select Run.

State is not Closed Complete AND

Opened by is (dynamic) Me

Image below.
20. Check out the records displayed in the Preview record list, this is where you can
confirm if your filter is correct. If everything looks good, select Add this source.

21. Ensure the Donut component is still selected in the Content tree. Within the
Configuration panel and the Config tab, update the following values to configure
the Donut data visualization properties:

• Within the Header and border section:

• Chart title: My Open Issues by Priority
• Show border: False
• Within the Data section:
• Group by > Field for Issue: Priority (Select Apply)
• Additional settings > Show total value: True
 • Within the Presentation section:
• Display settings > Height: 400px
• Legend > Show legend: False
• Data label > Show data labels: True
• Data label > Show labels as: Value

22. Select Save in the upper right-hand corner to save your work.
23. Add another container beneath Container 1(Flex). Within the Content tree, select
Container 1 and click the three dots on the right. Select Add component after from
the menu and choose the Container component.

24. Underneath Container 3 (Flex) in the Content tree, select + Add component and
select the List - Simple component. We want to display a list of the open Issue
records that the logged in user opened.

25. Ensure the List - Simple 1 component is selected in the Content tree. Within the
Configuration panel and the Config tab, update the following values to configure
the list properties:

Title: My Open Issues

Table: Issue
26. Select the Edit filter button and specify the following filter conditions:

State is not Closed Complete and

Opened by is (dynamic) Me

27. Select Apply.

28. Select Save in the upper right-hand corner to save your work.

29. Select Open in the URL bar, your workspace page should look like the image below.
D. Update the Navigation

Designate the Home icon in the vertical navigation menu on the workspace, to point to
the new Safety Landing Page.

1. Within UI Builder, select Menu at the top of the page and choose Edit experience
settings.

2. Within the General section, select the Advanced settings link. This opens a new
browser tab that directs you to the Safety WS UX Application record in the standard
view.

Note: You can also access the UX Application record by navigating to Now Experience
Framework > Experiences within the All menu on the Unified Navigation header.
3. Within the UX Page Properties related list, select chrome_toolbar record.

4. Update the JSON object in the value field, by replacing the “route” value from
“home” to “safety-landing-page” and select Update. You may close this browser
tab.
 5. Within UI Builder, close the experience settings menu and select Open in the URL bar.
Your workspace page should now look like the image below (there is only one tab).

6. Select the List icon in the vertical navigation menu, then select the Home icon. You
will be redirected back to the Safety Landing Page instead of the Home page.

E. Add Styling to a Page

Add some styling to the Rich text 1 header to change its background and text colors
and add a border.

1. Navigate back to UI Builder and select Rich text 1 in the Content tree. Within the
Configuration panel, select the Styles tab.
2. Select + beside the Background property and click on the color dropdown. Select
the Palette tab within the dialog box to add the hex color #86ED78.
3. Select + beside the Border property and select the following values:
Thickness: Xs (0.25rem)
Color: #032D42

4. Toggle the View and edit CSS button at the bottom of the Styles tab to view the CSS
editor.
5. Add the following CSS to the CSS styles editor:
• color:#032D42; (notice the typeahead functionality as you type)

Note: You could have changed the color of the text by editing the HTML as well, but
this demonstrates that you can update the Style properties available in the
Configuration Panel AND edit the CSS directly if you prefer.

6. Add a border to Container 2 (Grid). Select this container component in the Content
tree. Within the Configuration panel, select the Styles tab and update the Border
property with these values:

Thickness: Xxs (0.125rem)

Color: #032D42

7. Select Save in the upper right-hand corner to save your work.

8. Select Open in the URL bar, your workspace page should now look like the image
below.
Congratulations! You have completed this lab.