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:
Create Dashboard
Add below script to dashboard. Update the variable 'template' with description of dashboard.
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'})
}
Comments