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:

Fig 1 – performHTTPRequest API documentation from KASClient.js

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.

Fig 2 – white listing the host name to allow access to the service URLs

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

Fig 3 – Code snippet for a GET request

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

Fig 4 – Sample response received in the performHTTPRequest API callback

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.)

Fig 5 – Code snippet for a sample POST request

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 ).

Fig 6 – Screen recording of the demo in action

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.

12 thoughts on “Making service calls from Kaizala custom action

  1. Hi Gladson,

    For fetching values from online sharepoint, does it require making a service call or by using Microsoft flow can be achieved.

    Thanks in advance.

    Like

      1. Hello Gladson,

        Below is the scenario to understand.

        1. Fetch sharepoint List to the Kaizala custom action card’ dropdown.

        2. There are multiple dropdowns mapping to different columns in the sharepoint list.

        3. The next dropdown values must be filtered depending to the previous value selected from the dropdown.

        4. The response should be exported to the sharepoint list.

        Thanks in advance

        Akash

        Like

    1. You will need to write an intermediate service that will talk to SharePoint and serve you the data. The intermediate service should be guarded by the integration service token. The rest would be similar to the implementation in this post.

      Like

  2. Hi Gladson,
    Can you help me?
    how can add more than one “URL” in Whitelist?
    Can you give a example ?

    Thanks in advance

    Like

  3. Hi Gladson

    I’m attempting to send a PATCH request of Content-Type application/x-www-form-urlencoded. I can successfully reach the endpoint however the data in the requestBody is not being sent to the endpoint. If I change this to a POST request of Content-Type application/x-www-form-urlencoded, the endpoint can be reached and receives the data. Would there be something that inhibits PATCH requests to send data?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s