Refresh specific block after one-click update

Kristin · February 20, 2024, 5:22pm

I have a table with one click action buttons. The table refreshes fine after the action button is clicked.

But, need to refresh the block below it (also a table) so that the calculated total updates.

matthieu_chateau · February 20, 2024, 7:24pm

Hi Kristin,

You can perform such thing with custom code:

<script>
window.addEventListener('block-loaded-BlockID1', () => {
  window.addEventListener('update-record-success-BlockID1', () => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('reload-block-BLOCKID2'));
    }, 1000); // 1000 milliseconds = 1 second
  });
});
</script>

Change BlockID1 by the block id where the update occurs.
Change BLOCKID2 by the block you want to be reloaded after an update.

I added a 1 second delay before reloading to give Airtable time to do the calculations. Though you can adapt it to something that would make more sense to you (change 1000 by whatever you want)

Script to be placed in the header custom code of the page

Kristin · February 20, 2024, 7:51pm

Thank you, Matthieu! Appreciate it

yannick · February 29, 2024, 3:41pm

Hey @matthieu_chateau !

I’ve come across lots of different examples, all from you :

window.addEventListener('delete-record-success-blockID1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});

window.addEventListener('submit-form-success-blockID1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});

window.addEventListener('update-record-success-blockID1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});

Is there a logic here? Like …

window.addEventListener('STATUS-record-success-BLOCKWITHBUTTON', () => {
  window.dispatchEvent(new CustomEvent('reload-block-BLOCKTORELOAD'));
});

(and what’s the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?)

Do you have any reading material to recommend so that I can understand all this a little better?

Thanks a lot

And why the header and not the footer ?

matthieu_chateau · February 29, 2024, 4:41pm

Hi Yannick,

The event listener is created by Softr. So there is no pattern. There is update/delete/submit-form. Nothing else. You can’t add any status you want. Though these event listeners were created with the logic you point.

No reading material for it = my experience only + talks with engineering team + my books on Javascript. Even if I had (I have) I wouldn’t give it: building apps in Softr, among other no/low code tools, is my full time job and I choose to keep some of my findings for myself. I give enough to the community (a lot) so that it doesn’t create any problem for people wanting to do things by themselves or for people wanting a bit of help.

Header is important as sometimes (often) a block loads faster than the footer code is being executed, so the block fires an event but there is no listener yet.
By putting those into header you will make sure you always have the listener in advance to act to the loading event

(and what’s the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?) I didn’t understand this one😅

yannick · February 29, 2024, 4:56pm

Hey, thanks for taking the time to reply and yes, you’re participating like crazy, it’s very cool, thank you!!!

(and what’s the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?)

Sorry … What I was trying to say is that I have cases with :

In a page, I have :

a table block containing a list
a second table block containing another list
each block opens the same modal on click

On this modal I have :
a. a List Detail block
b. a List Detail block with a series of buttons
c. another List Detail block with a series of buttons

And what I’m trying to do is :
W. If I update a record by clicking on b. or c.
X. it updates 1)
Y. it updates 2)
Z. it updates a)

Good luck figuring it out

matthieu_chateau · February 29, 2024, 5:05pm

It should be this, if I followed you correctly:

<script>
window.addEventListener('block-loaded-Blockb', () => {
  window.addEventListener('update-record-success-Blockb', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
  });
});
</script>


<script>
window.addEventListener('block-loaded-Blockc', () => {
  window.addEventListener('update-record-success-Blockc', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
  });
});
</script>

matthieu_chateau · February 29, 2024, 5:07pm

Merged =>

<script>
window.addEventListener('block-loaded-Blockb', () => {
  window.addEventListener('update-record-success-Blockb', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
  });
});

window.addEventListener('block-loaded-Blockc', () => {
  window.addEventListener('update-record-success-Blockc', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
  });
});
</script>

yannick · March 1, 2024, 11:10am

Hi Matthieu!

What would Softr do without you? Thanks a lot.

I’m beginning to understand how it works.

Nevertheless, the script works perfectly for the child page, but the modal block doesn’t refresh, I don’t know why, no matter which button is used.

This one : window.dispatchEvent(new CustomEvent('reload-block-Blocka'));

matthieu_chateau · March 1, 2024, 12:47pm

Try this one, it works on my side

<script>
window.addEventListener('block-loaded-Blockb', () => {
  window.addEventListener('update-record-success-Blockb', () => {
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
  });
});

window.addEventListener('block-loaded-Blockc', () => {
  window.addEventListener('update-record-success-Blockc', () => {
    window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
  });
});
</script>

