How to apply the filter in widget embedding?

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

1. 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 the Embed code dialog box.
   
   
2. 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”.

3. 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

1. In the embedding application, navigate to the BoldBI.create() method and replace the loadDashboard() method with loadDashboardWidget(). Pass the widget name or widget ID to embed the specific widget. Ensure that you provide the respective dashboard ID in the dashboardId property.

2. 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

• iFrame-based Embedding
• JavaScript-based Embedding
• iFrame-based SSO Embedding
• JavaScript API reference