Hi,
Is it possible to refresh or reload the data within a List Block, say, by a click of a button, without having to refresh the entire page?
To note, I can see that typing a search query into the search bar of a block will pull in new data, so surely there’s a way to purely refresh the block?
Can someone please advise / provide a script that could work?
Thanks.
We are about to add such an event to trigger block reload. I will keep you posted soon
@artur, that’s great news, thanks! Do you have a rough ETA? Just so I can plan my next set of updates.
@EnigmaXXIII now it should be possible
window.dispatchEvent(new CustomEvent('reload-block-BLOCKNAME'));
Oh My 
Legendary!
Are you able to provide a working example, say with this wrapped in a button click? I just tried running this via console and no change on the assigned block.
Huzzah!!! So excited to use this!
@artur not sure if I’m missing something, but I can’t seem to get this working. Console returns a value of “true” but no change to the block on page. When I wrap this inside a function that’s called by a button click, nothing happens either. Could it be an issue with the event listener on Softr’s end? Or am I missing something really obvious?
Can you DM me the page so I can try it on your page ?
Yep. Will DM now.
@EnigmaXXIII It should work now, I tried during the afternoon without success,
But it works now.
I thought it was because I added a window.addEventListener('block-loaded-BLOCKNAME' in my script… But I removed it to check and it still works 
Just as an example, if the goal is to update a block ‘list2’ when you make a record update in ‘list1’ is performed and vice versa => the script would be:
<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>
@matthieu_chateau hmmm. So strange. It still doesn’t work for me. I even replicated your step and no change. I wonder if this update takes time to propagate?
@artur just tested with a table block and it doesn’t seem to reload? Is that intentional? Works on all other blocks I’ve tried so far.
@matthieu_chateau or @artur , is there a good UX way to add a delay on this action? I saw the other post from last month regarding the alert box…
For our purposes, when a user updates any part of their record, the entire record gets pulled out of Airtable into Documint to produce a PDF that is then inserted back into the updated record. That process takes about 8-10 seconds. Only then should our block be refreshed. Any sooner, and it does not contain the latest PDF.
Thank you!
Hi!
Multiple possible solutions:
For the last option, as the delay is long I would not force the user to wait. I would just let them know the pdf will be ready within 12/15 seconds maximum.
Why? Waiting for 10 seconds, even if there is a tip saying “please wait, it will be ready within 10 seconds” is long for any type of user + you force them to wait without having the ability to do anything else.
2 ways to do it:
you just create a waiting page in Softr. The code will be: "When there is an update/create/delete success (I don’t know what is your workflow) =>redirection to the waiting page. In this waiting page there will be just a CTA block (nothing else - no header no footer) with a message saying: “Your pdf will be ready within 12 to 15 seconds, the time we properly gather all data and properly create a fine PDF for you. Feel free to come back whenever you want to check your PDF. If you can’t see your PDF just refresh the page”.
Below this message the CTA button with a wording like “Understood, go back to the previous page” or whatever is the best. They will click the button, hopefully the pdf will be ready otherwise they know they have to wait and they come back to it whenever they want.
Same as 1. but you will use a full coded alert box or waiting screen to do this (I have one here and here). The message in this alert box will be the same as in 1. and they won’t even have to click anything (the alert box will go away after 3 or 4 seconds)
If you choose the last option and you decide exactly what you want, tell me what is the workflow, what is the block name, I will have time to do it for you here
This is very insightful. Thank you! Here is exactly what we are trying to do… The case is a loan application where a user must answer a series of inquiries. The entire page runs off of a single record (“Loan” table) with additional list sections and linked record sections within. One of the sections is “Yes / No Questions”.
I have created a form with only hidden fields to initiate the questions. When they click the “Start” button (which is actually a Form submit to a different table, “Yes/No”), the relevant record and user info gets sent to Airtable.
Unless the page reloads, nothing happens. But when it does reload (allowing 8 seconds to produce a PDF), the page looks like this. The form is removed via user groups, the next section is displayed as part of a record list details (via linked record).
And the section after that is a list section where a user can go through the Edit Record function as the actual form. If they erase and start over, the form reappears (because of user groups) and the PDF viewer goes away (because of no data).
Now that you have the background, let’s talk about the problem. When that form is submitted, nothing happens. In an ideal situation, the user would see a loading popup on form submit. During that time, the PDF would be generated. Then after 10 seconds we get reloads on the form section (to disappear), the PDF section (to show), and the list section for editing (to show).
Taking this one step further. Whenever a user does edit their responses or erase and start over, the reverse actions happen.
Honestly, by typing this all out, I’m realizing it may just be easier to do a timed refresh (with a loading popup) on the entire page, not just section-by-section. And that feels like I should post elsewhere.
So at the end I think the best would be, indeed, a loading screen for 12/15 seconds.
Easy to do I think, you will find a code to do so below (to be inserted in the header/custom code/ page settings).
Change, in the script form1 by your current form ID, this line window.addEventListener('submit-form-success-form1', () => {
Now, for your users, the wording is important as they are going to wait for 15 seconds.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div id="loading-screen">
<div class="loading-content">
<p>Your PDF is being created. Patience, wait for 15 seconds and it will be ready. Please, do not leave the page.</p>
<i class="fas fa-spinner fa-spin loading-spinner"></i>
</div>
</div>
<style>
#loading-screen {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4893eb;
z-index: 9999;
}
#loading-screen .loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
font-size: 20px;
font-weight: bold;
}
#loading-screen .loading-spinner {
font-size: 40px;
margin-top: 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('submit-form-success-form1', () => {
document.getElementById('loading-screen').style.display = 'block';
setTimeout(() => {
document.getElementById('loading-screen').style.display = 'none';
location.reload();
}, 15000);
});
});
</script>
The loading screen is fully customizable in the style part + div part
The delay, in the script, is set to 15 seconds
Also, I think you would need the same when a record is updated? (as you also have the edit action button that could be run in your use case?)
If so change the script part of the code with:
list-details1 to be replaced by the current block ID
<script>
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('submit-form-success-form1', () => {
document.getElementById('loading-screen').style.display = 'block';
setTimeout(() => {
document.getElementById('loading-screen').style.display = 'none';
location.reload();
}, 15000);
});
window.addEventListener('update-record-success-list-details1', () => {
document.getElementById('loading-screen').style.display = 'block';
setTimeout(() => {
document.getElementById('loading-screen').style.display = 'none';
location.reload();
}, 15000);
});
});
</script>