How to Programmatically Set the Active Tab in Tabbed Widgets in an Embedded Bold BI Dashboard

This article explains how to programmatically configure the active tab in Tabbed Widgets within an embedded Bold BI dashboard using the optimized actionComplete event.

Example 1: Set the Same Active Tab for All Tabbed Widgets

Use this method if you want to set a specific tab (e.g., the third tab) for all Tabbed Widgets in the dashboard.

this.dashboard = BoldBI.create({
    serverUrl: "http://localhost:51777/bi/site/site1",
    dashboardId: "e83511c4-7ccf-49b1-9296-79e6daebd31c",
    embedContainerId: "dashboard",
    authorizationServer: {
        url: "http://example.com/embeddetail/get"
    },
    actionComplete: function (args) {
        if (args.eventType === 'renderWidget') {
            var dashboardInstance = bbdesigner$('#dashboard_embeddedbi').data('BoldBIDashboardDesigner');
            var tabbedWidgets = dashboardInstance.widgetHelper.getAllWidgets()
                .filter(widget => widget.type === "TabbedWidget");
            tabbedWidgets.forEach(widget => {
                widget.tabObjSelection(2); // Sets the 3rd tab (index starts at 0)
            });
        }
    }
});

Example 2: Set Specific Tabs for Tabbed Widgets by Name

Use this method when you want to set different active tabs for different named Tabbed Widgets.

this.dashboard = BoldBI.create({
    serverUrl: "http://localhost:51777/bi/site/site1",
    dashboardId: "e83511c4-7ccf-49b1-9296-79e6daebd31c",
    embedContainerId: "dashboard",
    authorizationServer: {
        url: "http://example.com/embeddetail/get"
    },
    actionComplete: function (args) {
        if (args.eventType === 'renderWidget') {
            var dashboardInstance = bbdesigner$('#dashboard_embeddedbi').data('BoldBIDashboardDesigner');
            var allWidgets = dashboardInstance.widgetHelper.getAllWidgets();

            var tabbedWidget1 = allWidgets.find(widget => widget.name === "TabbedWidget1");
            var tabbedWidget2 = allWidgets.find(widget => widget.name === "TabbedWidget2");

            if (tabbedWidget1) tabbedWidget1.tabObjSelection(3); // Sets 4th tab
            if (tabbedWidget2) tabbedWidget2.tabObjSelection(2); // Sets 3rd tab
        }
    }
});

Example 3: Set the Same Active Tab for Multiple Named Widgets

Use this method to target a specific set of widgets by name and apply the same tab index to all of them.

this.dashboard = BoldBI.create({
    serverUrl: "http://localhost:51777/bi/site/site1",
    dashboardId: "e83511c4-7ccf-49b1-9296-79e6daebd31c",
    embedContainerId: "dashboard",
    authorizationServer: {
        url: "http://example.com/embeddetail/get"
    },
    actionComplete: function (args) {
        if (args.eventType === 'renderWidget') {
            var dashboardInstance = bbdesigner$('#dashboard_embeddedbi').data('BoldBIDashboardDesigner');
            var widgetNames = ["TabbedWidget1", "TabbedWidget2"];

            var widgets = dashboardInstance.widgetHelper.getAllWidgets()
                .filter(widget => widgetNames.includes(widget.name));

            widgets.forEach(widget => {
                widget.tabObjSelection(2); // Sets the 3rd tab
            });
        }
    }
});

Notes:

• Widget Name: The widget name is the unique identifier used to reference each Tabbed Widget programmatically. You can find it in the Properties Panel when editing the dashboard.
• Tab Indexing:
  0 = First tab
  1 = Second tab
  2 = Third tab
  …and so, on

How to Get the Unique Name of a Tabbed Widget

1. Open your dashboard in Edit Mode in Bold BI.
2. Select the tabbed widget.
3. In the Properties panel, locate the Unique Name.
4. Use this name in your code when identifying the widget.