Articles in this section
Category / Section

How to update filters in an embedded dashboard dynamically from external application?

Published:

In this article, we will discuss how to update filters in an embedded dashboard dynamically from an external application using the updateFilters method. This can be done in several scenarios:

  1. Filtering with URL Parameter only
  2. Filtering with Dashboard Parameter only
  3. Filtering with both URL Parameter and Dashboard Parameter
  4. Filtering with URL parameter from different data sources

Filtering with URL Parameter Only

To filter with a URL parameter only, follow these steps:

  1. Obtain the appropriate column name that you wish to filter from the edit page of the data source.

    image.png

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

  1. Create a button in the view page with an on-click function in your external application. For example:
<button onclick="updateFilterValues()">updateFilterValues</button>
  1. Invoke the updateFilters method to perform filtering. For example:
function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("ProductName=Alice Mutton");
}
  1. Multi-valued parameters can be passed as an argument to the updateFilters method. For example:
function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("ProductName=Alice Mutton, Tofu");
}

Filtering with Dashboard Parameter Only

To filter with a Dashboard Parameter only, follow these steps:

  1. Create a dashboard parameter by referring to the following screenshot. Here, a parameter has been created with CountryName and the value USA.

    image.png

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

image.png

  1. Once the Dashboard Parameter has been created, perform the filtering. For example:
function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("CountryName=Germany");
}

Filtering with Both URL Parameter and Dashboard Parameter

URL parameters and Dashboard parameters can be passed together as an argument to the updateFilters method. Parameters are separated by ‘&&’. For example:

function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("ProductName=Alice Mutton&&CountryName=Germany");
}

Filtering with Columns from Two Different Data Sources

If a 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 it by a dot ‘.’.

image.png

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 embedded application, filtering can be performed with the updateFilters method like below.

function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("Olympics 2012 Dashboard_MedalsPerCapital.Country=China");
}

image.png

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

Similarly, when you apply a filter by the column of the other data source, the filter gets applied just to the map widget to which the corresponding data source is connected.

function updateFilterValues() {
    var instance = BoldBI.getInstance("dashboard");
    instance.updateFilters("Olympics 2012 Dashboard_OlympicsDS new.Country=China");
}

image.png

Additional References

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
SM
Written by Soundarya Mani Meharan
Updated:
Comments (0)
Please  to leave a comment
Access denied
Access denied