On Form Submission - API Integration

In the competitive environment, responding faster and better, making smart use of data, and adopting efficient processes is of high importance. The lightweight microservices architecture enables incremental delivery of capabilities. These are basically what APIs are designed to do. With multiple services available for reuse you can integrate them with the no-code platform with necessary customization suited to your needs.

Let us first have a look at this video to understand how to use the different API services.

For example, an API from Trello can be used to integrate the Trello board to your project plan, Slack can be used to send and receive messages, retrieve the user list, and so on. You can make use of the different APIs to enhance the features in your applications. For our no-code platform, you can find a list of API services that are available under the API Tab. In case the API you want to use is not present you also add your own API service using Add category option.

Let us now take an example to make use of Slack APIs to send messages to the users. There are two ways in which we can send the message either from Form itself or by configuring it using a workflow.

Configuring API using form controls

Let us add a text control and a dropdown control and action button to the form. The text control will be used to send Slack message, Dropdown as a list of Slack User, and Action Button to send Slack Message .

Now you need to add the API from the list. Go to Connector and click Add . Select the Category as Slack and Sub Category as GetUserList and add a name for it e.g getusrlist in the illustration here. Under Configure Request parameters, select the account which you want to connect using Select Account. You can see the sample API response at the bottom. Save the configuration.

For the dropdown, you can add a formula which will fetch the data from the API. Add a Formula using Data options and use the formula BindAPI() . So the formula will have to be BINDAPI([getusrlist.members.name, getusrlist.members.id]). In this case, the name is the user-friendly name and the id is the slack id of the user. You can change the Header Labels to a user-friendly label. Now Save and Validate. The Slack message should be sent to the user selected from the dropdown.

Though we would select the name from the list the API should get the SlackID which would then be actually used to send a message. So under the Properties for the dropdown control, enter the Default Column Number as 2 which in this case which is the ID.

Now we also want to send a Slack message to the selected user. For this, we would need another API which is the SendMessage API.

To use the API, select Category again as Slack and Sub-category as SendMessage and add a Name . Select the account it is to be linked to. The SendMessage API has two properties: Channel and Text . The Channel is the dropdown name which is the username in our example and the Text is the slack message that we will enter using the text control. In the example, the dropdown control is named as selectslackuser and text control as slackmessage. So we have assigned the values to the two properties accordingly. The sample response is also displayed. Click to Save once done.

Now we only need to bind this API with the action. We would thus provide a formula to the Action button using Action to bind component events. So click Actions> Button_click > Step 1 > Actions.

Now to call the API from the action button we have a CALLAPI() . We would provide the name of the SendMessage API that we created earlier as CALLAPI(“SendSlackMessagenow”) and then Save it.

Now if you take a preview of the form, add a message, select the user, and click the Action button “Send Slack Message”, the message is delivered to the user.

Configuring API using Workflow

Now we have seen how the API can be called from the Form, we can also configure it using a Workflow.

For the same form that we used above, let us add a Submit button to which you would link the API Workflow that we create. Now add a task for the Slack service. Under the Third-Party service select the Slack service and click Continue.

From the list of services select SendMessage service and Continue.

Now Connect the account from the list.

If your account is not on the list then Add Account, configure it, and grant permissions.

Now for the SendMessage service, you need to configure two fields;

  • Select user : Add the dropdown control’s name i.e. selectslackuser .
  • Message : Add the text control’s name i.e slackmessage

Add the control names and Continue . Add the Taskname and Finish .

Now when you take a preview the linked workflow is triggered when you click the Submit button and the message is delivered to the selected user.

Configuring API using Data option

There is another way of binding the API to your forms. You have seen various options including Static Data and Sheets to fetch data from sheets. Now if you are using an API, then you can select the respective keys to fetch data from the respective API.

Under Data option select API. Select the API name from the list and Select keys and click Save.

In the example taken here, the Message key is the message that would be posted to the selected user in the API. Note that in the Custom Formula generated it is the BINDAPI formula that is used with the necessary input parameter or keys.

You can thus add any of the available services using the APIs with their features adapted to suit your requirement.