Lab 5 - Configure a Portal Experience
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
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,…
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.
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.
4. Select Open in the URL bar or refresh the portal page, verify the navigation menu is no longer present.