Hello,
Would you like to add one of the following to your dashboards?
- Branding/Logo
- Navigation Buttons
And you want to do so in the dashboard's header, without taking up any space in your dashboard's canvas?
What? Who do you think you are?! That's not OOB.
Just kidding. I've got good news! You can use this code in a Dynamic content block to accomplish just that!
TIP: You can customize the myContent variable's HTML to contain a variety of objects: logos, navigation buttons, and more. Be creative!
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!-- README (Admin): For each tab of the given dashboard:
1. Place this widget at the top of the dashboard.
2. Drag the handle of the widget, which will be semi-invisible, to set the widget to be the full width of the sceen and as short as possible.
3. (Optional) If alternating tab logos are desired, perform steps 1 & 2 instead for the alternating logo on each tab it will be on.
4. To configure (edit, move, remove) the widget, hover over the very-top portion of the dashboard. The widget's header will be barely visible.
5. (Future) Each time you add a widget to the dashboard, reposition this content block to the very top of the dashboard. -->
<!-- README (End-User):
1. Nothing! This widget, once properly setup by the dashboard moderator, HANDLES ITSELF for the end-user, thus enhancing their experience. -->
<!-- FEATURES: 1. Zero End-User Configuration, 2) Widget Self-Hide, 3) Self-Removal on Dashboard Change, 4) Supports Alternating Tab Logos -->
<!-- User Defined Variables -->
<g:evaluate>
myLogoURL = 'sys_attachment.do?sys_id=85478b131b20b8109513859ce54bcb07',
myLogoAlt = 'My Logo';
myLogoTitle = '[Blurb about logo]';
</g:evaluate>
<!-- Stop Here If Previewing (Crash Prevention) -->
<j:if test="${RP.isPreview()}">
<!-- <center>${gs.getMessage('No preview available')}</center> -->
<img src="${myLogoURL}" style="position: relative; top: 50%; transform: translateY(-50%); width: 100%; height: auto"></img>
</j:if>
<!-- Proceed If Not Previewing -->
<j:if test="${!RP.isPreview()}">
<!-- Place Display (purpose: finding container) -->
<div id="jw_dashboard_logo_display"/>
<script>
<!-- Add the Logo to the Dashboard Title Bar -->
var myContent= '<img id="jw_dashboard_logo_image" src="${myLogoURL}" alt="${myLogoAlt}" style="position: relative; top: 50%; transform: translateY(-50%); width: auto; height: 38px" title="${myLogoTitle}"></img>';
if ($j('#jw_dashboard_logo_image').length && $j('#jw_dashboard_logo_image').attr('alt') !== '${myLogoURL}') {
$j('#jw_dashboard_logo_image').replaceWith(myContent); <!-- Replaces Existing Logo if Current is Different -->
} else {
$j('.sn-canvas-nav-buttons').prepend(myContent); <!-- Prepends New Logo -->
};
<!-- Grab Elements (after placing logo) -->
var myWidget = $j('#jw_dashboard_logo_display').closest('[data-uuid]');
var myLogo = $j('#jw_dashboard_logo_image');
var gridChildren = $j(".grid-stack-container").children();
<!-- Modify Canvas to Hide Widget -->
gridChildren.css('margin-top', '-96px'); <!-- Moves all canvas children (widgets) UP, hiding logo widget. -->
myWidget.children().first().css({ <!-- Shrinks logo widget & moves DOWN, exposing header-bar controls -->
'margin-top': '86px',
'height': '10px'
});
<!-- Event Handling -->
var myLogoDshbTitle = $j('.sn-canvas-header-title').html();
var myLogoDshbTabTitle = $j('#snCanvasTablist').find("a[aria-selected='true']").html();
function eventCallback(data) {
if (data.action != 'destroy') {return;}
var newDshbTitle = $j('.sn-canvas-header-title').html();
var newDshbTabTitle = $j('#snCanvasTablist').find("a[aria-selected='true']").html();
<!-- SCENARIO 1: User loaded another dashboard || SCENARIO 2: User removed logo from dashboard -->
if (newDshbTitle != myLogoDshbTitle || newDshbTabTitle == myLogoDshbTabTitle) {
gridChildren.css('margin-top', '0px')
myLogo.remove();
};
}
var eventsId = myWidget.attr("data-uuid");
SNC.canvas.eventbus.subscribe(eventsId,eventCallback); <!-- Subscribes to Dashboard Events -->
</script>
<!-- End of Preview Prevention -->
</j:if>
</j:jelly>I'd like to give thanks to
Well, I hope that helps.
Kind Regards,
Joseph
