How to add a Custom Menu Item to the Widget's Option Menu?

This article will explain how to add a custom menu item to a widget’s option menu and configure its functionality using JavaScript embedding. This can be achieved with the help of two events: widgetSettings.beforeWidgetControlMenuOpen and widgetSettings.onWidgetControlMenuClick.

Steps to Add Custom Menu Item

1. In the BoldBI.create() method of the embedded application, add the widgetSettings API member. Initialize the event beforeWidgetControlMenuOpen to add a new menu item through the createNewOption function call. Also, initialize the event onWidgetControlMenuClick to trigger a defined action through the widgetIconClick function call.

function renderDashboard() {        
    this.dashboard = BoldBI.create({            
        serverUrl: rootUrl + "/"+siteIdentifier,            
        dashboardId: dashboardId,            
        embedContainerId: "dashboard",            
        embedType: BoldBI.EmbedType.Component,            
        mode: BoldBI.Mode.View,            
        environment: environment == "enterprise" ? BoldBI.Environment.Enterprise : BoldBI.Environment.Cloud,            
        width: "100%",            
        height: "100%",            
        expirationTime: 100000,            
        authorizationServer: {                
            url: authorizationServerUrl            
        },            
        widgetSettings: {                
            beforeWidgetControlMenuOpen: "createNewOption",                
            onWidgetControlMenuClick:"widgetIconClick",                
        }        
    });        
    this.dashboard.loadDashboard();
};

2. Include code to add a new menu item in a particular widget (mention the name of the widget), under createNewOption function and code to trigger action on click, under widgetIconClick function as shown in the following code snippet.

function createNewOption(arg) {                 
    if(arg.header =="Average Treatment Cost By Age Group"){ //Provide the widget name where you want to add the new option.                    
        var newOption= { id: 'NewItem', text: 'NewItem', parentId: null, sprite: 'su su-group' };                    
        arg.menuItems.push(newOption);                
    }            
}

function widgetIconClick(args) {                    
    //Extract the required value.            
}

The output in the dashboard widget will look like the image below.

Additional References

• JavaScript Embedding
• JavaScript API References
• JavaScript Sample Applications