top of page

Add Clickable elements To Dashboard Headers

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.






43 views0 comments

Kommentare


Check back soon
Once posts are published, you’ll see them here.

Similar posts

bottom of page