Using connectors in your apps

In the competitive environment, responding faster and better, making smart use of data, and adopting efficient processes are of high importance. The lightweight microservices architecture enables incremental delivery of capabilities. These are basically what connectors are designed to do. With multiple services available for reuse you can integrate them with the no-code platform with the necessary customization suited to your needs.
An API connector from Trello can be used to integrate the Trello board into your project plan, Slack can be used to send and receive messages, retrieve the user list, and so on. You can make use of different connectors to enhance the features of your applications. For our no-code platform, you can find a list of connector services that are available under the Connector Tab having database connectors such as MongoDB, Influx DB, MySQL, and more along with API connectors such as Slack, Airtable, Shopify, and more, while connecting a connector.

In this article, we will focus on different ways to use an integrated and configured connector on DronaHQ Studio. There are three different ways through which users can interact with the connectors:

  1. Bind Data to controls
  2. Using in Action Flow
  3. Using in BPM Flow

Prerequisite

You should have a connector integrated into your account. We will be using SLACK API Connector and you should have the basic knowledge to work with API function calls respective to their different endpoints. You can learn about the integration and usage of various connectors in our community portal.

Bind Data to control

We will be using table grid control. Drag and drop the table grid control from the list of controls. Go to its bind data section.

There are various options through which you can bind data to your controls that including using sheets, controls, connectors, and more.

Fetch data through configured Connector

Select Connectors > Slack.
We want to fetch the details of users from slack. So we will use the GetUserList endpoint of the Slack API.

Then you will be asked to bind the connector keys to the control column.

Do a test & finish.
The keys which are bound to the control are only displayed. Keys are often auto-selected but in some cases, you need to select keys and remove the keys which you don’t want to be displayed in the control.
You can view the keys in the data bind section after the connector is integrated to the control, under connectors.

You will be able to see the details getting displayed on the table grid control after a successful call of Slack API and binding of the data/keys to the control.

Using Connector in Action Flow

Action Flow provides you with the capabilities to build your customized actions visually and that is performed on the Client-side to give an immediate response as to the activity completion.
You can access the action flow under the actions section of control after selecting an action from the list.

image

Click to go to the Action Flow interface.

You get two types of actions:

  • On-Screen Actions
  • Server Side Actions

You can read more about action flow here.

Send a message through configured Connector

We want to send messages from our app to slack users. This operation gets very simple using the SendMessage endpoint of the Slack API available in the studio.

Let’s set up an app with a message input and a control with a specified Slack user ID where we will send the message.
You can bind the data through a connector for specifying Slack user ID or can use keywords to make it dynamic or specify it manually for the Slack user IDs

           

Go to the actions of the button and click on it. It will open the action flow window. Add action from the server-side action of the Slack connector in the action flow.

Select the SendMessage endpoint and then bind the keywords associated with dropdown and text control in Select User and Message respectively.

App preview

Click on Send Message and the Slack Bot will send the message to the selected user.

With action flow, you get various functionalities to call different types of endpoints of an API connector or carry out various queries of a database connector.

Using Connector in BPM flow

Let’s now see how to perform connector interaction by API call using BPM flow. We will be sending slack messages using BPM flow. To start with, we first need to fetch the details of Slack users such as their names and Slack ID, and bound them to a dropdown control.

To access the BPM flow, simply go to the left sidebar. There you can see the option of BPM FLOW. Click on it and the sidebar will pop up with all the screens available in your app.
To add a BPM flow, click on “+” and provide a name for your workflow.

Once done you will be able to see the BPM flow(workflow) saved for that particular screen.

Send a message through configured Connector

Open the workflow of the screen whose BPM flow has been created.

Select Slack connector from Select Task or Connector list.

Select SendMessage endpoint.

Select account to authenticate slack.

Now that the user is authenticated, you can configure the connector fields.

Now provide the details as to when to use Connector. You may provide details like When to Execute, Environment to Execute, and add the Variables to use in Response. Click Add Variable and enter the variable name and its respective value which can be derived from the Data option. These variables can be used in other tasks of the BPM flow. Also, enter the self-explanatory Task Name and Task description and click Finish.

Add a BPM Submit button from the control list. Select the just-added BPM flow from the properties of the BPM Submit button.

Now on click of the button, the respective BPM flow to send a message using the Slack Connector will trigger to perform its task.

App preview

Select the User ID and provide a message to be sent.

Click on submit to trigger the BPM flow.