How to add a custom item to the dashboard header via embedding?

Published:

You can add a custom item to the dashboard header and its functionality using the beforeIconRender and onIconClick events in embedding scenarios.

Follow these steps to add a custom item to the dashboard header:

1. In the JavaScript file, add the code snippet that helps to add an icon for the item and an on-click action for the item.

   function createNewDashboardIcon(args){                    var icon=$("<div/>",{
                        "class":"su su-nav-schedule",
                        "data-tooltip":"NewCustomIcon",
                        "data-name":"schedule",
                        "data-event":true,
                         css:{"font-size":"15px", "padding":"4px 4px", "margin":"14px 8px", "float":"left", 
                         "line-height":"20px"}                      });         args.iconsinformation[0].items.push(icon);   };
   function dashboardIconClick(args){
       // Write a code to perform a required operation when clicking this icon.
   }

2. In the BoldBI.create() method, add the API member dashboardSettings and invoke the method for adding an icon in beforeIconRender and its on-click action in onIconClick.

   var dashboard = BoldBI.create({        dashboardSettings:{            beforeIconRender:"createNewDashboardIcon",            onIconClick:"dashboardIconClick"            
         }   });
   dashboard.loadDashboard();

If you encounter problems where the '$' function is not recognized, it is necessary to include the jQuery script in the HTML view file. You can use any version of the jQuery file for this purpose. For example, I have referenced the latest script file.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Now, you can see the custom item added in the dashboard header.

Custom item added to dashboard header

Related links:

Was this article useful?

Dislike

Written by Soundarya Mani Meharan

Updated

Comments (0)

How to add a custom item to the dashboard header via embedding?

Access denied