Auto refresh list blocks when list details blocks are updated

[Ben]

When a record is updated (edited) on a list details block that was opened with a modal from a list block, the list block does not reflect the change until the page it is on is manually refreshed. Please incorporate an auto-refresh of list blocks when their synced list details blocks are updated. Otherwise, users do not view changes made to list block records and think their updates did not work. Thank you.

[matthieu_chateau]

Hi Ben,

While waiting for this feature, if you need a custom code, that would auto refresh the parent page (impossible to auto refresh a block from custom code) each time you update a record, this would be possible.

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-list-details1', () => {
    window.parent.location.reload();
  });
});
</script>

This is to be inserted in the footer of the page settings where the list-details block is. Replace list-details1 by the corresponding block ID

Not sure if it’s perfectly your use case, as I don’t have a lot of information but worth the try.

(I tested it by reproducing how I imagine your use case, it works!)

[Ben]

Right. Thanks Matthieu. Sounds similar to this.

Refresh after modal close?

Add this to Code inside footer of the parent page, not the modal page. It adds refresh after you click the close modal button (assumes the “Do nothing” action is set for the modal) window.addEventListener('load', function() { setTimeout(function() { var e = document.getElementsByClassName("sw-modal-close")[0]; e.setAttribute('onclick', "MicroModal.close('sw-modal'); location.reload();"); }, 1600); }); </script> PS Some apps need a pause before reload, perhaps to wait…

[matthieu_chateau]

Not exactly, no.

[beauboeye]

I too would like to express my interest in this feature.
Thank you!

[Ben]

Hi Beau. If you haven’t tried it, this workaround will update a parent list block when the list details modal is closed:

Automatic modal closure after button pressed on it

Here it is @dcoletta <script> window.addEventListener('load', function() { var intervalSet = setInterval(function() { var e = document.getElementsByClassName("sw-modal-close")[0]; if (e) { e.setAttribute('onclick', "MicroModal.close('sw-modal'); location.reload();"); clearInterval(intervalSet); } }, 100); }); </script>

[rebeccajane]

@matthieu_chateau do you know if there are any updates on reloading block from Record event listener? Reloading the whole page is not great experience on my app unfortunately

[matthieu_chateau]

Hi Rebecca,

Reloading blocks is not possible (except for the calendar block maybe, I have to test)

Maybe @artur has a better overview of the future improvements about it.

[iAu]

Me too. If a user edits a record in detail view they will always expect the parent list to be updated to reflect their changes

[Maria]

Hey guys, here are codes to reload the list block when the list details block is updated for 2 different cases:

<script>
window.addEventListener('update-record-success-list-details1', () => {
  
		//IF THE DETAILS BLOCK AND LIST BLOCK ON THE SAME PAGE
		window.dispatchEvent(new CustomEvent('reload-block-BLOCKNAME'));
});
</script>

<script>
window.addEventListener('update-record-success-list-details1', () => {
  
		 //IF THE DETAILS PAGE OPENED IN MODAL
		window.parent.dispatchEvent(new CustomEvent('reload-block-BLOCKNAME'));
});
</script>

Insert them in list details page>Settings>custom Code>header or footer section and enjoy

[pushREC]

Just tried doing this and can’t get it to work.

This is the page I got my table block:

I want the table to refresh when the user has updated the status in the modal via the edit button.

Here is the code:

The following code is working (and refreshing the whole page which is not much better than no refresh at all for our user workflow):

Really appreciate any help with this as I’m a noob with code!

[pushREC]

This is my list details page that opens in a modal:

[matthieu_chateau]

Hi,
This is not available for the table block yet.

[danyalamriben]

@Maria dumb question heh but… Do I put this in the details page or the parent page? My app is live so trying to reduce errors but biggest user feedback so far is this issue

“Every time I “completed” the lesson by entering the information and providing …, I had to exit out of that completion popup and manually update the screen in order for the lesson to move out of the to do list and in to the to do list. When I “completed” the lesson at the website, it wasn’t shifting the module over to “completed” instead of “to do” until I manually refreshed the page on toolbar”

[matthieu_chateau]

It needs to be inserted in the the details page (if the details page opens in a modal)

[Maria]

Hi @danyalamriben it should be placed in the list details page( in case list details is opened in modal) and on the same page If they are both in the same page and you are using the first code. Please, also make sure to replace list-details1 with the corresponding list details block id and BLOCKNAME with your list block id(name)

[matthieu_chateau]

Mmmmm no, it should be in the details page (modal page) when opening in a modal => the code uses window.parent.dispatchEvent so it shouln’t be in the parent page itself.

[Maria]

@matthieu_chateau actually yes you are right. In my case both the list details and list were on the same page. Thanks

[danyalamriben]

Thanks to you both! Way better now

[nocodeking]

Is there a solution yet to refresh a table block? I have a ton of use cases for that.