How the interactions can be made between the Bold BI and external application?
In Bold BI, you can control the overall interaction between the dashboard widgets using the events. You can manipulate the dashboard widget elements on the client-side and can control their behavior also. Consider the following embedding sample, the Chart, and Cards controls are Bold BI widget controls and the other controls are JS controls.
The above dashboard is available in this link.
JS controls data are loaded from the same database, which we used for the Bold BI widgets controls.
Sample Working details:
- When we choose any value from the JS filter control except the Work Order number filter, Bold BI Card widgets data will be changed accordingly.
- When we choose any value from the
Work Order Number filter and click the
Work Order Number column data from the Grid JS control, the Bold BI chart widget data will be changed accordingly.
- When we choose the value from the
Organization and Work Order Number filters value, the Grid JS control data will be changed accordingly.
- If we change the organization value, the values of Work Order Number, Crew, and Zone will be changed automatically with the current range. The values will be changed according to this hierarchical order -
Organization -> Work Order Number -> Crew -> Zone.
- We show the applied filter values as a Breadcrumb like in the following image.
- Using this Breadcrumb, we can remove the child level of hierarchy filter.
- We can also show the filter overview options like in the following image. Using this, we can remove the particular filter value data.
- If we click any column from the Bold BI chart widget, it will navigate to the new page to render the Grid JS control with the clicked column value. In this case, we are able to pass the context values from the Bold BI widgets to external applications. And also, we can filter the data based on the applied filters and can show the filters data as follows,
Also, you can refer to the this Sample Browser to know more about the linking events to get the context values to pass to the external application.
- If we click the
Organization data column in the grid, it will navigate to the home page with the existing and newly applied filter, and the home page sample data will render based on all filters.
- If we click the
Home or any value from the second-page breadcrumb, the filter values are removed in the home page based on the clicked context value.