Transform response in connectors

Now that you are aware of how we can get data using the different connectors, you might have had scenarios where your response from the server might be invalid or erroneous. What it means is that the data is not incorrect but the format response does not match the format needed for controls like the table grid controls. For example, there could be rows that contain a blank column. In that case, you would probably like to replace it with a default value. For this, you can make use of a Javascript Code that Transforms the Response and displays it accordingly in the tablegrid or other controls. To view the data that is sent by the server on your connector configuration click View raw response. Here in this example, you have the employee information in raw form as fetched using the connector.

Under the Connector configuration, you can find the Transform Response where you can add your Javascript Code. Here you can add the script that you would run on the data that is received from the Server.

Edit Raw Response

It is important to note the Edit Raw Response action available under the Raw Response. It is sample data for the respective connector.

Here you can add your own dynamic data and test your script to make changes to the actual data during runtime.

Based on the data received you may then use your own Javascript code to transform the response that would eventually be displayed accordingly in the tablegrid control. Now let us add a Javascript code to transform this response and add a new key Attendance which would have the Value as “Present”.

data.forEach(function(e) {
     if(!(e.hasOwnProperty("attendance"))){
       e["attendance"] = "Present";
      }}
      );

Add the code and click Save and Validate. Now if you click View Transformed Response, you would be able to see the changes in the data are reflected as per your script. You can see that the “attendance” key has been added to all employee records with value as “present”.

Now for the same data, you may want to find the employee id = 1 and mark the same as Absent. So you would use the Javascript code as seen here to get the desired transformed response.

data.forEach(function(e) {
if(!(e.id == 1)){
    e["attendance"] = "Absent";
}}

)

The script could be anything that you deem necessary, like adding a default value in place of an empty column for the fetched rows, adding replacing a certain value in the given column with a specific value and so on.

Adding dynamic values

You can also create a dynamic variable to be passed as a parameter to the transform function. You can pass the values of variables, controls, and other keywords to the transform function.

The main advantage of using a dynamic variable is that for data sources like connectors where you have a few limitations on filters and providing dynamic values, you can make use of the connector data and get the desired data from that raw response using a Javascript code that passes your dynamic variable.

Let us consider the same scenario above to mark the attendance based on the selection done from the dropdown. You would need to simply add the parameter to the function as seen in the example below to update the users as per selection.

You could have another scenario where you are using a Slack Connector to fetch the user id of a Slack User whose name is provided as the input from a form, then you need to pass the variable to the Javascript code/function as a parameter and fetch the data by returning the value from the function.

So now whenever you run your form you can see the response from the connectors is reflected as per the transformation applied to the Response.

You can also refer to this video here to understand how to Transform your API responses using Javascript. It opens up many possibilities to present your data for a better user experience.