Dot Walking in a GlideRecord Query Data Resource



This issue came up in the a LCHH where we created a GlideRecord Query data resource that was passed a sys_id from the URL and tried to dot walk from a reference field on that record. We'll cover this more in an upcoming LCHH but I did want to get this information out here in the case others are hitting the same issue and want a quick fix to get the data they need. I'll cover the data resource here, but if you want background on how I got here, check out my post on Lady Coding Happy Hour Part 1 & 2 where we worked on this.


GlideRecord Query Data Resource


I'll start with a quick definition on what a data resource is, basically a data resource allows us to get data from tables within ServiceNow and bind them to components on the page. For more information on data resources check out the product documentation I linked in the Resources section. The GlideRecord Query data resource is a Server data, data resource and this particular data resource takes in one argument within the Record field. It's a really helpful data resource when you need to fetch one record when provided a sys_id from another source such as another component, or the URL, etc.


Within the LCHH example, we passed the sys_id of the record from the Dev MVP table we created within the URL and the GlideRecord Query data resource grabs the URL via @context.props.sysId. This table has a reference field to sys_user as the Name field. The issue is, I can access all of the fields on the Dev MVP table, but I cannot dot walk to any of the sys_user fields from the Name field within the user interface for the GlideRecord data resource.



I also want to mention you can hardcode Test values in UI Builder so you can see the data you're working with, without having to open up a page and perform the action that passes your parameter in the URL. In this example I hardcoded a sys_id from a record in the Dev MVP table.



Digging deeper into the fields we can see I can access Name itself, but have no option to dot walk into the sys_user record that Name references. After some searching and stubbornness on creating my own data resource or GraphQL query, I decided to go under the hood to see if there was a simple way I could accomplish what I wanted, without having to create something else.



UX Macroponent Definition


I spent some time previously poking into UX Macroponent Definitions when I was exploring Now Experience Filters, and honestly there's not a lot of documentation on them yet. To boil it down, a UX Macroponent Definition is the backend JSON that houses everything on your page such as the layout, components, data resources, and things such as events. I've found that if you can't find something on the UI Builder interface, you can go in here and look for it. I will give fair warning that things could get messed up here, so make sure you have a backup and can revert if needed and as always explore UI Builder and associated functionality in your PDI first rather than your customer instance.



In order to solve my issue, I went to the Data JSON, and found the data resource that contained my fields, since I only had one on the page this was fairly easy, but the more data resources you have the more complex the JSON will get. I found an element called returnFields which had the fields I selected in the UI Builder interface and added name.photo to the end of it to simulate dot walking from the Name field on my Dev MVP record to the photo field on the referenced sys_user record.



I checked the UI Builder interface, and it didn't force any kind of visual change that I can see, but I did try to link up that field in my Avatar component in the Image source section using:

/**
  * @param {params} params
  * @param {api} params.api
  * @param {any} params.imports
  */
function evaluateProperty({api}) {
 return api.data.mvpObj.output.data.GlideRecord_Query.x_422452_develop_0_dev_mvp._results[0].name._reference.photo.displayValue;
}

The important part here is the ._reference section. I was able to find this looking at the output of my data resource after adding the field, and walking down the JSON tree provided the following:

{
 "data": {
 "GlideRecord_Query": {
 "x_422452_develop_0_dev_mvp": {
 "_results": [
          {
 "_row_data": {
 "displayValue": "Ashley Snyder",
 "uniqueValue": "b3c930d707f83850c147f85c7c1ed03c"
            },
 "name": {
 "value": "2a1f891807813c50c147f85c7c1ed0da",
 "displayValue": "Ashley Snyder",
 "_reference": {
 "photo": {
 "value": "6ce0159807813c50c147f85c7c1ed0ba",
 "displayValue": "6ce0159807813c50c147f85c7c1ed0ba.iix"
                }
              }
            },

I can see in my script that I needed to include _reference in order to keep walking to photo.displayValue. After I added this in, I am now able to get the Photo field from the referenced sys_user record in the Name field on the Dev MVP table.



Takeaways


That's it, I'm assuming you can place more than one dot walked value into the JSON on the UX Macroponent Definition, but haven't tried it. I'm also going to assume that ServiceNow just hasn't built this into the UI Builder interface yet, and it will be there in an upcoming release to make this way easier since they did mention adding dot walking in the condition builder for filtering in components. I'm glad I was able to solve what seemed as an easy issue with an easy fix, but it did serve as a reminder to me that the UI Builder interface is still new and just because I don't see something in the UI Builder interface doesn't mean it's not possible, I may just have to go under the hood at the moment to accomplish what I need until the interface catches up.


Resources


ServiceNow Product Documentation: Data resources in UI Builder







311 views0 comments

Recent Posts

See All