- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-06-2022 03:18 PM
I'm expirimenting with putting a dynamic filter on my List component, using Brad's video here as a starting point. At a high level this works fine, but to avoid hard coding I'm trying to fetch some of the inputs from a data resource, and I have not been able to read the data resource from a client script.
My use case is roughly as follows:
An administrative user will usually want to see all records across several sites, and the list filter does this by not filtering for Site. But they might wish to zoom in on one site, or two sites out of three, where the site column is a reference to a Site record.
(Of course they can do this through the list component, assuming the Site column is included, by choosing some combination of Show Matching and Filter Out. But I'm exploring the subject anyway, to see how far I get.)
1. I added three boolean client state variables, to represent whether the filter should (true) or should not (false) filter for that site. If any is true, the filter is modified.
2. I added three checkboxes, one for each client state variable (that is, one for each Site), bound its checked state to a client variable,and assigned each an id matching the name of a variable.
3. Each checkbox's "Checkbox checked" event calls a toggleSite() function. The payload carries the id of the checkbox.
{ "name": "cookeville", "value": true }
4. toggleSite() flips the value of the state variable whose name matches that id.
function handler({api, event, helpers, imports}) {
api.setState(event.payload.name, event.payload.value );
}
5. I added three more String variables representing the sysIds of the sites. I left these hard coded for now.
6. Now all my filter has to do is check the state of those three booleans, and if any is true, modify the filter using one or more of the String variables.
function evaluateProperty({api}) {
// default is not to drill down to any site
var filter = "";
var dirty = false;
// if user is drilling down to katy
if(api.state.katy) {
filter += dirty ? "^OR" : "";
filter += "u_site=" + api.state.KatySite;
dirty = true;
}
...
return filter;
}
That's crude, but it works well enough for my immediate purpose.
The next challenge is to remove the hard coding of the sysIds. And I've not been able to figure that out.
7. I set up a Global | Look Up Records data resource reading from the Sites table. It brings back data like so:
[
{
"_row_data": {
"displayValue": "Cookeville",
"uniqueValue": "a8a6b71a872281108a62fd57dabb354e"
},
"sys_id": {
"value": "a8a6b71a872281108a62fd57dabb354e",
"displayValue": "a8a6b71a872281108a62fd57dabb354e"
},
...]
8. From the Body's Page ready event I call a client script to fetch the site data and read each sysId into a String variable.
According to my understanding the data resource should have a property named results, or something similar.
9. However, my client script is not able to read anything from the data resource.
function handler({api, event, helpers, imports}) {
var data = api.data.look_up_sites;
console.log(data.results); // undefined
}
Can anyone help me understand how to read data from the data resource in a script?
Solved! Go to Solution.
- Labels:
-
Now Experience UI Framework

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-08-2022 05:52 AM
It sounds like you might have a race conditions issue where the DR hasn't returned data on page load. That data resource should have a Data fetch succeeded event (or something similarly named) that fires when the data resource is done fetching data. Typically if I need the data from a data resource I'll run a client script off of that event so I can be sure that the data has been fetched. Depending on the DR you may also be able to access the data from the event payload.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-06-2022 07:06 PM
it would be accessible like api.data.look_up_sites.result._row_data.uniqueValue;
The look up records returns Result array. You can access the object's elements based on it's structure.
It also returns items object. You can use that as well instead of result.
ServiceNow Community Rising Star 2022/2023

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-08-2022 05:52 AM
It sounds like you might have a race conditions issue where the DR hasn't returned data on page load. That data resource should have a Data fetch succeeded event (or something similarly named) that fires when the data resource is done fetching data. Typically if I need the data from a data resource I'll run a client script off of that event so I can be sure that the data has been fetched. Depending on the DR you may also be able to access the data from the event payload.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-09-2022 07:38 AM
Thank you, that works. FYI the syntax is