Exercise 2: Page Collections - Sidebar

Goal

In this lab you’ll add a tab to the contextual sidebar to the Standard Record Page (SRP) in Service Operations Workspace (SOW) that shows all other incidents for the Caller. This will allow you to add functionality to the record page without owning it. You can think of page collections (PC) as extension points.

This lab assumes you have completed the pre-work and are comfortable navigating UI Builder.

Depending on your demo data situation you may want to create at least two incidents with the caller you’re planning on using for testing.

Create a new page

Open UI Builder (UIB) by going to All > UI Builder or if you still have it open click on the UI Builder icon at the top left of the builder window to bring up the homepage.
Change your scope
Scroll down past the Experiences section to the Page Collections section and filter the Display name on sow.

Note: there are 4 different page collections for SOW SRP tabs depending on where you want to add content:
Open SOW – Sidebar tabs top by clicking on it.

Note: You’ll see a view with all of the pages in the page collection. If you look at the record information page you’ll see that pages in a Page Collection can have different variants and show different things based on the parent record page. For example, the second item in the list only shows for new incidents:
Change your scope in UI Builder to Service Operations Workspace ITSM Commons in UI Builder.
Click the plus sign to create a new page:
Choose Create a new page and fill out the new page form:
- Name: Caller related incidents
- URL path: caller-related-incidents
Choose Continue.
Name your Variant CRI Default and then choose Create.
In the green banner that appears choose Open in Editor.
One last thing you need to do with the page is give it an icon for the sidebar. Click the Settings pill/toggle at the top middle of the UI Builder window, choose the Open records dropdown under Actions, and choose Page collection to open the page collection record in a new tab.
Scroll down to the UX App Aroutes related list, double-click into the Icon column for the Caller related incidents row, and type list-fill for the icon. Hit enter or click the check mark.

Test the Record Page

Test this by opening up a record page in Service Operations Workspace. Choose Workspaces > Service Operations Workspace.
Close the modal.
Click on the List icon in the left hand menu, choose Open incidents, and click into an incident.
You should see a new list icon on the right menu with a No content available message in the page body on the right.

Now you’ll add some content to the Caller related incidents (CRI) page that pulls from the parent page.

Switch from Settings to Editor using the pill at the top of your UI Builder window.
Find the Test values dropdown towards the top left of the page, change to Form in the dropdown, and choose Add test value.
Check Table and Sys ID and choose Update.
Choose Incident for table and let the Sys ID autopopulate. It should just grab a random incident record id.
Choose Apply.
Add a new data resource by clicking +Add data resource in the Data and scripts panel at the bottom left of the UIB window.
Choose Look up multiple records and choose Add.
Rename the data resource by using the (i) icon to the right of the name and fill in:
1. Data resource label: Look up incidents
2. Data resource ID: look_up_incidents
Choose Apply
Fill out the data resource as follows
- Table: Incident
- Choose Edit conditions and fill out:
  - <data binding> Caller | is | Data resource > record > form > fields > caller_id > value
  - AND
  - <data binding> Sys ID | is not | Data resource > record > sysId
  - Click Apply.
- Return fields (click +Add and choose one field at a time)
  - Short description
  - State
- Order by: Number
- Sort type: desc
- Max results: 20
Close the Data resource window.
In the content tree under Body, add a Single column layout.
In the right panel add L padding.
Add a Stylized text component within Column 1.
Remove the preset using the Preset dropdown and choosing None and then Remove.
Configure the stylized text component as follows:
- Text: Caller related incidents
- HTML tag: H2
Add a Repeater component within Column 1 after the stylized text by right-clicking on Stylized text 1 and choosing Add after.

A repeater acts as a basic loop that repeats the data you provide in multiple components within UI Builder. Repeaters use an array or an array of objects.
Choose None for the preset and click the Data binding icon on the Data array property.
Choose Data resource > look_up_incidents > results and choose Apply.
Click into the Styles tab on the repeater and choose the Enable Styles link. This causes the repeater to act like a container where you can add some margin and padding.
In the Styles tab, set the Width to 100%.
Add a Card base container within the repeater using the +Add component link under the repeater in the content tree.
On the Config tab, choose None for the preset, set the size to Medium, and Interaction to Click.
Click into the Events tab and add an event mapping for the Card clicked event.
Scroll all the way down in the event handlers window and choose the Relay open record event handler under the Form Controller.
Fill out the properties on the right:
- Table: Incident
- Sys id: <data binding> Repeater > value > _row**_data > uniqueValue** and hit Apply
This is an important step to note. The page in the page collection cannot directly communicate or get values from the parent page except through the controller. The form controller has many event handlers built into for this purpose you can explore.
Click Add.
Within the Card Base Container 1, add a Stylized text component, remove the preset, and set the following props:
- Text: <data binding> Repeater > value > number > displayValue
- HTML tag: Div
Duplicate that stylized text component by right-clicking it in the content tree and choosing Duplicate.
In the new stylized text 3 component, change the text to reference the short description instead of the number. You may have to remove the current value by clicking the value and clicking the X. If you have any trouble getting the short description to display here, you may need to remove the value altogether, save the UIB window, refresh it, then rebind the data to the short description value.
Save your page collection and test in the workspace on an incident. Make sure to hard refresh the page CMD+SHIFT+R or CTRL+SHIFT+R. (That’s good practice to get into overall with UIB pages). When you click one of the caller related incidents you should have the incident open in a subtab under the current incident record.