Create a Page Lab 1

Now Experience UI Builder Fundamentals 625m

Lab Objectives

In this lab, you will be launching the App Engine Studio (AES) to view the Safety Application that already
exists in your student instance. This app includes both workspace and portal starter experiences, each
containing the default pages that get added when creating an experience within AES.

You will then open the Safety WS workspace experience in UI Builder and create a new landing page
that shows the Safety Issues opened by the logged in user.

A. Explore the Safety Application

Review the Safety application in App Engine Studio and open the workspace experience in UI
Builder.

1. Navigate to App Engine > App Engine Studio on the Application Navigator. App Engine Studio
(AES) will open in a new browser tab.
2. Select the Get Started button within the Getting Started dialog box

Note: As you begin to work within AES, you will be presented with callouts to guide you through
it and to learn about its capabilities. Take a moment to read through each of these instructions
before proceeding.

3. Within the My recent apps section, select the Safety card to open this application.
4. Review the contents of the Safety app, it contains the following:

Data: Issue table

Experiences: Safety Portal and Safety WS
Security: safety_admin and safety_user roles

5. Within AES, you can view the Safety WS experience by selecting Preview on its Experience row
(see image above). This opens it in a new browser tab.
6. From within AES, you can also open an experience in UI Builder to edit it. To do so, select the
three dots on its Experience row and select the Edit option. You can also just click on the row
itself.

7. 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 and return to your original browser tab.
8. Within the Classic UI, navigate to Now Experience Framework > UI Builder on the Application
Navigator. UI Builder will open in a new browser tab.

9. Select the Safety WS experience from the My experiences list.

10. Notice the Home page is displayed by default, and if you select the Page dropdown, you will see
that a few starter workspace experience pages have been included.
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.

1. Change the application scope to Safety. 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 Create a page dialog window, specify the following values:

Name of page: Safety Landing Page

Path: safety-landing-page (automatically populates)
Page template: None
Application scope: Safety (automatically populates and is read-only)

4. Select Create.

5. The Success! dialog window allows you to specify required or optional parameters. This new
page does not require any parameters, therefore, select Done.
 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 with UI Builder or by using the Content tree on the left. We will use the Content tree for
now, so under Main, select + Add component. Then within the Components window, select
Container.
2. Underneath Container 1 > Main 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.

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.

7. Select Container 2 in the Content tree to highlight it. Within the Configuration panel, select the
Layout tab and choose the Two (2) columns option. This adds two slots, or places to add
components, within Container 2.

8. Under Column 1 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 in the Application Navigator. New image files
can be added here as well, for use with the Image component.
9. Select Image 1 in the Content tree to highlight it. Within the Configuration panel, select the
Config tab and update the following values to configure the Image component properties:

Image source: /safety_shield.png

Fit: Keep original size
Position: Center
Height: 400

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

11. Under Column 2 in the Content tree, select + Add component and choose the Data Visualization
component to add a graphical report.

12. Select Data visualization 1 in the Content tree to highlight the component. Within the
Configuration panel, select the Config tab and the Add data source button.

13. 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.
14. Select the Issue [x_snc_safety_issue] table under the Tables section.

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

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

Active is true AND

Opened by is (dynamic) Me
17. 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.

18. Notice the data visualization component currently has a Visualization type of Single Score,
meaning it only displays the number of Issue records returned by the data source with the
custom conditions applied. However, we want to display a Donut visualization, that displays
how many active records were opened by the logged in user, grouped by their Priority value.

19. Ensure the Data visualization 1 component is highlighted in the Content tree. Within the
Configuration panel and the Config tab, update the following values to configure the data
visualization properties:

• Visualization type: Donut

• Within the Data tab:
• Group by (Slices) > Field for Issue: Priority (Select Apply)
• Component header > Component title: My Active Issues by Priority
• Within the Presentation tab:
• Display settings > Show border: False
• Display settings > Chart size: Medium
• Legend > Show legend: False
• Data label > Show data labels: True
• Data label > Show labels as: Value
20. Select Save in the upper right-hand corner to save your work.

21. Add another container beneath Container 1. Within the Content tree, select Container 1 and
click the three dots on the right to bring up a menu. Select Add component after and choose the
Container component.

22. Underneath Container 3 > Main in the Content tree, select + Add component and select the List
- Simple component. We want to display a list of the active Issue records that the logged in user
opened.
23. Ensure the List - Simple 1 component is highlighted in the Content tree. Within the Configuration
panel and the Config tab, update the following values to configure the list properties:

Title: My Active Issues

Table: Issue

Note: If you notice the list component is still displaying Task records instead of Issue records,
try tabbing out of the Table field after selecting “Issue”. Then Save your work.

24. Select the Edit filter button and specify the following filter conditions:

Active is true and

Opened by is (dynamic) Me

Note: Select the first Me option in the dropdown

 25. Select Apply.

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

27. Select Open in the URL bar, your workspace page should look like the image below.

28. Close the workspace page browser tab.

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. Select Menu at the top of the page and choose Edit experience settings.
2. Within the General section, select the Advanced settings link. This will open a new browser tab
and direct 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 on the Application Navigator in the standard view.

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.

5. Within UI builder, select Open in the URL bar, your workspace page should now look like this:

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 now.
E. Add Styling to a Page
1. Add some styling to the Rich text 1 header to change its background and text colors and add a
bottom border.

Navigate back to UI Builder and select Rich text 1 in the Content tree to highlight the
component. Within the Configuration panel, select the Styles tab and add the following CSS:

background-color: #81B5A1;
color: white;
border-bottom: 2px solid;
border-bottom-color: black;

2. Add a top border to the List – Simple 1 component. Select List – Simple 1 in the Content tree to
highlight the component. Within the Configuration panel, select the Styles tab and add the
following CSS:

border-top: 2px solid;

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

4. Select Open in the URL bar, your workspace page should now look like this:

Congratulations – you have completed the lab!