Action Button to Reload an Individual Block

Custom Coding
1

I’m looking for a way to be able to refresh a block by clicking on a button. Ideally, it would be great to utilize a top bar action button; however, a custom-code block with a button could also work.

I have various refresh and reload scenarios by calling a whole page refresh but I’d like the ability to call an individual block reload by clicking a refresh button.

Being able to check a table block for new line items would be great without having to refresh the entire page. I’m fairly confident it’s doable since we have the reload code (see below), i’m just not sure how to call it with a button.

<script>
window.addEventListener('submit-form-success-table1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-list6'));
});

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

window.addEventListener('delete-record-success-table1', () => {
    window.dispatchEvent(new CustomEvent('reload-block-list6'));
});
</script>`
2

Can you try this and see if works:

<button id="reloadButton" class="button">Reload</button>

<style>
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
</style>

<script>
document.getElementById('reloadButton').addEventListener('click', function() {
    window.dispatchEvent(new CustomEvent('reload-block-list6'));
});
</script>
3

Hi,

Solution with a top bar button:

  1. Add a top bar button in your table block. Label would be “Refresh”. Choose the action “Scroll to” and don’t put anything in it - Blank.
  2. In the page settings => custom code => footer add this script:
<script>
  window.addEventListener('block-loaded-table1', function () {
    const button = document.querySelector('#table1 .MuiButtonBase-root:nth-child(2)');
    
    if (button) {
      button.addEventListener('click', () => {
        window.dispatchEvent(new CustomEvent('reload-block-table1'));
      });
    }
  });
</script>

Few things to consider:

  1. Everywhere you see #table1 => change it by the right # (ID/name) of your table block

  2. window.addEventListener('block-loaded-table1', function () { is important as several Softr team members pointed that it would make everything more efficient while running a script linked to a block (specifically a reload block event)

  3. This line is to consider carefully:

#table1 .MuiButtonBase-root:nth-child(2)

In my example, I placed the refresh button in the second position in top bar buttons (there is one button before it. That’s why I use :nth-child(2). If the refresh button is the first => #table1 .MuiButtonBase-root:nth-child(1)

Here is the example, live: https://test-play.softr.app/reload-table

4

@acjnas @matthieu_chateau Thank you both, this is huge! My app will be so much cleaner now.

Maybe a “reload block” action button will exist natively someday, but in the meantime this works great.

5

Can this be used to reset the filters on that same block rather than refreshing?

6

Yes … and no :grimacing:. I actually used it for this purpose but the results in terms of UX are not perfect.

Yes it will refresh the filters (so all the records will appear as if there were no filters).

But the filter names will appear as if nothing changed. Which is very tricky for the users to understand that the filters are actually refreshed.

So I don’t recommend to do this. Feel free to try it to check it yourself

7

Ah understood, not ideal for my use case but good to know!

8

In case selector ‘nth-child’ becomes too crowded or stops working, you can target your button by its inner text:

Here we assume that we have a table block named ‘table1’ and a button named ‘↻Refrescar’ that upon click, will refresh table1 block.

<!-- Custom code button to refresh block on click. Targeted by inner text -->
<script>
window.addEventListener('block-loaded-table1', function () {
  const buttons = Array.from(document.querySelectorAll('#table1 .MuiButtonBase-root'));

  const refreshButton = buttons.find(button => button.textContent.includes('↻Refrescar')) || null;

  if (refreshButton) {
    refreshButton.setAttribute('aria-label', 'Refresh');
    refreshButton.addEventListener('click', () => {
      window.dispatchEvent(new CustomEvent('reload-block-table1'));
    });
  }
});
</script>

refresh

9

Works perfectly thanks @acjnas (for coders, you need to replace 3 times the name of your block) :fire: