UI Builder Fundamentals

Configure a Portal Experience

Lab 5 25 minutes

Lab objectives
In this lab, you will be practicing the configuration of a portal experience, using data
resources, client state parameters, events, scripts, and data binding.

You will be configuring a couple new pages within the Safety Portal experience. Users will be
able to view their Safety Issue records as rows of cards and drill into the record detail.

A. Create a Record Detail Page

1. Navigate to the UI Builder homepage. If you have UI Builder open, select the Home
icon in the upper left-hand corner. Otherwise, navigate to Now Experience
Framework > UI Builder within the All menu on the Unified Navigation header.
2. Select the Safety Portal experience from the My experiences list.

3. Ensure the application scope is set to Safety. If not, select the Application Picker
dropdown in the header, choose Safety, and select Apply.

4. Create a new page. Select Menu at the top of the page and choose Create page.

5. Within the Select a page template dialog window, choose the Standard record
template and select +Use Template.
6. Within the PAGE Settings dialog window, specify the following and select Create.

Name: Safety Record Page

Path: safety-record-page (automatically populates)

7. Notice how the page is pre-configured to display a record form. It even provides
test values from a task record, so you can see how actual record data looks within it
right away.
8. Update the test values to specify table and sysId page parameters that will display a
Safety Issue record. Select the URL, add the following values and select Apply.
table: x_snc_safety_issue
sysId: 955e1cc9ece1b0107f44876baa7ab336

9. Select Open in the URL bar to view the record page in a new browser tab. The
Safety Issue form does not contain an Activity formatter to view the interaction with
the Safety team. However, we can add this by using the Table Builder that is
accessible from within UI Builder.
10. Navigate back to UI Builder and select the Form component in the Content tree.
Within the Config tab, select the Edit form view link at the bottom. This opens the
Table Builder in another tab.

11. Click through the Welcome to Table Builder popup to learn more about what can
be done within the Table Builder (i.e. add fields to a form).
12. Select the + icon at the bottom of the form to add a one column section. Give this
section a Section label of Notes.

13. Inside the Notes section, select the + icon. In the Add form elements window, under
the Fields tab, select the Comments field to add it to the new section.
14. Select the + icon at the bottom of the Comments field to add a formatter below it.
In the Add form elements window, select More and the Formatters tab, then choose
Activities (filtered) to add this to the Notes section.

15. Save your work.

16. Close the Table Builder browser tab and head back to the UI Builder browser tab.
Select Open in the URL bar, to view the record page in a new browser tab. Notice
you can add comments and view past comments now.
B. Create a Home Page
1. Create another new page. Select Menu at the top and choose Create page.

2. Within the Select a page template dialog window, select Create blank page.

3. Within the PAGE Settings dialog window, specify the following values and select
Create.

Name: Safety Home Page

Path: safety-home-page (automatically populates)

C. Create a Data Resource

You will create a data resource to fetch open Issue records the logged in user created.

1. Select the Data Resources icon on the left vertical menu, then select + Add to begin
the creation of the data resource.

2. Search “look up” in the Search data resources text box.

3. Within the middle panel, select Look Up Records, then Add.

4. Configure the data resource. Within the Config tab, do the following:

• Select the small info icon next to the Data Resource name (Look Up Records 1)
to change its label and ID, then select Apply.

Data resource label: Look Up Issues

Data resource ID: look_up_issues

• Configure the other properties:

Table: Issue
Edit Conditions: State is not Closed Complete and
Opened by is (dynamic) Me
Return fields: Number, Priority, State, Short description, Sys ID
Order by: Number

Note: You’ll have to add the Return fields one-at-a-time using +Add.

Image below.
 5. Save your work.

6. Select the Data Resources icon again on the left vertical menu to close the Data
resource instances panel.

D. Add an Image Component

1. Within the Content tree, under Body (Flex), select + Add component. Within the
Components window, select Container.
2. Underneath Container 1 (Flex) in the Content tree, select + Add component and
add the Image component.

3. Select Image 1 in the Content tree. Within the Configuration panel, opt out of using
a preset for this component by choosing None.

4. Within the Config tab, update the following values to configure the Image
component properties:

Image source: /safety_portal_banner.png

Fit: Cover
Position: Center
Height: 400
 Fit value descriptions:

Fill - The image is resized to fill the given dimension. If necessary, the image will be
stretched or squished to fit.
Contain - The image keeps its aspect ratio, but is resized to fit within the given
dimension.
Cover - The image keeps its aspect ratio and fills the given dimension. The image will be
clipped to fit.
None - The image is not resized.
Scale down - The image is scaled down to the smallest version of none or contain.

5. Save your work.

E. Add a Button Component

1. Add a container beneath Container 1 (Flex). Within the Content tree, select the
container, choose to Add component after from the menu and add the Container
component.

