Auto Refresh List Block for NO-CODERS

Custom Coding
1

I have a list block and I want it to auto-refresh when someone presses the delete button for the item. I see lots of explanations of using custom code snippets with something called event listeners in forums. The challenge is that I don’t write code which is why I’m here using Softr. So those forum entries aren’t anything I can follow. This seems like a feature that ought to be native.

Can someone explain, for a no-coder audience, how to insert custom code into Softr so a list is updated after a button is clicked?

Some nuances:

  1. I’d prefer to not have the whole page refreshed.

  2. I don’t think it makes sense to refresh every 10 seconds. Only after the delete button has been pressed.

  3. Some forums suggest I need to reference the blockID. How do I find that? I can’t find it natively, in documentation, or by parsing the HTML in the browser.

2

Hi,

This should become a native feature when workflows are released.

In the meantime, I can do it for you, you just need to give me the blockID of the block where the delete action occurs and the block(s) you want to automatically refresh after a deletion

About where to find the blockID it’s here:

Capture d’écran 2025-03-14 092729
Capture d’écran 2025-03-14 092729547×801 43.5 KB

That being said, if you want the block where the delete action occurs to be auto refreshed – and only this block, then it’s native and automatic, see post below :point_down:

3

@dylanthered I think I’m missing something here… here is video and the blocks refresh just fine… can you share what’s your use case ?

5

Okay, I got my wires crossed a bit on how I posted the original question. Let me clear this up.

@artur You are right, the native delete works just fine. My only ask is the ability to disable the confirmation “Are you sure you want to delete?” The UX in my case would be better if it just deleted.

@matthieu_chateau I still need help having the block (list1) update BUT I need this done when a user hits an “Add” button in another block on the page (grid1) which triggers an workflow in Make.com to add a record to the junction table in Airtable which the List1 block represents.

6

Any ideas here folks?

7

Hi Dylan,

You could try the script below – to be inserted in the custom code of the page => header.

The list1 block will reload 4 seconds after the add button is clicked (you can play with it by changing 4000 (milliseconds)).
The “Add” button is an add record action in Softr (top bar button) I guess?

<script>
window.addEventListener('block-loaded-grid1', () => { 
    window.addEventListener('add-record-success-grid1', (e) => { 
        setTimeout(() => {
            window.dispatchEvent(new CustomEvent('reload-list1')); 
        }, 4000); 
    });
});
</script>
1 Like
8

Thank you for the help. That doesn’t seem to work. The page never reloads. The Add button I have in grid1 is actually an Item button that calls an API vs the top bar button you assumed. Does that change how the code should be written?

9

Hi Dylan, yes it changes the script:

To reload list1 – If list1 is a new block (last version of the list block, not an old list block)

<script>
window.addEventListener('block-loaded-grid1', () => { 
    window.addEventListener('call-api-success-grid1', (e) => { 
        setTimeout(() => {
            window.dispatchEvent(new CustomEvent('reload-list1')); 
        }, 4000); 
    });
});
</script>

To reload the page

<script>
window.addEventListener('block-loaded-grid1', () => { 
    window.addEventListener('call-api-success-grid1', (e) => { 
        setTimeout(() => {
            location.reload();
        }, 4000); 
    });
});
</script>
10

Hi @matthieu_chateau ,

I also need slight help to Auto-Refresh my page or specific block. I have explained my use case below.

Can you help me with a generic version of the code where i can replace my “block ID” and it refreshs the page or another block.

I have explained my use case in the short Loom clip here -

Thanks

11

Hi Ameer,
Thank you for this detailed recording, appreciated.

Here is the script to be inserted in your page settings => custom code => header.

<script>
window.addEventListener('block-loaded-list5', () => { 
    window.addEventListener('update-record-success-list5', (e) => { 
        setTimeout(() => {
            window.dispatchEvent(new CustomEvent('reload-list6')); 
        }, 2000); 
    });
});
</script>

Let me know if any problems.

12

Thank you. Code is perfect. Works like a charm. :slight_smile:

1 Like