It's all about the answers!

Ask a question

Extend help menu with custom link


Jens Haizmann (3114) | asked Jul 16 '15, 6:37 a.m.
Hi,

is there an ability to add a web link as a separate entry to the help menu of RTC?
Hint: We would like to give our customers the ability to directly access our ticket system over the integrated help menu of RTC.


Thanks and regards
Jens

2 answers



permanent link
Kevin Ramer (4.5k8183200) | answered Jul 16 '15, 2:43 p.m.
edited Jul 16 '15, 2:46 p.m.
I don't know if Help menu can be augmented, but using Theme we have put links above the masthead in our Web UI.

Here is a link to UI themes documentation ( This is a 3.0 link, but still applies to 5.0.2 )  Here's what it looks like:

 


permanent link
Jens Haizmann (3114) | answered Aug 12 '15, 10:15 a.m.
edited Aug 13 '15, 2:44 a.m.
I think I've found a practical solution now. Have a lot of fun with this...

dojo.require("jazz.util.theming");

require(["dojo/on", "dojo/_base/array", "dojo/dom-construct", "dojo/mouse", "dojo/dom-style", "dojo/query", "dojo/NodeList-traverse", "dojo/dom-class"], function(on, array, domConstruct, mouse, domStyle, query, domClass){


var addHelpMenuEntry = {};


addHelpMenuEntry.init = function() {

//if menu dropdown opens, whether by click or hover
on(dojo.doc, "DOMNodeInserted", function(evt){
if (dojo.hasClass(evt.target, "dijitPopup")){

//this timeout is needed, because the child elements take some time to be generated. Unfortunately they are not recognized by DOMNodeInserted event
setTimeout(function(){

//check if the help menu was clicked or hovered
helpMenu = query(".help-menu").parent()[0];
if (dojo.hasClass(helpMenu, "menu-open")){

//then add links as much as you like
addHelpMenuEntry.addLinkToHelpMenu("Link to google", "http://www.google.de");
addHelpMenuEntry.addLinkToHelpMenu("Link to wikipedia", "http://www.wikipedia.de");

}
}, 50);
}
});
};




addHelpMenuEntry.addLinkToHelpMenu = function(title, url) {

var menuItems = dojo.query(".dijitMenuTable tbody")[0];

var html = ''
+'<tr class="jazz-ui-menu-MenuItem dijitReset dijitMenuItem" tabindex="-1" role="menuitem" style="-moz-user-select: none; cursor: pointer;">'
+'<td class="dijitReset dijitMenuItemLabel" colspan="3" data-dojo-attach-point="_td">'
+'<span class="MenuItemContent" data-dojo-attach-point="_wrapper">'
+'<img class="dijitIcon dijitMenuItemIcon " data-dojo-attach-point="iconNode" alt="" src="/ccm/web/dojo/resources/blank.gif"/>'
+'<span data-dojo-attach-point="containerNode"><a href="'+url+'" target="_blank">'+title+'</a> </span>'
+'</span>'
+'</td>'
+'<td class="dijitReset dijitMenuItemAccelKey" data-dojo-attach-point="accelKeyNode" style="display: none"/>'
+'<td class="dijitReset dijitMenuArrowCell" role="presentation">'
+'<div style="visibility: hidden" data-dojo-attach-point="arrowWrapper">'
+'<img class="dijitMenuExpand" alt="" src="/ccm/web/dojo/resources/blank.gif"/>'
+'<span class="dijitMenuExpandA11y">+</span>'
+'</div>'
+'</td>'
+'</tr>';

var newNode = domConstruct.place(html, menuItems, "last");


//this is required as the dropdown style is generated by js and not handled in a css file
on(newNode, mouse.enter, function(evt){
domStyle.set(newNode, "backgroundColor", "#fedda8");
});
on(newNode, mouse.leave, function(evt){
domStyle.set(newNode, "backgroundColor", "");
});

};


addHelpMenuEntry.init();

});

Comments
Jens Haizmann commented Aug 12 '15, 10:31 a.m.

unfortunately the html code in "var html=" has some display problems. I have tried to upload a screenshot of this code but I can't do this before having 60 reputation points :-(


Jens Haizmann commented Aug 13 '15, 2:51 a.m.

I hope this would help:
https://jsfiddle.net/bpnyhohn/

Your answer


Register or to post your answer.


Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.