Making service calls from Kaizala custom action

In this post, we will explore the performHTTPRequest API that allows us to call API endpoints from Kaizala custom actions. You could use regular AJAX calls if your endpoint supports CORS. In cases where CORS is restricted, this API comes in handy

Setup

For this example, I have created 2 sample API end points that return me test data. One of them is a GET method while the other is a POST method – just to see both types of request in action.

Endpoint 1

This returns a list of categories and looks like this:

GET https://glssampledatafunctionapp.azurewebsites.net/api/Market

Sample response:

[
“fruits”,
“vegetables”,
“groceries”
]

Endpoint 2

This endpoint takes a category in the request body and returns the items and looks like this:

POST https://glssampledatafunctionapp.azurewebsites.net/api/Market

Request Body

{“Category”:”groceries”}

Sample Response:

[
“rice”,
“wheat”,
“oil”
]

API documentation

You can refer to the documentation for the KASClient API, performHTTPRequest demonstrated in this example from KASClient.js file. Below is a screenshot for reference:

Developing the Kaizala action

For the example, I have a simple card that has 2 dropdowns – the first one to select the category and the second one to choose the item. The items dropdown depends on the Category dropdown as it fetches the items corresponding to the selected category.

Whitelist the URL

In order to access a URL from within the Kaizala package, we will need to whitelist the service host in package.json. In this example, the host name would be
https://glssampledatafunctionapp.azurewebsites.net. Below is a snapshot from the sample’s package.json.

Making the API calls

Below are the snippets to make the API call from Kaizala package to the 2 endpoints mentioned above.

GET request sample

The response returned in the callback would be a JSON that would have HttpResponseCode, HttpResponseHeader, HttpResponseBody and looks like this:

Since the response body in our case is a JSON, we will need to run a JSON.Parse() on the response body to get the JSON.

POST request sample

Below is the code snippet for making the POST request. (The response received in the callback would be similar to the one shown in Fig 4.)

Demo

Here is how the card looks in action. Notice the loader as soon as the card loads (when it fetches the categories) and when a category selection is made (when the items in the category are fetched ).

Closing remarks

This was a demonstration of how you could make HTTP requests from a Kaizala custom action. The code for this sample is available here.

If you have any comments / questions, feel free to reach out from the contact page. You can subscribe to receive updates on your email.