How to Apply Data Filtering in External APIs Using Dashboard Parameters as Header Values in iframe Embedding

In this article, we’ll explore how to apply data filtering from an external API by passing a dashboard parameter as a header value. We will use an ASP.NET Core sample to demonstrate the process, creating a custom API and configuring it within a Bold BI data source.

Creating a Custom API in ASP.NET Core

First, let’s create a custom API in the controller section of our ASP.NET Core application. Here’s a code snippet demonstrating the creation of the “GetJsonData” API endpoint and the use of the “x-api-key” header to filter data based on the department for Employees.

[HttpGet]
   [Route("GetJsonData")]
   public IActionResult GetJsonData()
   {
       string department = Request.Headers["x-api-key"];

       var mockData = new List<Employee>
       {
             new Employee { name = "Delta", Empid = 02, Department = "Sales", Designation = "Team Lead"},
             new Employee{ name = "Brad", Empid = 03, Department = "HR",Designation = "Manager" },
             new Employee{ name = "Harry", Empid = 04, Department = "Marketing", Designation = "Analyst"  },
             new Employee{ name = "Atos", Empid = 05, Department = "HR",Designation = "Team Lead" },
             new Employee{ name = "Jane", Empid = 06, Department = "Marketing",Designation = "Team Lead" },
             new Employee{ name = "Rachel", Empid = 07, Department = "Operations",Designation = "Manager" },
             new Employee{ name = "Tom", Empid = 08, Department = "Marketing",Designation = "Senior Analyst" },
             new Employee{ name = "Dory", Empid = 09, Department = "Marketing",Designation = "Junior Analyst" },
             new Employee{ name = "Destiny", Empid = 10, Department = "Marketing",Designation = "Manager" },
             new Employee{ name = "Smith", Empid = 11, Department = "Sales",Designation = "Analyst" },
             new Employee{ name = "Philips", Empid = 12, Department = "Sales",Designation = "Analyst" },
             new Employee{ name = "Kate", Empid = 13, Department = "Sales",Designation = "Senior Analyst" },
             new Employee{ name = "Ferick", Empid = 14, Department = "Operations",Designation = "Executive" },
             new Employee{ name = "Ferb", Empid = 15, Department = "Operations",Designation = "Executive" },
             new Employee{ name = "Jill", Empid = 16, Department = "Operations",Designation = "Executive" },
             new Employee{ name = "Jack", Empid = 17, Department = "HR",Designation = "Executive" },
             new Employee{ name = "Nemo", Empid = 18, Department = "HR",Designation = "Executive" },
             new Employee{ name = "Dory", Empid = 19, Department = "Sales",Designation = "Analyst" }

       };

       if (!string.IsNullOrEmpty(department))
       {
           // Perform filtering based on the department
           mockData = mockData.FindAll(item => item.Department == department);
       }

       // Return JSON data
       return new JsonResult(mockData);
   } 

In this example, we filter the mock data based on the department value and return the filtered data as JSON.

Configuring the Custom API in Bold BI

Next, we configure the custom API in web data source in Bold BI.

1. Connect to the Web Data Source:

• Use the live site URL where the API hosted.
• Choose the live mode connection.
• Provide the return type of the Data where the API returns in data format.
  
  

2. Configure Dashboard Parameters:

• Set up a dashboard parameter and pass a value, such as “HR”.

3. Pass the Parameter as a Header:

• Map the dashboard parameter to the header value in the API request. Use @{{:Employee details.Param}} for the “x-api-key” header.
  
  

This configuration ensures that the dashboard displays only records from the HR department when the parameter value is set to “HR”.

Note: To display an empty dashboard initially, pass a null value in the dashboard parameter.

Embedding the Dashboard with Filtered Data

To embed the dashboard in an application and ensure data is filtered by the dashboard parameter:

1. Get the Embed Code:

• Copy the HTML embed code for the dashboard.

2. Embed the Dashboard:

• Paste the embed code into your Index.cshtml file.

Code snippet of Index.cshtml:

@{
   ViewBag.Title = "Home";
   Layout = null;
}

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="~/css/site.css" />
</head>

<body>
<iframe src='http://localhost:62300/bi/site/site1/dashboards/71d8f6f2-cec9-4ecc-b028-2bc644a0f6e5/Sales/Employee%20dashboard?isembed=true&Param=Marketing&hide_tool=dp' 
       id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>
</body>

</html> 

When you run the application, the embedded dashboard will filter data based on the dashboard parameter ‘Param=Marketing’ .

Note: By applying the ‘hide_tool=dp’ property, we can hide the dashboard parameter filter in the embedded dashboard.

Embed Sample

I have attached a embed sample for data filter from external API by passing dashboard parameter as header value.

Conclusion

By following the steps outlined in this guide, you can effectively implement data filtering in both Bold BI dashboards and embedding.