Knack and Integromat - Waiting for a response

I've written a number of posts here about using Integromat as a 'programming' tool for Knack database applications. My motivation has been to offer Knack users an alternative to writing JQuery / Javascript when logic is required which goes beyond the native capabilities of the Knack builder (it doesn't happen that often).

One of the things I've been wishing for in my own Knack practice is the ability to get Integromat to do something from within Knack - and for Knack to wait for a response from Integromat before continuing.

There are many use-cases for this, but in this article I am going to use an example based on creating client projects from 'Project Types' which include a number of standard Activities assigned to different people. The idea is to ensure consistent processes are used within an organisation.

For this, I have created a Knack app with a basic example of the process.

The Database

As this is a more advanced post, I'm not going to spend a huge amount of time detailing the structure of the database - but we have the following objects which are relevant:

• Companies

• Company Projects

• Activities

• Project Types (templates for projects)

• Project Activities (activities within each template)

• Accounts (our users)

Let's look at a screen detailing one or our Project Types:

In the screenshot, we can see that our project 'Onboard New Client' currently has four steps and each of these is configured to be assigned to a specific person.

So, the other 'side' of this is that we want to be able to create client project based upon these template project types - and have our solution create and assign the relevant tasks.

Now I've written before about the basics of using Integromat for this - but it this case I'm going to describe how we can call Integromat in a different way (using a Webhook) and have Knack wait for the response and display a message before continuing.

Creating the Webhook in Integromat

The first step in this process is to create a Webhook in Integromat. A Webhooks is simply a web address (URL) which is set up to wait to be called by some process on the internet and which can receive information. This is how to set one up in Integromat:

It's simply a matter of adding a Webhooks module to a new Scenario, clicking add, giving it a meaningful name and then copying its address to the clipboard.

Calling the Webhook from Knack

If you're an experienced Knack user, you'll be aware that there's no way to configure Knack to 'call' a Webhook - especially not if we want it to wait for the response. So we need to find a way to do that - and for this we need a few lines of Javascript (people may be aware of my views of using Javascript with Knack but in this case a relatively simple few lines opens a realm of possibilities).

Before you create your code, you should find out the ID of the Knack 'View' which is going to trigger the Webhook and also, if you want to update a table view onscreen to display the record after creation, the ID of that View as well. If we consider the Company Details page above, the view which will call the Webhooks is displayed when the 'Add Company Project' is clicked and one the record is complete, we want the Company Projects table to be updated (including the number of Activities in the project).

In Builder, here is the Add Company Project View:

and I have the Submit Rules set to Show a Confirmation Message and a suitable 'waiting' type message displayed:

I also have the page set up as a Modal Popup (I find these work really well for adding and editing data):

So, when I click Add New Project I get the following (filled in to show meaning):

Followed by this when I click the Submit button:

Now, what I want to happen next is for Integromat to run and create all the activities for the project and then report back to the user that the process is complete...

If you recall from above, from the Builder, we need to find out what the View IDs are for the Add Company Project view and the Company Project table (also a view). To get this information, you just go to edit the view and look in the Browser's URL where you can find the ID:

https://builder.knack.com/kasoftware/test#pages/scene_188/views/view_288

In this case the ID of the Add Company project is view_288 (and the table is view_277).

Now all we need to do is add the following code to our app in the API and Code area (Javascript tab):

$(document).on('knack-form-submit.view_288', function(event, view, data) {

setTimeout(function(){

Knack.showSpinner();

}, 2000);

commandURL = "add webhook url here?recordid=" + data.id ;

$.get(commandURL, function(data, status){

Knack.hideSpinner();

Knack.views["view_277"].model.fetch();

$(".kn-message.success").html("<b>" + data + "</b>");

});

});

This may look complicated to you - but the great thing is that is can be used more or less as-is - you just need to add in the Webhook address from Integromat and replace the two view ids!

What this code does is:

1. wait for the view (288) to be submitted

2. wait 2 seconds (this allows Knack time to store the record)

3. turn on the 'spinner' which stops any access to the screen

4. calls the Webhook (defined in Integromat)

5. waits for a response

6. hides the spinner

7. updates the Company Project Table

8. and finally, updates the message (.kn-message-success) area on the screen with a message back from Integromat (we'll see how to do this in a minute)

Back to Integromat

One of the (slightly annoying) things about building an Integromat scenario triggered by a Webhook is that you can't continue with the second step until you have run just the Webhook module (click Run Once with just the Webhook set up) and then trigger the webhook from Knack (live app). This is so that the webhook module can take a look at the information coming along with the webhook. In this case, I am just sending the ID of the record that was just saved by the submit process (data.id).

Once this is done we can configure our Integromat Scenario to do whatever we want, generally starting by getting the whole of the record whose ID we just sent it:

This makes sure that we have all the information from the record in Integromat (for those experienced with Webhooks, I do it this way to keep the javascript as simple as possible).

In our particular example, the next step is to find all the Activities for the particular Project Type:

Now, this step may return lots of records (with this example date 4) and the clever thing about Integromat is that it will process all subsequent steps for each of those 4 records. The next step in this case is to create the Activity for the Company Project:

So, once this is done, we'll have four records in the project assigned to the appropriate people.

There is one final step in this process which is to send a message back to Knack (remember it's waiting for a response) and this is done with a Webhook response module:

You simply put the response message in the Body section (I recommend leaving the Status as 200). Notice that you can send data in the response (in this case the number of activities created).

This isn't quite the end of the story though - we ideally want the message back to the user (via Knack) to only be sent once all the activities are created - and with the Webhook module simply following after the end of the create record step, it will actually be sent after the first record is created. Fortunately there is a way to deal with this with a filter before the Webhooks response:

This tells Integromat to only continue when the last record has been created.

What the User Sees Following Successful processing

Message shown when complete:

and closing the message shows the project set up in the table:

and clicking on the View option shows the detail:

Summary

So, we've seen how we can execute a process in Integromat and have Knack wait for a response, displaying that response to a user when the process is complete. There are a large number of use cases for this which could include things such as:

• Getting Integromat to create a barcode or QR code based on entered data and displaying it back to the user in the message area
  

• If you're storing images, you may choose to resize them to keep storage costs under control - and even pass information to the user that they have uploaded too many images (based on some limit):
  

There are many other possible use cases - and I may look at posting about others in the future.

I hope you've found this article useful - here are some links which may also be helpful:

You can find out more information about Integromat here

and Knack here.