Jazz Forum Welcome to the Jazz Community Forum Connect and collaborate with IBM Engineering experts and users

Extend help menu with custom link

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

1 vote



2 answers

Permanent link
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:

 

1 vote


Permanent link
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();

});

1 vote

Comments

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 :-(

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

Your answer

Register or log in 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.

Search context
Follow this question

By Email: 

Once you sign in you will be able to subscribe for any updates here.

By RSS:

Answers
Answers and Comments
Question details
× 11,101
× 25
× 5

Question asked: Jul 16 '15, 6:37 a.m.

Question was seen: 5,923 times

Last updated: Aug 13 '15, 2:51 a.m.

Confirmation Cancel Confirm