Add Clickable elements To Dashboard Headers

February 24, 2024
time
min read

How to add a button to the dashboard toolbar:

Follow the steps below to incorporate a button into the toolbar of a Sisense dashboard.

  1. Open the dashboard to which you want to add a button to the toolbar.
  2. Access the dashboard menu by clicking on the three dots located at the top-right corner of the dashboard and choose 'Edit Script.' This action will open the script editor for the dashboard in a new tab.
  1. Copy and paste the script provided below into the script editor window of the dashboard. Feel free to customize the button's style, text, and add the desired action to be performed upon clicking.

dashboard.on('initialized', (sender, args) => {

const btnsHolder = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder');

const newButton = document.createElement('button');

newButton.className = 'btn custom-btn';

newButton.style.backgroundColor = '#9b9ae6'; //background color

newButton.style.color = '#000000'; //font color

const buttonText = document.createElement('span');

   buttonText.className = 'btn__text btn-text-sp2';

   buttonText.textContent = 'New Button'; //Text to be displayed on button

newButton.append(buttonText);

$(newButton).on({

       click: ({target}) => {

//Add action to be performed on button click

console.log('Button Clicked');

       },

       mouseenter: (event) => {

           $(event.currentTarget).css('background-color', '#aeaddb'); //Background color on hover over

       },

       mouseleave: (event) => {

           $(event.currentTarget).css('background-color', '#9b9ae6'); //Background color

       }

   });

btnsHolder.prepend(newButton);

})

  1. Save the script, and refresh the dashboard to observe the newly added button in action.