How to handle client-side filtering with parameters in a dashboard?

Client-side filtering can be achieved using the filterParameters API in various scenarios. These include filtering with URL Parameter only, Dashboard Parameter only, both URL Parameter and Dashboard Parameter, and URL Parameter from different data sources.

Filtering with URL Parameter Only

1. Identify the column name you wish to filter from the data source edit page. For instance, if you want to filter by the values of the ProductName column.

   

In the above image, the ProductName is the column whose values need to be filtered by Alice Mutton.

2. In the BoldBI.create() method of an embedded application, handle the filterParameters API as shown below:

var dashboard = BoldBI.create({                            
    filterParameters: "ProductName=Alice Mutton"                           
});                          
dashboard.loadDashboard();

3. This API can also handle multi-valued parameters whose values can be separated by a comma as shown below:

var dashboard=BoldBI.create({
    filterParameters: "ProductName=Alice Mutton,Tofu"                                                  
});                           
dashboard.loadDashboard();

Filtering with Dashboard Parameter Only

1. Create a dashboard parameter. For example, a parameter has been created with CountryName and the value USA.

   

2. Assign the parameter to the column named Country in the code view window and save the data source.

   

3. In the BoldBI.create() method of an embedded application, add the filterParameters API as follows:

var dashboard = BoldBI.create({
    filterParameters: "CountryName =Germany"                              
});                           
dashboard.loadDashboard();

Filtering with Both URL Parameter and Dashboard Parameter

You can apply filtering by passing URL parameters and Dashboard parameters together. More than one parameter is separated by ‘&&’.

var dashboard = BoldBI.create({                              
    filterParameters: "CountryName =Germany&ProductName=Alice Mutton,Tofu"                
});                
dashboard.loadDashboard();

Filtering with Columns from Two Different Data Sources

If your dashboard is configured with more than one data source and you need to filter by a column that exists in multiple data sources, add the name of the data source as a prefix to the column name and separate by dot ‘.’.

For example, in the dashboard shown above, the widget Total Metals by Country is configured with the data source Olympics 2012 Dashboard_OlympicsDS new and the widget Medal details by Country is configured with the data source Olympics 2012 Dashboard_MedalsPerCapital.

In the BoldBI.create() method of your embedded application, add the filterParameters API like below:

var dashboard= BoldBI.create({                                                            
    filterParameters: "Olympics 2012 Dashboard_MedalsPerCapital.Country=China"                                                       
});                                                     
dashboard.loadDashboard();

On running the application, you can find the filter is applied only to those widgets associated with the data source referred in filter parameter.

Similarly, when you apply filter by column of the other data source instead as shown in the below code snippet, the filter gets applied just to the map widget to which the corresponding data source is connected.

var dashboard = BoldBI.create({                                                             
    filterParameters: "Olympics 2012 Dashboard_OlympicsDS new.Country=China"                                                       
});                                                    
dashboard.loadDashboard();

References

• JavaScript API Reference
• Configuring dashboard parameter in Bold BI application