Get Details From SharePoint List to Kaizala

We have had many asks around how data in SharePoint can be integrated within a Kaizala Action Card. In this post we are going to discuss the same, where data from SharePoint comes in the form of a dropdown in Kaizala Action Card. 

We are going to explore how we can pick up a list of hospital names from a SharePoint list and populate an action card which asks for Emergency Name, Contact, Preferred Hospital Location and Preferred Hospital Name(values of last two will come from SharePoint). Each location selected in the first dropdown corresponds to a list of hospitals which we will populate in the second dropdown. This will be achieved using flow which will expose a HTTP endpoint for us which we can call to get data from SharePoint along with some JavaScript code.

Setting up SharePoint List 

We will first setup a SharePoint List which contains Hospital Names. 

For this you will have to first go to a SharePoint Teams Site and then click on New -> List. Let’s create a List with the name “Hospital List” .

We can then populate the list with contents we want in Kaizala.

 

Here I have three columns in the SharepointList – Title, ID and Location of the hospital. The first dropdown in our card will be related to the preferred location of the hospital. On selecting the location we will populate the second dropdown. For example if you choose Serilingampally in the first dropdown – the list of hospital names in the second dropdown will be Citizens Speciaility Hospital and Nandi Hospital.

Setting up flow to retrieve data from SharePoint 

To retrieve data from this SharePoint List, we will need just three steps in flow. The three steps are as follows – first one being a trigger and the next two actions. 

1. Set up the “When a HTTP request is received” as the “Trigger” of the flow. This will be the first step in flow. 

The URL with which the flow has to be triggered will be setup once Save is clicked. 

2. This step will be the action “Get items”.  

After selecting this, you will have to populate two values – the SharePoint teams site link, and the name of the list. 

3. This will be the response so that we can return back the value we got from Step 2 as HTTP Response. This is the response we will be using in our action card to populate the dropdowns.

FETCHING DETAILS IN KAIZALA CARD USING KASClient API (performHttpRequest)

After we get the url generated from flow, we can perform a HTTP Request call to this flow URL. Documentation of performHTTPRequest is available in the KASClient.js file. Here the method is POST(as per flow trigger) so in the parametersJSON parameter we will be passing method as POST. 

We pick up the response returned in KASClient and populate our dropdown with the “Location” of every row of hospital Information. Based on the Location picked, we populate our second dropdown corresponding to the hospitals present in that location

Below is a sample usage of the API. Here I have also demonstrated how we can fill two dropdowns where one of them depends on the other in JavaScript.

You can find the code for the scenario described above here.