Dynamic Data Binding Issue: Same Task Number on All Cards

ronro2
Tera Contributor

Hey guys! 

I really wonder what I'm doing wrong, as I've followed this Youtube tutorial thoroughly. Watch from 5:27 to understand where my issue starts.

I am trying to show information about specific tasks, but it doesn't matter which card I open up, the task number is always static, giving me this very task number: RB0054179 (no matter what button I click in whatever card). 

 

I always get this same information: 

ronro2_0-1764345512809.png

 

This is the "Bind data to content" information box: 

ronro2_1-1764345673921.png

ronro2_2-1764345726177.png


The binded data source is based on a single lookup record type in my case as well. 

 

What do you think I am missing? What could be possible issues? 

Greetings!

2 ACCEPTED SOLUTIONS

lauri457
Giga Sage

I didn't watch the video but you shouldn't necessarily have another data resource to get the record for your modal. You can pass whatever info you need inside your repeater as part of the data array. Meaning if you need number, state whatever you get that in your lookup and pass it to the repeater. That way the nth component inside the repeater can reference the repeater data at index n like you have done.

 

Then with your button component, you should bind an event handler(s) to the button clicked event. Then you can pass some of the information to the modal with the handler. And whatever else you need in the modal I would store in a client state parameter and bind to the modal contents.

 

So you would have something like this

lauri457_1-1764814398123.png

Client script "Update state params":

/**
*  {params} params
*  {api} params.api
*  {any} params.event
*  {any} params.imports
*  {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
   api.setState("number", event.context.item.value.number.displayValue)
   api.setState("sysid", event.context.item.value.sys_id.displayValue)
}

Binding state to modal content property for example:

/**
 *  {params} params
 *  {api} params.api
 *  {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    return `${api.state.number} sysid is ${api.state.sysid}`;
}

lauri457_0-1764814379973.png

If you instead want to bind from another data resource to the modal properties then you need to also refresh that data resource with the button clicked event.  

View solution in original post

You have to first create a client script in the bottom left and then 

lauri457_0-1764848636267.png

when you're selecting a handler for an event they are at the bottom of the list.

lauri457_1-1764849073115.png

But you can use the no-code "update client state parameter" instead of client script as long as you are binding to the component property from state

View solution in original post

8 REPLIES 8

Sheldon  Swift
ServiceNow Employee
ServiceNow Employee

Hi @ronro2 - I would start by looking at the look_up_a_single_record_rail_request data resource. Can you share a screenshot here?

ronro2
Tera Contributor

Hey @Sheldon  Swift!

Here is the screenshot you asked for. To me it looks normal. Keep in mind that this is the right table for my use case. 😕 

ronro2_1-1764755289373.png


Here is one showing its usage: 

ronro2_0-1764755254955.png

 

ronro2
Tera Contributor

@Sheldon  Swift When I try to "Bind data to Content" I can here already see the fixed value "RB0054179". Look here: 

ronro2_0-1764762149076.png

 

ronro2
Tera Contributor

@Sheldon  Swift Maybe there should be a connection between each card and the modal? Because I have a carousel of cards, and there the data is correct. But when I click on the "Åtgärda" button that connection seems to be lost/non existent.

ronro2_0-1764765532224.png

ronro2_1-1764765591239.png