UI Builder: Refresh List

[A_P_]

Hi everyone,

I'm using UI Builder to display / update a list on a page. I have a button that submits new information to an already existing record. I'm trying to update the list automatically after the information has been submitted, but I can't quite get it right. I'm using this script:

api.setState('refresh_list', {timestamp: Date.now()});

The issue is that the first time I press the submit button, the refresh doesn't happen. I have to press the button again for the list to get refreshed. I've tried putting this script together with my update script, or in a separate script, and the result is exactly the same. Does anyone know how to fix this issue?

Thanks!

[Daniel Draes]

I have seen Brad and Chuck struggling with the refresh not working as expected - see here: Creator Toolbox - Build a Notes App in UI Builder - YouTube

As for your requirement.... How do you update the record information? Is that a 'Update Data Resource'? If so, use an event script on that to trigger a refresh on your list. All you need to do is to refresh the data source which is feeding your list, this automatically updates the list on the page.

[A_P_]

Thanks for your response.

I have an update record data resource, and I update my table via a script that is triggered by clicking a button. I've tried adding the update script together with the main script, as well as creating a second script that is also triggered by the button. Both options are giving me the same result. When I click the button the table is updated, but for the update to show up on my list on the page, I have to click the button one more time. So technically it works, but badly.

[Daniel Draes]

So if I understand your scenario correctly this should help 😄

On your update data resource there are a set of events being fired. One is called 'Operation Suceeded' - this will fire when the update has happened on the database. You can add a client script on that event refreshing your list.

All the client script needs to do is to trigger a reload on your list or read data resource providing data to the list. Once that data resource is refreshed the UI will update accordingly. Here are some screenshots of how this looks for me:

Update Data Resource event mapping:

The client script Refresh Interested Party List:

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 */
function handler({api, event, helpers, imports}) {
    api.interestedpartylist.refresh();
}

The list component I use is this one:
Now Component Library | ServiceNow Developers

[A_P_]

Thanks for the suggestion. This didn't solve the issue for me, but I found a work around [Basically I just call the refresh script twice in a row..].