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!

[JagjeetSingh]

For others looking for the answer. Here is how it worked for me.

1. Create a client state parameter. For ex. refreshReq

2. Create a page script. Use below code in that.

api.setState('refreshReq', {timestamp:  new Date().getTime()});

3. Now, trigger this page script from event.

However, you may notice that the list is refreshed on second click of button.

This is because new Date().getTime() OR Date.now() returns null at first time. To solve this I called my page script from page event when page is ready.

This solved the second click issue.

[JagjeetSingh]

However, I noticed that the list is refreshed on second click of button. Did anyone manage to solve this?

[Jon G Lind]

I know that this is an old question, but it was one of the top search results so I wanted to update with the correct answer.

Brad Tilton has a video on the topic, but the way you refresh a list is how you do almost anything else in this reactive framework--by updating a state parameter.

There is a property called "Refresh Requested" on the List which you bind to a state parameter such as "listRefreshRequested".  In earlier versions you set it to an object value using a client script {"timestamp": Date.now()} but in more recent versions (e.g. Tokyo) you can just set it to "Date.now()" and it will initiate a refresh.

function handler({api, event, helpers, imports}) {
    api.setState("listRefreshRequested", Date.now());
}
// In earlier versions you may need to do this:
function handler({api, event, helpers, imports}) {
    api.setState("listRefreshRequested", {"timestamp" : Date.now()});
}

https://www.youtube.com/watch?v=TiQIi9hLVug

[fauverism]

What about if I don't want to update the list but update another component like the Dropdown list?

Say I have a multi select dropdown list of 10 groups which when selected updates the filter on a list component, then the user removes the groups in the filter on the list component. How do I remove the checkboxes from the groups on the multi select dropdown?