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

12

Is there a way to only send this notification to the user who triggered Make-Scenario?

13

I know this is an old thread, but will this work if the Make.com scenario is triggered from another application outside of Tadabase. Basically, I’m updating a Tadabase record via Make.com from another external application.

14

yes. As long as you’re listening to the ably channel

To answer my own question:

You can define the record ID of the logged in user as ably channel (variable in the JavaScript editor) that way every user has its own channel. You could also use other logged in user fields and send the notification to user groups as well. Works only for currently logged in users tho… you then need to send this information with the trigger to make/n8n and bind that as the channel

15

are the instructions on this post still valid? I have setup my app the same way and I can see the Post from Make showing on Ably byt I cant get the message to pop up. What I really want is for components to refresh but I can work on that if i can get the message to popup.