It's all about the answers!

Ask a question

Extend help menu with custom link


Jens Haizmann (213) | 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.4k6162185) | 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 (213) | 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.