Category / Section
How to apply the filter in widget embedding?
Published:
Jun 13, 2023
In Bold BI®, you can embed widgets in your application using two techniques: iFrame-based embedding and JavaScript-based embedding. Both methods allow you to embed widgets with filter values.
iFrame-based widget embedding with filtering
- Navigate to the Bold BI® server and render the dashboard containing the widget you want to embed. Click on
Get Embed Code
and copy the iFrame from theEmbed code
dialog box.
- Add the filter parameter with a value to the iFrame element, as shown below, and then add this iFrame element to your embedded application’s view page.
<iframe src='http://localhost:53623/bi/site/site1/dashboards/523d298e-cfed-4746-9d29-eb1cc73b1537/Health%20Care/Sales%20Analysis%20Dashboard?isembed=true&isWidgetMode=true&WidgetId=efbf2999-f7e7-4831-a492-53c4df394af0&Country=USA' id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>
In this example, the filter parameter “Country” has the value “USA”.
- Run the application. After providing login credentials, you can render the filtered embedded widget. To avoid login, you can use iFrame-based SSO embedding.
JavaScript-based widget embedding with filtering
-
In the embedding application, navigate to the
Bold BI®.create()
method and replace theloadDashboard()
method withloadDashboardWidget()
. Pass the widget name or widget ID to embed the specific widget. Ensure that you provide the respective dashboard ID in thedashboardId
property. -
Pass the filter parameter and its value using the API member “filterParameters”.
function renderDashboard() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: "http://localhost:51777/bi/site/site1",
dashboardId: "9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87",
embedContainerId: "dashboard-container",
embedType: BoldBI.EmbedType.Component,
environment: BoldBI.Environment.Enterprise,
mode: BoldBI.Mode.View,
height: "800px",
width: "1200px",
authorizationServer: {
url: "http://example.com/embeddetail/get"
},
filterParameters: "Country=USA"
});
boldbiEmbedInstance.loadDashboardWidget("Sales By Country");
}
In this example, the widget is embedded with the filter parameter “Country” of value “USA”.
Additional References
Didn't find an answer?
Contact Support