@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:
- Simply add a delay in the code + a loading/waiting screen that will be displayed during this delay, easy to do. but this delay will be “static”. => if the PDF is created within 8 seconds, if the delay in the code is set to 10 seconds, your users will lose 2 seconds for nothing. If the pdf is created within 12 seconds they would have waited 10 seconds for nothing.
- Add a more dynamic delay by playing with window.records or Ajax interceptors
- The last option is what I would recommend, specifically because the delay you mention is quite long => let your users know it will take some time and let them be free with this.
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>
Hi everyone, I’m trying the fix that @matthieu_chateau suggested, but so far I haven’t been able to make it work.
This is the code which I have placed inside tag:
window.addEventListener(‘update-record-success-list-details1’, () => {
window.dispatchEvent(new CustomEvent(‘reload-block-list-details1’));
});
I’m trying to refresh a list detail block with the name as in the code, I’m trying to console.log some text when this triggers, but for some reason this event listener never gets triggered.
Hi,
Can you try this one, in the footer of the page settings, I added a 2 seconds delay
<script>
window.addEventListener('update-record-success-list-details1', () => {
setTimeout(() => {
window.dispatchEvent(new CustomEvent('reload-block-list-details1'));
}, 2000);
});
</script>
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
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?
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.)
Hi!
- 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
- 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’
3 Likes
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.
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
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
1 Like
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
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.