Lab 4 - Configure a Workspace Experience
Lab objectives
In this lab, you will be practicing the configuration and use of data resources, client state parameters, events, scripts, and data binding within the Safety WS workspace experience.
First, you will update the Safety Landing Page default page. The Safety Issues list will be updated to show Issues filtered by the logged-in user’s location. This requires that you create a data resource to fetch the location, then apply it in the list filter using dynamic data binding.
You will also update the Safety Landing Page Safety Admins page. You will add a dropdown component that contains a list of locations that a Safety Admin can select from to filter the Safety Issues list. This requires that you create a data resource that fetches the list of unique locations from the Issue table. This data needs to be specifically formatted for use by the dropdown component, so you will use a script to transform it. Finally, you will create a client state parameter and configure an event handler to update the value of that client state parameter to the selected location. This client state parameter will be used within the Safety Issues list filter.
A. Update the Safety Landing Page default Page
Create a Data Resource
Create a data resource to fetch the Location specified on the User record of the logged-in user.
Within UI Builder, open the Safety WS workspace and select the Safety Landing Page default page.
Select the Data Resources icon on the left vertical menu, then select + Add to begin the creation of the data resource.
In the pop-up window, enter “look up” in the Search data resources text box to filter the list of available data resources. Within the middle panel, select Look Up Record, then Add.
Configure the data resource. Within the Config tab, specify the below values. Use the Dynamic data binding option to specify the @context syntax for the Record value.
Note: Disregard the "Something went wrong" message; this will go away once you enter a Table value.
Table: User (sys_user) (tab out of this field once selected)
Record: @context.session.user.sys_id (fetches session data)
Return fields: Location (select the + Add button to add the value)
Save your work.
Select the Data Resources icon again on the left vertical menu to close the Data resource instances panel.
Update the List component
Update the filter on the list component to use the value returned by the data resource created above.
Within the Content tree, select the List – Simple 1 component in Container 3 (Flex).
Within the Configuration panel, select the Config tab and the Edit filter button.
Within the Filter conditions, remove the last condition in the list (Opened by is (dynamic) Me) by using the X button at the end of the condition.
Add a new condition by selecting the and button. Filter by the Location value returned by the data resource created above. To do so, select the Dynamic data binding icon to add a reference to the look_up_record_1 data resource. Add the following condition (just type out the full reference, no typeaheads here):
Location is @data.look_up_record_1.result.location.value
Select Apply.
Update the Title of the list component to "Safety Issues in My Location."
Save your work.
Test Your Work
Select Open in the URL bar; your workspace page should look like the image below.
Verify that the Safety Issues list has a new title and only shows records where the Location is Colorado Springs. This is the Location value on the System Administrator’s user record.
B. Update the Safety Landing Page Safety Admins page
Create a Data Resource
Create a data resource that fetches the list of unique locations from the Issue table.
Within UI Builder and the Safety WS workspace, select the Safety Landing Page Safety Admins page.
Select the Data Resources icon on the left vertical menu, then select + Add to begin the creation of the data resource.
In the pop-up window, enter “agg” in the Search data resources text box to filter the list of available data resources.
Within the middle panel, select Aggregation Query, then Add.
Configure the data resource. Within the Configuration tab, specify the following:
Table: Issue (x_snc_safety_issue) (tab out of this field once selected)
Edit conditions: add State is not Closed Complete and select Apply
Group by: Location
Note: The Preview panel shows the json output that is returned from the data resource.
Save your work.
Select the Data Resources icon again on the left vertical menu to close the Data resource instances panel.
Create a Client State Parameter
Create a client state parameter to store the value of the Location selected in the dropdown component that will be added next.
Select the Client state icon on the left vertical menu, then select + Add to begin the creation of the client state parameter.
Configure the client state parameters with the following values:
Name: selected_location (hit tab after populating)
Type: String
Initial value: [leave blank]
Note: The Client state preview panel shows the value of the parameter.
Save your work.
Select the Client state icon again on the left vertical menu to close the Client state parameters panel.
Add a Dropdown Component
Add a dropdown component to the page that will contain the list of Locations that was retrieved by the data resource created above.
In the Content tree, select the List – Simple 1 component in Container 3 (Flex).
Click the three dots on the right to bring up a menu. Select Add component before.
Choose the Dropdown component.
Within the Configuration panel, select the Config tab and update the following values to configure the Dropdown component properties:
Placeholder text: Select a Location to filter Safety Issues
Placeholder icon: Globe Fill
For the Item > List items property within the Config tab, a JSON list of name/value pairs for the list item id and label must be provided, which is formatted like this:
css
Copy code
[{"id":"l1","label":"List item 1"},{"id":"l2","label":"List item 2"}]
The locations data returned by our Aggregate Query 1 data resource is not in this format. Therefore, we will add a script to reformat its output and return the updated string to use in the Items property.
To do this, select the script icon on the List items text box to open the Now Code Editor.
Add the following code in the script editor, overwriting the existing function, and select Apply.
javascript
Copy code
function evaluateProperty({api, helpers}) {
var jsonObj = api.data.aggregation_query_1.output;
var numOfLoc = jsonObj.data.GlideAggregate_Query.length;
var jsonVar = "[";
for (var i = 0; i < numOfLoc; i++) {
jsonVar = jsonVar + '{"id":"' + jsonObj.data.GlideAggregate_Query[i].groupBy[0].value + '","label":"' + jsonObj.data.GlideAggregate_Query[i].groupBy[0].displayValue + '"}';
if (i < (numOfLoc - 1)) {
jsonVar = jsonVar + ",";
User
continue
ChatGPT
Certainly, here's the continuation of the content:
javascript
Copy code
}
}
jsonVar = jsonVar + ']';
return jsonVar;
}
Within the Configuration panel, select the Styles tab and set the Alignment property to center using the icon highlighted below.
Configure an event handler to set the value of the selected_location client state parameter when the user selects a Location from the dropdown.
Ensure the Dropdown 1 component is still highlighted. Within the Configuration panel, select the Events tab.
Select +Add event mapping and choose Dropdown selected items set.
Within the Event window, select Update client state parameter and provide the values below:
Client State Parameter Name: selected_location
New Value: @payload.value (select the Dynamic data binding icon first)
Select Add.
Save your work.
Update the List component
Update the filter on the list component to use the client state parameter value.
Within the Content tree, select the List – Simple 1 component in Container 3 (Flex).
Within the Configuration panel, select the Config tab and the Edit filter button.
Add a new condition by selecting the and button. Select the Dynamic data binding icon to reference the selected_location client state parameter. The condition should look as follows:
Location is @state.selected_location
This will filter the Issues list by the Location value returned by the client state parameter created and populated above.
Select Apply.
Update the Title of the list component to "Open Safety Issues by Location."
Save your work.
Test Your Work
Select Open in the URL bar; notice the page variant is not being displayed because System Administrator is not included in the Safety Admins audience we created. Leave this tab open.
Impersonate the Safety Admin Zane Sulikowski.
Refresh the Safety WS page. You will be directed to the Safety Issues Admin Workspace, which initially has no records listed in the Open Safety Issues by Location list component.
Select a Location from the dropdown and confirm the Open Safety Issues by Location list component is filtered by Issues records for that Location.
End the impersonation of Zane Sulikowski and ensure you are once again logged in as the System Administrator.
Congratulations! You have completed this lab.
Lesson 13 - Lab 5: Configure a Portal Experience