Summary
Sometimes it may be useful to change the content displayed on the page dynamically. For example, instead of listing 3 articles on one page at the same time, we can give the user the option of which article they want to read. Using a dropdown and repainting the page's content upon item selection is a useful way to do this.
I use a Lookup Records data resource and feed the output as input to a transform data broker. This is how I populate my dropdown list.
In this example, I placed a list of sys_Ids from a digital content table in the dropdown. The sys_Id selected in the dropdown will change a text component to display the record's content. The label attached to the first sys_Id in the dropdown will automatically be displayed upon landing on the page.
I use a REST data broker to retrieve the records and populate the dropdown. the "id" in the dropdown items are what I use to query the digital content table, this is important. I use another REST data broker to retrieve the selected items content.
For more info on how to use data brokers to populate the dropdown list, check out these articles:
If your page requires login/authentication, you may use a transform data broker:
UI Builder: How to use a transform data broker to populate a dropdown
If your page is public/unauthenticated, you must use a REST data resource:
UI Builder: How to create and use a REST data broker
If you need help making your page public before using a data broker, check out this article:
UI Builder: How to make a page public
Before we begin, I have already added a dropdown component and text component on the page. I have also added. the data resource I will be using. Please add these elements before beginning.
Here is the script I used in my REST data broker to retrieve a list for my dropdown:
var experienceArray = [];
var encodedQuery = "group=" + request.queryParams.session_Id.toString() + "^usage=used";
var experienceListQuery = new GlideRecord("x_snc_exp_fac_m2m_groups_experiences");
experienceListQuery.addEncodedQuery(encodedQuery);
experienceListQuery.query();
while (experienceListQuery.next()) {
var expObj = {
"label": experienceListQuery.experience.name.toString(),
"id": experienceListQuery.experience.sys_id.toString()
};
experienceArray.push(expObj);
}
And here is the script I used in another REST data broker to retrieve the content of the selected item in the dropdown:
//For retrieving the content of the selected experience
var experienceContent = {"content": "No content"};
var experienceContentQuery = new GlideRecord("x_snc_exp_fac_digital_content");
experienceContentQuery.addQuery("content_type", "summary");
experienceContentQuery.addQuery("experience", request.queryParams.experience_Id.toString());
experienceContentQuery.query();
if(experienceContentQuery.next()){
experienceContent = {"content": experienceContentQuery.digital_takeaway_content.toString()};
}
return experienceContent;
| Dynamically redrawing the page using a dropdown | |
|
1. Click on the Client State icon on the bottom left navbar, and click +Add, to the right of the Client State Paramters label 2. Create a client state parameter
|
 |
|
3. Give it a name 4. I data binded the initial value to be the first item returned from my data broker. The line of code is: @context.props.retrieveDropdownArray.result.experienceList.0.id | |
|
5. Now select your dropdown 6. Click on the Events tab 7. Under "dropdown item clicked" click +Add a new event handler 8. Search/select "update client state parameter" 9. Enter the name of the client state parameter we created 10. In the New Value field, enter @payload.item.id | |
|
11. In the data resource that retrieves the content to display on the page, enter @state.clientStateParamName
| |
|
12. Lastly, you can set the default label in the dropdown to be the first item in your dropdown
| |
