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.


Steps:

  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>
           </svg>
		 </button>`
	
	let $toolbarRight = $('.prism-toolbar__section--right .prism-toolbar__cell.btns-holder');
	$toolbarRight.prepend(clearFiltersButton);

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

function dashboardDescription() {
	const modalScope = prism.$ngscope;
	const modalDom = prism.$injector.get('ux-controls.services.$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) {
		modalScope.$apply();
	}
	
	$('.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'})
	
}

121 views0 comments

Recent Posts

See All
bottom of page