I created an app that allows users to add (and remove) items from a catalog to their own personal collection.
To accomplish this, I have an action button updating a temporary linked record field, and then an automation gets that linked record and appends it to another linked record where the catalog items in the user’s collection are linked.
After the user clicks the Add button on a record in the list block, I want to reload the list block so that the same record can’t be added twice. I wrote custom code to this, but here’s where I’m running into a problem…
The window.addEventListener('update-record-BlockName', function() {}); is triggered based on Add button successfully updating the first linked record field before the automation. I don’t want to reload the block until after the automation runs and the second linked record field is updated.
I’m currently working around this using a delay, but is there a way to for an Airtable automation that updates a field to also push a webhook or similar to Softr to trigger a block reload for a specific user?
I’ve tested and determined that I need a six second delay after window.addEventListener('update-record-BlockName', function() {}); is triggered before running window.dispatchEvent(new CustomEvent('reload-block-BlockName')); but as my base grows so will how long the automation takes to run, causing the block update to run before the automation is finished.
Hoping there’s a more dynamic solution to reload a block after an Airtable automation run is completed.
For reference, here’s my current custom code that’s utilizing a fixed six second delay.
<script>
document.addEventListener('DOMContentLoaded', function() {
// When User Collection Items to Add to Flight Log Session for Logged In Users with Imperial System block is updated successfully
window.addEventListener('update-record-success-user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-imperial-system', function() {
// Wait
setTimeout(function() {
// Blocks to reload
const blockNames = [
// Collection Items to Add to Flight Log Session for Logged In Users with Imperial System block
'user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-imperial-system',
// Collection Items to Delete from Flight Log Session for Logged In Users with Imperial System block
'user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-imperial-system',
];
// Reload blocks
blockNames.forEach(function(blockName) {
window.dispatchEvent(new CustomEvent('reload-block-' + blockName));
});
}, 6000); // 6-second delay
});
// When User Collection Items to Add to Flight Log Session for Logged In Users with Metric System block is updated successfully
window.addEventListener('update-record-success-user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-metric-system', function() {
// Wait
setTimeout(function() {
// Blocks to reload
const blockNames = [
// Collection Items to Add to Flight Log Session for Logged In Users with Metric System block
'user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-metric-system',
// Collection Items to Delete from Flight Log Session for Logged In Users with Metric System block
'user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-metric-system',
];
// Reload blocks
blockNames.forEach(function(blockName) {
window.dispatchEvent(new CustomEvent('reload-block-' + blockName));
});
}, 6000); // 6-second delay
});
// When User Collection Items to Delete from Flight Log Session for Logged In Users with Imperial System block is updated successfully
window.addEventListener('update-record-success-user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-imperial-system', function() {
// Wait
setTimeout(function() {
// Blocks to reload
const blockNames = [
// Collection Items to Delete from Flight Log Session for Logged In Users with Imperial System block
'user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-imperial-system',
// Collection Items to Add to Flight Log Session for Logged In Users with Imperial System block
'user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-imperial-system',
];
// Reload blocks
blockNames.forEach(function(blockName) {
window.dispatchEvent(new CustomEvent('reload-block-' + blockName));
});
}, 6000); // 6-second delay
});
// When User Collection Items to Delete from Flight Log Session for Logged In Users with Metric System block is updated successfully
window.addEventListener('update-record-success-user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-metric-system', function() {
// Wait
setTimeout(function() {
// Blocks to reload
const blockNames = [
// Reload Collection Items to Delete from Flight Log Session for Logged In Users with Metric System block
'user-collection-items-to-delete-from-flight-log-session-for-logged-in-users-with-metric-system',
// Reload Collection Items to Add to Flight Log Session for Logged In Users with Metric System block
'user-collection-items-to-add-to-flight-log-session-for-logged-in-users-with-metric-system',
];
// Reload blocks
blockNames.forEach(function(blockName) {
window.dispatchEvent(new CustomEvent('reload-block-' + blockName));
});
}, 6000); // 6-second delay
});
});
</script>
Hey, I understand your point, and I am also using the function delay approach.
In my case, one thing I could do, was to place a button to refresh the block in case the automation is not completed by the time the block refresh occurs.
