UI Builder - Fetching data from Form Controller

Vegard S
Kilo Sage

This is something that's been an issue for a while and I'm wondering if this is a known issue or if it's just not supposed to work. 

So I have a Page Collection where the UX Extension Point is set up correctly to Tabs component and Form as a controller. This appears as expected under Inherited Data Resources in the Page in the Page Collection. 

However, it's really difficult to bind data to it. 
For example, I can bind a label's value to it:

VegardS_1-1743578340532.png


And this appears no problem on the page during runtime


However, if I add a multi-table data resource and try to fetch data from it exactly the same way, it's NULL at runtime, but in the preview in UI Builder it appears to be working. 

VegardS_0-1743578217203.png


If I do the exact same thing on the Record Page itself without a Page Collection, then the same thing happens, however, on there I can add an Event on the Form Controller to Refresh the multi-table data resource when the Form Controller is done fetching it's data. THEN it works. 

But I can't do this in a Page Collection, neither should it be necessary to be honest. 

This is on Xanadu with all the updated plugins. But it's been like this since for as long as I can remember.
And it happens with every data resource I try to bind it from as well, doesn't have to be the multi-table one. 

 

4 REPLIES 4

Sondre
Tera Contributor

Having the same issue.


I have a page collection page variant that I am going to open within a modal. The page collection inherits the form controller from the record page. 


I figured out that by creating new props (page properties), stored as @context.props.parentTable (from clicking configure on the <body> element of the modal, I could successfully assign i.e table from @Data.controller.table to the new property @context.props.parentTable.

Then I assigned that to a client state parameter of similar name. like: @STate.parentTable. 

 

At some point it was working. The props and state attributes had the controllers value. 
I wanted to change the name of a property. Then it all crashed. I have not been able to rebuild it. 

It seems unstable, even when I got it working it was after clearing the cache and all that comes with it... 

Did you ever get it to work properly? 

 

Br, 

Sondre.

elschmidt
Tera Contributor

Also having this issue, where I am able to view the record data in real time in UI Builder window, but then the Data Resource I have cannot read the record data. I've tried creating page properties, client state parameters, and reference the record field from each of those, but haven't gotten anything to work.

 

Waiting to hear back from ServiceNow support - it feels like a bug to me.

Sondre
Tera Contributor

I got it working eventually. 

Though its not something you have not mentioned @elschmidt, I will share my current configuration. 

 

  1. Click the body tag of the page, under configure add a page property for table and sys id. Bind the data.controller.sysId and data.controller.table to these properties.
    Sondre_0-1750139147575.png

     

  2. Add two client state parameters of same name. So both my page properties and client state parameters are named parentTable and parentSysId. 
    Sondre_1-1750139203512.png

     

  3. Create a data resource (I used a transform, custom that does not mutate data, remember the data broker ACL). Bind the client state parameters to the data resource. Set it to run when invoked. The values will show "null", but just go on. 
  4. Back to the <body> tag under events tab, add event handler for event Page ready. Use Update client state parameters.
    Sondre_2-1750139485956.png

    Set the client state parameter to the value of the controller ( parentTable = data.controller.table)

    Sondre_3-1750139575038.png

     

  5. Add another event handler (depending on you config though...) for Page Viewport load complete to trigger the data resource REFRESH. 
    Sondre_4-1750139673279.png

     

    I think in this way the controller is bound to the some client state parameters that is needed as the controller refreshes and we loose context. And I think its crucial to not load your data resource until the page or viewport has loaded. Going forward you will never be able to visualize the data from the data resource, but it is there, so just log it with a client script or create a log button, to be able to log it on demand. 

    Give it a shot! 🙂

elschmidt
Tera Contributor

Thank you for replying!
I actually just came on here to post how I got it working, in a slightly different way than yours but seems like the key is using client state parameters and refreshing the data resource at runtime... glad we both got it to work! This was my method, and my use case was generating an API response based on some user input and displaying it in a pop-modal during runtime when a value is changed:


  1. Navigate to Body in the content pane, and create the Event on the Page to open the new Modal, both as a ‘Handled event’ and then added as an ‘Page event mapping’

elschmidt_0-1750180030709.png

 

 

 

2. Create client state parameter

elschmidt_3-1750180030714.png

 

3. Create client script saving the required field into parameter

elschmidt_4-1750180030717.png

4. Reference client state parameter for the input of the data resource that calls the API (shows as not working in output panel but don’t worry, it will work during runtime)

elschmidt_5-1750180030721.png

5. Event - Set the script and API to run/refresh on the Controller (Record 1) page load

elschmidt_6-1750180030724.png

6. Event - Set the script, API, and Modal to run/refresh/open when a form field is changed

elschmidt_7-1750180030728.png

7. When you preview, after changing a field value and hitting ‘Update’, the modal should appear with user-entered value and API returned value (NOTE: it is very buggy. Sometimes a change in UI Builder, or having the case record open in another tab, will cause the API value to be blank. If that happens, refresh the browser and try again)

elschmidt_8-1750180030730.png

 

elschmidt_9-1750180030732.png