Or using block-loaded-BlockID event listener to debug everything without changing anything in the script:

<script>
window.addEventListener('block-loaded-list-Blocka', () => {
  window.addEventListener('block-loaded-Blockb', () => {
    window.addEventListener('update-record-success-Blockb', () => {
      window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
      window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
      window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
    });
  });

  window.addEventListener('block-loaded-Blockc', () => {
    window.addEventListener('update-record-success-Blockc', () => {
      window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
      window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
      window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
    });
  });
});
</script>

yannick · March 1, 2024, 2:27pm

Ok, actually I still have the same weird problem: it refreshes the block of the button I clicked on.

If I click on the Blockb button, it refreshes Block1 + Block2 + Blockb - not Blocka.

If I click on the Blockc button, it refreshes Block1 + Block2 + Blockc - not Blocka.

I renamed my blocks (which aren’t really called a/b/1…) to see if they could conflict with other scripts, but no. If you have no idea, forget it, you’ve already taken up a lot of time

matthieu_chateau · March 1, 2024, 3:33pm

Mmmm It should work, it’s something I do very oftenly. The block should reload, visually (but maybe the data doesn’t come back as quicly as the reload => a set timeout might be needed).

The fact that it refreshes the block of the button you clicked on is normal and is not related to the script = each time you use an action button it reloads the blocks afterwards, automatically, it’s a Softr native feature.

Hope you will find the missing details!

yannick · March 4, 2024, 9:17am

Ok, I’ll try to start from scratch without any script.
Thanks 1000 times for your time!

NikW · April 18, 2024, 11:59am

Sorry to wade in, but thought I’d ask a related question here, as it seems relevant.

@matthieu_chateau if we want to ONLY refresh the block after a SPECIFIC button click, how would we do that?

For example, Edit record button in Softr works instantly. However, one-click update triggering an AirTable script needs a block refresh with a pause. I only want the refresh on the one-click update, not the first update.

Is there custom code to only trigger the ‘reload-block’ on a specific button press, or a one-click update?

Many thanks!

MattBell · April 18, 2024, 5:13pm

The refresh doesn’t seem to work on the beta ‘grid’ list blocks. Is this to be expected?

matthieu_chateau · April 18, 2024, 9:17pm

The new blocks have a different event listener.

Before it was window.dispatchEvent(new CustomEvent('reload-block-blockID'));
Now it is window.dispatchEvent(new CustomEvent('reload-blockID'));

“block” disappears.

matthieu_chateau · April 18, 2024, 9:23pm

Hi,

This would be possible by pointing to the correct button using .MuiButtonBase-root:nth-child(n), in addition to the correct event listener for an update. Which is tricky to perform in Softr, the action buttons being encapsuled in different elements, hard to find, depending on where they are.

Do you have a picture of where is your button in the block?

NikW · April 19, 2024, 10:55am

Hi Matthieu,

Thanks again for helping out with this. It’s the 3rd button on the table (“Re-Order”). See screenshot. Is that what you need?

Nik

taysa · June 6, 2024, 10:15pm

Hi @matthieu_chateau thank you so much for all of the help you’ve offered in this thread, it has been hugely instructive! I have a situation similar to @yannick’s and would hugely appreciate any help either of you can offer. I tried to use similar implementation and none of my code is working so I thought I would check for what I might be doing wrong.

I have a page with several blocks and modals that need to refresh on certain actions. Here is my breakdown:

List Block with Action Button—Open Details Page Modal
1a. In Modal: List Item Details block with One-Click Update Action
Another Block

When the user completes the one-click update in 1a (modal) I need that page and both of the other blocks to refresh. So:

User clicks one-click update in Modal
1a. Modal refreshes
Blocks 1 & 2 refresh

The code I am attempting to use for this is:

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

I think I might have written the window.parent elements incorrectly but curious what I might be doing wrong! Thank you in advance for any help you can offer!

matthieu_chateau · June 7, 2024, 7:56am

Hi,

<script>
window.addEventListener('block-loaded-1a', () => {
  window.addEventListener('update-record-success-1a', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-block-1'));
    window.parent.dispatchEvent(new CustomEvent('reload-block-2'));
    window.dispatchEvent(new CustomEvent('reload-block-1a'));
  });
});
</script>

You forgot loaded in the second line
Other than this:

if the names of your blocks are “1” and “2” and that they are not dynamic blocks in beta (the new grid block for example) => that’s ok, otherwise it should be reload-1 and reload-2 (line 4 and 5)
window.dispatchEvent(new CustomEvent('reload-block-1a')); might not be useful as when a block updates a value it is automatically reloaded just after (native in Softr)