Search results

How to apply filters for widgets using both initial rendering and on-demand in embedding

In Javascript based embedding, we have added support for applying filters in specific widgets. This page will explain how to apply filters in multiple widgets based on different formats like string and date using the following two ways,

  • Initial rendering
  • On-demand

Steps to follow for applying filters into widgets,

  1. Please download the ASP.NET Core sample for a better understanding of the widget filtering support.

  2. In the Bold BI Server, load the Agent Activity Dashboard from Sample Dashboards.

    LoadSampleDashboard

  3. By default, the Agent Activity Dashboard have one master widget(Date), for demonstration, we need to make the Avg. Resolution Time by Event as a master widget using ActAsMasterWidget property in widget settings. And also enabling MultiSelect property in widget settings for filtering multiple values in a single widget.

  4. In the downloaded application, you can find the EmbedProperties class file in the Models folder. Provide your server details in the EmbedProperties.cs, where you should set the Agent Activity Dashboard path to the DashboardPath property as showcased in the below image.

    AddEmbedProperties

    RootUrl Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi).
    SiteIdentifier For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string.
    Environment For Bold BI application environment. (If Cloud, it should be like `cloud`, if Enterprise, it should be like `enterprise`).
    UserEmail UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list.
    Password Password of the Admin in your Bold BI, which would be used to get the dashboards list.
    DashboardPath Dashboard Path which you want to render in the application.
    EmbedSecret Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page.
  5. After run the application, the specific widgets of the dashboard are filtered by default rendering like below.

    WidgetFilterSample

How the sample works

  1. Before rendering the dashboard, we retrieved the widget collection details of that dashboard using REST API in the GetWidgets() method in this application. Please check this link for more details.

  2. We could get the widget details by conditioning with specific widget names (Avg. Resolution Time by Event and Date) from the widget collections as below.

    function ListWidgets(data) {
    if (typeof (data) != "undefined" && data != null) {
        data.forEach(function (element) {
            if (element.WidgetInfo.DisplayName == "Date") {
                dateWidgetId = element.WidgetInfo.Id;
            }
            if (element.WidgetInfo.DisplayName == "Avg. Resolution Time by Agent") {
                dimensionWidgetId = element.WidgetInfo.Id;
            }
        });
    }
    renderDashboard(dimensionWidgetId, dateWidgetId);
    }
  3. For initial rendering, we could pass the specific widget id in getWidgetInstance() to get the widget instance and respective filterValues in setFilterParameters() to filter the widgets with the filterValues in renderDashboard().

  4. The default string values Agent_1, Agent_5, Agent_7, and default date range of 1/1/2022, 6/30/2022 are filtered in the Avg. Resolution Time by Agent and Date widgets, respectively.

     function renderDashboard(dimensionWidgetId, dateWidgetId) {
         this.dashboard = BoldBI.create({
             serverUrl: rootUrl + "/" + siteIdentifier,
             dashboardPath: dashboardPath, 
             embedContainerId: "dashboard",
             embedType: BoldBI.EmbedType.Component,
             environment: BoldBI.Environment.Enterprise,
             expirationTime: 100000,
             authorizationServer: {
                 url: authorizationServerUrl
             }
         });
         this.dashboard.loadDashboard();
         /*Dimension type widget filter*/
         var dimensionFilterValues = ["Agent_1", "Agent_5", "Agent_7"];//values to be filtered in the dimension type widget.
         this.dashboard.getWidgetInstance(dimensionWidgetId).setFilterParameters(dimensionFilterValues);//filter the values while initial rendering.
         /*Date type widget filter*/
         var dateFilterValues = ["1/1/2022", "6/30/2022"];//date range to be filtered in the date type widget.
         this.dashboard.getWidgetInstance(dateWidgetId).setFilterParameters(dateFilterValues);//filter the values while initial rendering.
     };

    InitialRendering

  5. For the on-demand case, we could pass the specific widget id in getWidgetInstance() to get the widget instance and pass the respective filter values in setFilterParameters() to set the filter values in the widget instance. Then call the updateWidgetFilters() method to reflect the applied filter values into the dashboard using the dashboard instance.

  6. By clicking the Apply Dimension Filters button, the on-demand new filter values Agent_4, Agent_6, and Agent_8 are applied to Avg. Resolution Time by Agent widget. The below ondemandDimensionFilters() method will be triggered for applying dimension filters.

    function ondemandDimensionFilters() {
        var instance = BoldBI.getInstance("dashboard");// "dashboard" -> embed container id.
        var dimensionValue = ["Agent_4", "Agent_6", "Agent_8"]; // values to be filtered in the widget.
        instance.getWidgetInstance(dimensionWidgetId).setFilterParameters(dimensionValue); 
        instance.updateWidgetFilters("dashboard"); 
    }

    DimensionFilterApply

  7. By clicking the Apply Date Filters button, the on-demand new date range of 7/1/2022 and 12/31/2022 are applied to the Date widget. The below ondemandDateFilters() method will be triggered for applying date filters.

     function ondemandDateFilters() {
        var instance = BoldBI.getInstance("dashboard");// "dashboard" -> embed container id.
        var dateValue = ["7/1/2022", "12/31/2022"];// values to be filtered in the widget.
        instance.getWidgetInstance(dateWidgetId).setFilterParameters(dateValue);
        instance.updateWidgetFilters("dashboard");
    }

    DateFilterApply