Auto refresh list blocks when list details blocks are updated

Feature Requests
, ,
21

Hi,

Yes, the reload event for the table block is available since one week.

Exactly the same, but change the blockname by the name/id of the table block

1 Like
22

Great!

Is there an easy way to modify the code to update a block every ‘x’ number of seconds to account for new data?

For example, realtime log events will show in a table and the table will refresh every 30 seconds for new events without having to refresh the entire page?

23

Yes but I would not advise to do this, absolutely not a good practice.

The best would be to intercept a change in Airtable for a specific field. Which can be hard to do with Softr.

It depends on the use cases, but intercepting theses changes are often a useless solution, making it “more white than white”.

24

I was wondering the same thing.

Maybe I’ll just leverage custom code to embed a widget for realtime events and use tables for archived data.

25

I’m using the below code snippet to reload a table block (table2) on successful record update of an item in table1.

This works perfectly, as expected; however, it only works for the “edit record” action. Is there a different syntax to update table2 when a successful “Add Record” has occurred? I want to update table2 for new, updated, AND deleted items.

<script>
window.addEventListener('update-record-success-table1', () => {
  		window.dispatchEvent(new CustomEvent('reload-block-table2'));
});
</script>
1 Like
26

Hi,

Yes, this should work =>

<script>
window.addEventListener('submit-form-success-table1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-table2'));
});

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

I don’t remember if deleting a record has the submit-form-success event listener or the delete-record-success event listener.
You can try with the code above but if it doesn’t work you would have to add these lines:

window.addEventListener('delete-record-success-table1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-table2'));
});
3 Likes
27

Works perfectly. Thanks SO much as always!

28

Hi Matthieu,

Thank you for this! Just wanted to check if this is also tested when the database is Google sheets ? I am not sure if that is the issue or i did not implement the code correctly but it does not seem to be working for me.

Any help you can provide is much appreciated.

29

Hi Miriam,

It should work though I don’t touch Gsheets to create a database for a frontend :sweat_smile:.

The code must be placed in the header of the page and you need to change the bock IDs/names with yours.

Also, small update:

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

A better version is:

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

</script>
30

Hi Matthieu,

Thank you for the quick reply :slightly_smiling_face: Unfortunately still doesn’t seem to work. Would you recommend Airtable over Gsheets or another database ? Only using Gsheets because that is what I am familiar with but if it is the better choice I could switch over :sweat_smile:

31

I’m pretty sure it doesn’t have anything to do with Gsheets.
Problem with Gsheets, it’s not a relational database. Short story = you won’t be able to go as far as if you were in Airtable for example.

Can you show me your code (by using ‘</>’) and tell me what your block IDs are (the update or add or delete action occurs in which block? and what is the block to be refreshed when the action occurs?)

32

Okay, the problem is me :joy:

I added this code under - Settings - Custom Code - Code inside header

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

</script>

When a user adds a record or edits a record in table 8, I want table 9 to refresh

33

I reformatted your script to be visibile as code.

What you sent me at first was :

</script>
code here
</script>

It should be

<script>
code here
</script>

You can copy paste the code I rewrote in your post + just to be sure: to be inserted in the settings of the page not the settings of the app

34

Thank you ! Unfortunately still not getting the second block to load. When I spoke to Softr yesterday they directed me to this page to try the custom code but told me “In cases where you are adding the data to the table with a formula, Google is not sending it to us immediately” so maybe that is the issue…

35

Possible, so Gsheets is now the problem :sweat_smile:

1 Like
36

Yes, especially since this code works for others :blush: thank you so much for your help ! Might just do a test with Airtable and see if that resolves it.

1 Like
37

Hi Matthieu :slight_smile:

Do you know if the reload block works for charts and the calendar? Also are your consultancy hours only for full projects or also for helping on things like this ( happy to discuss on private message). Have re-built the database on Airtable but still having issues with this re-load block thing.

Thank you!
Miriam

38

Hi Miriam,

Yes it should work for these blocks.

My consultancy hours can be used for any type of work (though I use a minimum pack of 6 hours that can be used within a year) => DM

1 Like
40

Hi @Maria. After troubleshooting with new (updated) list blocks, I found that they no longer need this code to reload the parent page list block. But what if we need to update all list blocks on the parent page when a list detail block is updated? Is there a code you can provide since refreshing the parent page when a modal is closed code doesn’t seem to work anymore either (below)?

41

Hi is it possible to update an unconnected Table Block when we update a details list from a Kanban block on the same page
i tried this and it did not work

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