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
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
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?
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â.
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.
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>
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'));
});
Works perfectly. Thanks SO much as always!
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.
Hi Miriam,
It should work though I donât touch Gsheets to create a database for a frontend .
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>
Hi Matthieu,
Thank you for the quick reply 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
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?)
Okay, the problem is me
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
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
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âŚ
Possible, so Gsheets is now the problem
Yes, especially since this code works for others thank you so much for your help ! Might just do a test with Airtable and see if that resolves it.
Hi Matthieu
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
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
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)?
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>