top of page

Add i-Button in Dashboard

Currently there is an option to add description for each widget by click on i-button on title. But there is no i-button at dashboard level to write some information such as purpose and other details about dashboard. Here is a script to add i-Button in dashboard toolbar.

When you click on this i-Button, description will be displayed on a pop-up window.


  1. Create Dashboard

  2. Add below script to dashboard. Update the variable 'template' with description of dashboard.

  3. Save the script and refresh dashboard

dashboard.on('initialized', function (se, ev) {
	let clearFiltersButton = 
		`<button id="dashboard-i-button" class="btn btn--transp" title="Description" style="width: 24px; height:24px">
		 <svg class="app-icon__svg">
          <use xlink:href="#general-info-circle"></use>
	let $toolbarRight = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder');

	$toolbarRight.find('#dashboard-i-button').on('click', dashboardDescription);

function dashboardDescription() {
	const modalScope = prism.$ngscope;
	const modalDom = prism.$injector.get('$dom');
	const options = {
		scope: {
			in: modalScope,
		template: `Welcome to Sales Dashboard<br>
				(Description about the dashboard...)`,
	const ui = {};

	modalDom.modal(options, ui);
	if (!modalScope.$$phase) {
	$('.md-ai-modal').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%'})
	$('.md-content').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%', 'width':'500px'})
	$('.md-overlay').css({'z-index':'998', 'position':'absolute'})

113 views0 comments

Recent Posts

See All
bottom of page