How to Apply Multiple Filters on Button Click in Bold BI Dashboards
In Bold BI dashboards, you can use a Combo Box widget configured for multi-selection together with a Button widget to apply multiple filter values to one or more dashboard widgets using a single button click.
In some cases, users may observe that:
- The filter functionality works as expected in the Dashboard Designer
- But the Combo Box (multi-filter) widget or its applied filters are not visible or do not work after embedding
This article explains how to correctly configure the Combo Box and Button widgets and ensure they function properly in embedded dashboards.
Use case
- Use this approach when:
- You want to apply multiple filters using a single button click.
- You want filters to be applied only after the user clicks a button.
- You want the same filtering behavior in both Designer preview and embedded dashboards.
- You want to control when dashboard widgets refresh after filter selections are made.
Solution
Step 1: Open the dashboard in the Designer
- Log in to the Bold BI application.
- Edit an existing dashboard or Create a new dashboard.
- Ensure at least one data widget (chart, grid, KPI, etc.) is added to the dashboard.
Step 2: Add and Configure a Combo Box Widget for Multiple Selections
- Drag and drop a Combo Box widget onto the dashboard canvas.
- Select the required data source and Assign Data.
- Choose the column whose values will be used for filtering.
- Navigate to the Properties Panel and choose Enable MultiSelect if users should be able to choose more than one value.
- Under the Filter section in the Properties pane, enable Act As Master Widget.
- This allows the Combo Box widget to act as a filter control that can pass multiple selected values to target widgets.
Step 3: Configure the Combo Box Widget as a Dashboard Filter
- Select the Combo Box widget.
- Click the Filter icon from the dashboard toolbar to access the Filter Configuration dialog.
- In the Filter Configuration dialog, select the required target widgets under Listener Widgets.
- Click Update to save the configuration.
Note:
This establishes the relationship between the Combo Box widget and the dashboard widgets that will receive the selected filter values.
Step 4: Add a Button widget
- Drag and drop a Button widget from the Toolbox.
- Set the button label (for example: Apply Filters).
- Adjust styling if required.
Step 5: Configure the button to apply filters
- Select the Button widget.
- Open the Properties panel.
- Under the Action section, choose:
- Apply All Slicers to apply the selected slicer values when the button is clicked.
- Or Clear All Slicers to reset all slicer selections.
- In a scenario where the required type is set to URL Filtering.
- Enable Include Master Widget Filters.
- Under Choose Master Widgets, select the Combo Box widget configured as a master filter widget (for example, Region).
Step 6: Designer Validation
- Click Preview or Publish in the Designer.
- Select one or more values in the Combo Box widget.
- Click Apply Filters.
- Confirm that all assigned widgets refresh and display data matching the selected values.
- Test both single-value and multiple-value selections to verify expected behavior
Step 7: Embed the Dashboard and Validate the Combo Box + Button Filtering
Note: This article uses an ASP.NET Core application to demonstrate and validate the embedded dashboard behavior. The same functionality can be validated using any supported embedding implementation.
- Build and run the embedding application.
- Navigate to the page containing the embedded dashboard.
- Wait for the dashboard to load completely.
Expected Result: - The embedded dashboard is displayed successfully and contains the Combo Box, Button, and target widgets, matching the published dashboard view.
- To verify Combo Box Selection before Applying Filters:
- Select one or more values from the Combo Box widget.
- Do not click the Button widget yet.
- Observe the target widgets configured as listeners.
Expected Result:
- The selected values are retained in the Combo Box widget, while the target widgets continue to display their current data. No filtering action is applied until the configured Button action is executed.
- After selecting one or more values in the Combo Box widget, click the Button widget configured with the Apply All Slicers action.
- Wait for the dashboard widgets to refresh.
Expected Result: - The selected Combo Box values are applied to the configured listener widgets, and the displayed data updates to show only the records matching the selected filter criteria.
Conclusion
By configuring a Multi-Filter widget and a Button widget with the Apply Filters action, you can apply multiple filters with a single user action and maintain consistent filtering behavior in both Designer preview and embedded dashboards.
Related Articles