2. Ensure Container 2 (Flex) is selected in the Content tree. Within the Configuration
panel and the Styles tab, select the + beside the Padding property and leave the
value as Lg (1rem). This will add some space around the container.

3. Underneath Container 2 (Flex) in the Content tree, select + Add component and
add the Button component. We will use this button to display a modal you will
create in the next lab, that will allow us to create a Safety Issue record.
 4. Ensure the Button 1 component is highlighted in the Content tree. Within the
Configuration panel and the Config tab, update the following values to configure
the button properties:

Size: Large
Label: Log a Safety Issue
Icon: Building Fill

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

F. Add a Repeater Container

1. Add a container beneath Container 2 (Flex). Within the Content tree, select the
container, choose to Add component after from the menu and add the Container
component.

2. Ensure the new Container 3 (Flex) is highlighted in the Content tree. Within the
Configuration panel and the Styles tab, select the + beside the Padding property
and choose Xl (1.5rem).
3. Underneath Container 3 (Flex) in the Content tree, select + Add component and
select the Stylized text component.
4. Ensure Stylized text 1 is highlighted in the Content tree. Within the Configuration
panel, opt out of using a preset for this component by choosing None.
5. Within the Config tab specify the following:
Text: My Safety Issues
HTML tag: H2

6. Within the Content tree, select the Stylized text 1, choose to Add component after
from the menu and add the Repeater component. We will use this component to
display rows of cards containing Safety Issue records.
7. Ensure Repeater 1 is highlighted in the Content tree. Within the Configuration panel,
specify the following:
• Within the Config tab, use Dynamic data binding to use the results of the Look Up
Issues data resource as input into the repeater component:
Data array: @data.look_up_issues.results

• Within the Styles tab, select the Enable styles link and specify the following style
property values:
Type: Grid
Gap: Xxl (2rem)
Columns: 3
Rows: 1

Image below.
8. Underneath Repeater 1 (Grid) in the Content tree, select + Add component and
choose the Container component.

9. Ensure Container 4 (Flex) is highlighted in the Content tree. Within the Configuration
panel and the Styles tab, specify the following values:

Padding: Lg (1rem)
Background: Neutral 2
Border > Thickness: Xxs (0.125rem)
Border > Color: Neutral 21
Border > Radius: Md (0.25rem)
Shadow > Shadow size: Xl (0 .75 1rem 0 RGBA(56,…

Image below.
 Note: Click the info icon next to each style property label, to learn about what
each property does.

10. Add the following five components (in order) within Container 4 (Flex). Use Dynamic
data binding to access Issue field values fetched by the Look Up Issues data
resource, to be displayed in each component.

• Stylized text
Preset: None
Text: @item.value.number.value
HTML tag: H3

• Label value
Label: Priority:
Value: @item.value.priority.displayValue

• Label value
Label: State:
Value: @item.value.state.displayValue
 • Stylized text
Preset: None
Text: @item.value.short_description.displayValue
HTML tag: Paragraph

• Button
Variant: Primary
Size: Small
Label: Go to Record

11. Save your work.

Note: Only the first container within the repeater component is shown in the stage. All
containers are displayed in the live page – see next step.

Image below.
G. Configure the Button

You will add an event handler to the button within the repeater container. This will enable
users to click the button and then be redirected to the Safety Record page to display the
record’s details.

1. Select Button 2 within the Content tree. Within the Configuration Panel, select the
Events tab and the +Add event handler link.

2. Within the Events window, select the Link to destination event handler on the left
and then the Select destination button to specify the destination.
3. Expand the Pages dropdown and select Safety Record Page, then specify the
following values. and.

table: x_snc_safety_issue
sysId: @item.value.sys_id.value (use dynamic data binding)

4. Select OK, then Add.

5. Save your work.

6. Select Open in the URL bar to view the Safety Home page in a new browser tab, it
should look like the image below. Select the Go to Record button on any of the
Safety Issue cards and ensure you are redirected to the Safety Record page with
the details of that Safety Issue.
H. Update the Navigation Menu

1. Notice that the portal app shell includes a navigation menu by default. Right now,
this portal does not require any menus, therefore, we will inactive it.

2. Navigate back to UI Builder. Select Menu at the top of the page and choose Edit
experience settings.

3. Select Navigation and menus on the left, uncheck the Navigation Menu checkbox,
and select Save all changes. Use the X in the upper left corner to close the Safety
Portal settings window.

Note: If you select the Advanced navigation menu settings link, you are taken
to a UX Page Property form, where you could update the chrome menu json
value to configure a navigation menu.

Image below.
4. Select Open in the URL bar or refresh the portal page, verify the navigation menu is
no longer present.

Congratulations! You have completed this lab.