Use Javascript to trigger a page or component refresh when an Integromat scenario is completed

App Development
1

Has anyone found a way for Tadabase to “watch” or get notified when a scenario has been completed in Integromat before executing a Javascript page or component refresh?

I want to refresh 2 tables when my Integromat scenario is completed. I can refresh the tables using this solution from @Chem

So this part is solved.

Now for the Integromat scenario completed notification, I tried to use a status field (Integromat scenario “OFF” / “In progress”) which is set to “In progress” by Integromat at the start of the scenario and back to “OFF” when it’s completed. Then displayed the status field in an html or details component.

Using Javascript, I wanted to “read” the status field in its html or details component, them refresh it after 500ms and loop through this until the value changes to “In progress”. Then it would continue to loop until it’s back to “OFF” when page (or other components) would be refreshed.

My problem is that I can’t figure out how to refresh the details or html component that contains the status field. The only component refresh I found is the link above using Javascript to refresh tables by “clicking” their refresh button. Worst case, I’ll experiment by displaying my status field in a table but this means it will have to be a child record so it makes things more complicated.

There must be a way to do this using @Chem 's magic javascript solutions!!?? Any solution would greatly improve the user experience!

Thanks!

1 Like
2

This is possible and not even that complex. I’ll write up a post over the weekend on how todo this.

1 Like
3

Thanks a lot Moe! Looking forward to this, I think it will open a lot of possibilities!

4

Hey @Gaudspeed, this might seem scary at first, but I think it will mostly just work with some copy/paste.

realtime-notification

The cleanest way of doing this is by utilizing Websockets. Not much you need to know here other than you’ll need to sign up for a great service called Ably.com. After signing up, get your API key and save it we’ll need that soon.

Next, add this code to your apps header:

<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
<script>
  const ably = new Ably.Realtime('PUT_YOUT_ABLY_API_KEY_HERE');
</script>

Next, on each page/layout (or even in the header inside a script tag) add this code:

//Subscribe to a channel. "quickstart" can be anything you wish. But make note of it, you'll need it when creating the Integromat Scenario. 
const channel = ably.channels.get('quickstart');

//Here we are listening for a new message to the channel. Specifically messages with the the key of "scenario-completed" - again, this can be anything you wish but will be necessary in the Integromat phase. 
channel.subscribe('scenario-completed', (message) => {
  Swal.fire('Awesome!', 'Data has been updated! Please refresh your page. ', 'success')
});

Finally, in Integromat, add a HTTP module that will send a custom request to the following URL:

https://rest.ably.io/channels/YOUR_CHANNEL_NAME/messages

The method should be POST.
Add a custom Header called “Authorization” and set the value to ‘Basic’ with the base64(YOUR_ABLY_API_KEY).

  • Body type = Raw

  • Content Type = JSON

  • Request Content =

    { "name": "scenario-completed", "data": "example"}

Make sure to update the name in content to whatever you put in your JS of the page.

image
image1920×969 97.8 KB

Here’s a video of this in action:

6 Likes
5

Hey @moe, it works perfectly!

Thanks :pray: :pray: :pray: for the super quick response and taking the time add the upgraded alerts!

2 Likes
6

My pleasure! Glad it worked out.

7

Hey @moe, I have one last question regarding this: How can I add some code to be executed after the “scenario-completed” message is received through the Ably channel confirming Integromat scenario is completed, but before the Sweet Alert?

For example: Let’s say I want to refresh the page using location.reload() and, when completed, show the Sweet Alert pop-up?

Thanks!

8

Once you reload the page you lose the notification.

Why not show a popup with the option to reload? Like so:

Swal.fire({
  title: 'Awesome!',
  text: "Data has been updated!",
  icon: 'success',
  confirmButtonColor: '#3085d6',
  showCancelButton: true,
  cancelButtonColor: '#d33',
  confirmButtonText: 'Reload Page'
    }).then((result) => {
    if (result.isConfirmed) {
     location.reload();
  }
})
2 Likes
9

That works fine, thanks Moe!

It has the advantage of giving the user the option to postpone the refresh in case something was changed while the scenario was being completed.

10

Exactly, this latest code I posted has a cancel button to not refresh.

1 Like
11

Fantastic … thanks just what I needed too