Designing a data filter(JSON Filter) for Adaptive Cards

3 min readApr 9, 2021

Goal

To plug in the right data and create a UI card using the adaptive cards framework which provides a specific information.

Introduction

It is common that API management apps typically featuring API governance and workflow management, involves a lot of data processing. The conventional usecases are to manage endpoints, map APIs and create a API workflow which achieves a specific outcome. Apps with the primary goal of interoperability and high intensive data exchange between different systems require quick data processing to plug in the right data input and get the desired result.

The most common data interchange format for this is JSON(JavaScript Object Notation).

Typical JSON format

{Property: value}

Each API returns a JSON data which has to be processed by the users. The actual data needed has to be filtered by the user for input to query the subsequent API to fetch the desired result.

What are Adaptive Cards ?

Adaptive Cards is a universal Card UI framework released by Microsoft in 2017 which aims to standardize the layouting of Cards independent of the host platform. The goal is to define a Card just once, make it portable and leave it to the different platforms to skin ******it according to its own requirements.

Typical User flow

Scenario

For example: A project manager wants to design a card to view the total issues in a sprint.

In our use case, the user creates endpoints which is basically an API URL (which fetches the project details). The authentication settings need to be configured. Once the configuration is over the user is able to explore the JSON result set which returns the project details.

Now the user needs the sprint details of the project. The project id returned from the API is selected and chosen as input for the susequent call(sprint details). Again the user creates an endpoint for the sprint details and configures the. In this case the input qiery would be the sprint id and voila the user has configured API workflow to fetch the

Then comes the data manipulation where the specific result set of the API needs to be processed. The actual data is filtered from the result sets subsequently and applied to the next level of API to query the exact result needed.