Refresh / Reload data in a List Block

[bbelo]

The code above from @matthieu_chateau works (thank you), but when the script kicks in and refreshes the block, it shows a weird load “artifact” on the softr page for just a second or two. Is there any way to control it or get rid of it?

Thanks

[matthieu_chateau]

Hi Boris,

Can you tell me which code you use and what do you see exactly? An artifact in the middle of the page or an artifact on the block where you listen for an update? What block is it?

[thijs]

@matthieu_chateau

<script>
  window.addEventListener('update-record-success-list1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-list2'));
  });

  window.addEventListener('update-record-success-list2', () => {
    window.dispatchEvent(new CustomEvent('reload-block-list1'));
  });
</script>

Hi everyone,

One question and one addition:

Question: Is it also possible to trigger a refresh of a list block IN RESPONSE TO AN UPDATE OF A LIST DETAILS BLOCK WHICH HAS BEEN OPENED IN A MODAL?

Addition: the provided code works very nice, with the minor addition that in case you have a button to remove an item from a list block, the suggested code line works only (at least for me) if the word “update” is replaced by “delete” in the cited code (so that would become: window.addEventListener(‘DELETE-record-success.list1’,… etc.)

[matthieu_chateau]

Hi!

1. Yes:

<script>
window.addEventListener('update-record-success-list-details1', () => {
  
		window.parent.dispatchEvent(new CustomEvent('reload-block-BLOCKNAME'));
});
</script>

So basically you would need to add “parent” in window.dispatchEvent

2. Yes a delete record is a delete action, not an update action. This is normal.

Same for a create record action => If you had an add record action it would be ‘submit-form-success-blockname’

[ramananprodman]

Hi Artur,

Is there any update on this feature. I am working on an application, I want to add a waiting message to the block till I can get data from make app after submission of a form. I want to add waiting time to load till I fetch result. Currently, data is taking around 30 seconds to load. But, users could not see that data. It is visible only after refreshing the page. Please help on this.

[matthieu_chateau]

Display a waiting screen for the exact duration of a long automation / Make scenario with ChatGPT or else

Hi all! Currently, all of the snippets to generate a waiting screen while the data is being processed in make or in an Airtable automation relied on a static duration (setTimeout). The following code allows to display a waiting screen with a dynamic duration. It means that the waiting screen will only last the exact time of the data process in Make or elsewhere. Few words about my current setup (you can check it in the Gif below, to be more visual). A list details block to catch the right r…

[bbelo]

Hello Community.
A slight modification to the use case - what would the code look like if I had an Action Button in a List block that called the newly available “API Call” action after which the block would need to reload/refresh its data? Obviously, some delay would need to be necessary because the API Call would call a webhook and a workflow that may take a second or two to process.

Thanks!
Boris

[matthieu_chateau]

Hi Boris,

This would look like this:

<script>
window.addEventListener('block-loaded-list1', () => {
    window.addEventListener('call-api-success-list1', () => {
        setTimeout(() => {
            window.dispatchEvent(new CustomEvent('reload-block-list1'));
        }, 2000); 
    });
});
</script>

Change list1 by your block ID/Name
Change 2000 (milliseconds = 2 seconds) by the delay you would need

[bbelo]

Hi @matthieu_chateau

Thanks for the tip. I tried it, but it doesn’t seem to work. I am not getting the block reload.

Maybe I missed something?

thx

[matthieu_chateau]

Can you try in the header (Code Inside Header)? In general, all scripts must be in the header in Softr.

If not working I will check if the event listener call-api-success has been released.

[bbelo]

Thank you @matthieu_chateau

So, this is interesting…

Putting this code in the header works. I can see the page reload. However, on the page in my List Block I have an Action Button whose display is conditional and is based on specific values in Airtable that get updated by the Action itself.

The weirdest thing - the page reloads but the Action Button’s conditional appearance isn’t respecting the new Airtable values that are being updated by the Action API call.

I thought it was a delay issue with processing the API call, which triggers a webhook that does the actual Airtable update job. But no, even if I delay it significantly, it refreshes the page, but the conditional logic does not respect the updated values in Airtable. Only if I refresh the page manually is when those values are respected by the conditional display logic.

Boris

[matthieu_chateau]

Is the button visibilty ruled by a user group?

[bbelo]

User Group + “On Which Records” condition…

It’s the “On Which Records” condition that ultimately does the magic of revealing or hiding the button, because the API call invoked by the button updates Airtable data that ultimately causes this condition to resolve to true or false…

[bbelo]

does this look like a bug?

The gist of it is:
I have the custom code setup to reload the page in 5 secs. It can be clearly seen how the page gets reloaded but the button does not get updated with the reload. Only manually reloading the page updates the button.

[artur]

@bbelo can you pls ping the team on Monday via live chat we could help troubleshoot and then share back here ?

[dmytro]

@artur Actually, I am experiencing a similar issue.

• The main Softr page on opening checks whether Term & Conditions are accepted and if not - opens a Modal window asking to accept them
• “User” record in Airtable is updated in popping-up modal window, marking that T&C are accepted
• After the Users record is successfully updated the code waits 2 sec and then throws window.parent.location.reload() to return to the main page
• The main Softr page has 2 blocks - one is connected to Users table and the second one - connected to another table, but filtered on current User’s record data

Result - the first component, which is connected to Users table - is updated immediately. The second one, which is connected to another table but being filtered based on current User’s record, which has been changed - is updated about 1 min later only (!!!) - 15 sec delays, code reloads, browser reloads - nothing helps, the data remains inconsistent for about a minute

What could be a solution, how could I force an update of data in current User’s record? - as in my understanding the problem is exactly there

[bbelo]

Hi @artur

I’ve been already working with Aramayis on this for the last couple of weeks. He came back yesterday asking for more (indefinite) time to resolve this. I’ve asked whether the development understand the cause of the issue and have a solution and just need time to implement it or if they need time to figure our the cause of the issue. He said it’s the latter. So, as far as I can tell, Softr has not determined what’s wrong. Hence the indefinite time-table for resolution. Aramayis may have more relevant information. Thank you!

[artur]

I will sync with Aramayis tomorrow.

[artur]

@dmytro in your case you might need to either disable user cache or alternatively use the filter a bit inverted instead of relying updated value in user try to apply the filter on static user field e.g. email and use the linked fields user-link…

[artur]

@bbelo the same logic would work for you too, instead of saying Video Ask Name is not User's Video ask try Video ask -> user-email is not User's email

this way you can even keep the user cache