Selectively Hide Widget Toolbar Buttons

The widget script below shows a list of buttons that are available on a widget toolbar and how to hide each of them, so you can choose which ones you want to hide for any particular widget.

Note that if you hide the Edit button, as the owner of the dashboard, the only way for you to open and edit the widget is to have the direct URL to the widget. If you want to hide the button(s) only for viewers (so you can still see all the buttons as the owner/designer), uncomment the code that checks the user's role (see comments in the code below).

/** This is the widget script to selectively hide widget toolbar buttons **/

//Hide widget toolbar options
widget.on('buildquery', ()=> {

	//Uncomment the code below if you want to hide the buttons only for viewers
	//if(prism.user.roleName == 'consumer') {

	//Hide Edit (pencil) button
	$(element).parent().find('.widget-toolbar-btn--edit').remove();
	
	//Hide Expand / Full Screen (diagonal double-headed arrow) button
	$(element).parent().find('.widget-toolbar-btn--fullscreen').remove();

	//Hide Detail (circled i) button
	$(element).parent().find('.btn--no-background').remove();

	//Hide Menu (vertical ellipsis) button
	$(element).parent().find('.widget-toolbar-btn--menu').remove();

	//Hide Analyze It (graduation owl) button
	$(element).parent().find('.analyze-it-button').remove();

	//Uncomment the closing curly bracket below if you want to hide the buttons only for viewers
	//}

})

Tri Anthony

Posted 2 years ago·Last reply 2 years ago

3 comments

Tri Anthony

OP2 years ago

Awesome, thank you for sharing, liegarmina!

liegarmina

·2 years ago

For the question above the solution will be:

$(element).parent().find('.widget-toolbar-btn--clear').remove();

liegarmina

·2 years ago

Hi, TriAnthony !

May be you know how I can hide "Clear Selection" toolbar button the same way as well?

Thank you for your help!