Auto refresh list blocks when list details blocks are updated

Feature Requests
, ,
42

Hi,

In your description you mention a table block and only one kanban? I am not sure what you want to perform.

With this script here is what’s happening => you reload two kanban blocks when the list-details1 is updated.

Also you need to add:
window.addEventListener('block-loaded-list-details1', () => {

So that the script should be =>

<script>
window.addEventListener('block-loaded-list-details1', () => {
    window.addEventListener('update-record-success-list-details1', () => {
        window.dispatchEvent(new CustomEvent('reload-block-kanban2'));
        window.dispatchEvent(new CustomEvent('reload-block-kanban3'));
    });
});
</script>

To be sure everything happens in time in your database, you can also add a delay before the reload occurs =>

<script>
window.addEventListener('block-loaded-list-details1', () => {
    window.addEventListener('update-record-success-list-details1', () => {
        setTimeout(() => {
            window.dispatchEvent(new CustomEvent('reload-block-kanban2'));
            window.dispatchEvent(new CustomEvent('reload-block-kanban3'));
        }, 2000); 
    });
});
</script>
2 Likes
43

@matthieu_chateau perhaps you could help me. I’ve got a bit of a similar issue.

I use Airtable to host images.
Images are added there automatically via API.
Each record has title, image attachment, created time.
I have a list in Softr which shows the images as large objects and the titles below each image.

What I need to achieve is that the front end of the list page on Softr has to show new images added to Airtable immediately without the need of manual refresh.

Would some of the custom code presented in this thread work with some tweaking?

44

Hello! This working for me, and I’m lost as to why. Here is the code I have.

In a custom code block I have this:

<div class="subtotal-container">
  <span>Total:</span>
  <span class="subtotal_value">$0.00</span>
</div>



<style>
.subtotal-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align to the right */
  padding: 10px;
  border: 0px solid #ccc;
  border-radius: 5px;
  background-color: #ffffff;
}

.subtotal-container span {
  font-weight: semi-bold;
  font: alegreya sans;
  margin-right: 20px;
}

.subtotal-container span {
  background-color: #ffffff;
  color: #000;
  border: none;
  border-radius: 0px;
  padding: 5px 10px;
  
}

</style>



<script>
    
    // convert price number to string
    function commafy( num ) {
        var str = num.toString().split('.');
        if (str[0].length >= 5) {
            str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
        }
        if (str[1] && str[1].length >= 5) {
            str[1] = str[1].replace(/(\d{3})/g, '$1');
        }
        return str.join('.');
    }

    window.addEventListener('get-records-cart', (data)=>{
        let totalPrice = 0;
        
        if(data.detail){
            data.detail.forEach(item=>{
                let priceString = item.fields["Client Total"];
                let priceInt = parseFloat(priceString.substring(1).split(",").join(""));
                totalPrice += priceInt
            })
        }
        
        let totalString = commafy(totalPrice);
        
        document.querySelector(".subtotal_value").innerText = "$" + totalString;
    })
    
    </script>

And in the page header I have this:

<script>
window.addEventListener('block-loaded-cart', () => {
    window.addEventListener('update-record-success-cart', () => {
        window.dispatchEvent(new CustomEvent('reload-block-total'));
    });
});

</script>

It isn’t updating the code from the custom block. Only when I refresh it.

45

Hi,
window.dispatchEvent(new CustomEvent('reload-block-total'));

=>If “total” is your custom code block ID, it won’t work as CustomEvent('reload-block-BlockID')); is purely made for dynamic blocks like list, list-details, calendar, kanban or table.

You will nedd to go to this thread to get help: Need to add up the values in a column in your table block and display the Sum at the bottom? Here is how

What could work though is to reload the page automatically:

<script>
window.addEventListener('block-loaded-cart', () => {
    window.addEventListener('update-record-success-cart', () => {
        setTimeout(() => {
            window.location.reload();
        }, 500);
    });
});
</script>
46

Hi @matthieu_chateau - just to clarify it is not possible to update a table in real time when a field is updated in airtable?

My use case is to show the user a % completeness (or progress) using a formula field based on the status of other fields which are updated with automations.

47

Hi,
It’s not strictly speaking possible.
The refresh of a page or of a block needs to be triggered: an action button pressed by the user.

This is the purpose of these scripts = when an action is performed in one block it can refresh another block (or other blocks) in the same page.

48

Hello Matthieu,

Is this working for the new listing block?
I have category-detail-desktop (listing detail block) and category-suggest-desktop (listing block)

The idea is when I update the category in the “category-detail-desktop”, the “category-suggest-desktop” should auto reload.

I tried the code in various place (app level, page level, and in custom code block right below the 2 blocks) but doesn’t seem to work.

Let me know if I’m doing something wrong. Thanks.

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

Hi Kiem,

Currently not on my computer but please try:

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

Reload-blockId (for new blocks) instead of Reload-block-blockId (for old blocks)

50

Hi @matthieu_chateau

I am using the code for refreshing table block.
I would like to know if can make the refresh appear non visible. I.e. Each time I add a record into the Table block I want it to appear straight away, however in the table block this reloads each time (spasms) unlike the list block which you can’t tell it’s refreshing.

Thoughts?

51

Hi George,
No this is not possible.

Though a new table block should be released in one or two months. This behaviour might disappear (no guarantee).

52

Hey folks, new table block is pretty close and it will have better experience

2 Likes