Skip to Content

Enhance iView Tray with own Icons/Buttons/Content.

iView Tray:


desired design. <%– not needed var hoverId = parent.pageSupport._getIViewBank(ivuPageId).getHoverMenuId(); %><br /> <% debug: alert(‘ivuPageId/ivuId:’ + ivuPageId + ‘/’ + ivuId  + ‘__/__’ + trayId + ‘/’ + hoverId ); –%>

<br />               helpCreator(trayId, iconURL , helpURL, helpWindowName);<br/>          </script><br/>          <%}<br />          }<br/>}%></pre><pre> </pre><p>using the trayId we just determined we can use plain javascript <br/>

f<u>unctions to enhance the DOM:</u>

function helpCreator(trayId, iconURL , helpURL, helpWindowName){

var trayHeaderId = trayId + ‘-hd’;

var buttonIdName = trayId‘-helpbutton’;<br /> var trayHeaderElement = document.getElementById( trayHeaderId );<br /> if ( trayHeaderElement != null ) {<br /> var trayTBodyNode = trayHeaderElement.firstChild;<br /> var trayTRow = trayTBodyNode.firstChild;<br /> var Anzahl = trayTRow.childNodes.length;<br /> var trayHeaderIconContainer = null;<br /> var arrElements = trayTRow.childNodes;<br /> for(var i=0; i<arrElements.length; i){<br />         oElement = arrElements[i];<br />         if(oElement.className  == ‘urTrcHdIco’){<br />           trayHeaderIconContainer = oElement;<br />         }<br />     }<br /> if ( trayHeaderIconContainer != null ){<br />   var newButton = document.createElement(‘BUTTON’);<br />   newButton.setAttribute(‘id’,buttonIdName);<br />   newButton.setAttribute(‘name’,buttonIdName);<br />   newButton.setAttribute(‘type’,’button’);<br />   newButton.className = ‘urTrcMenuIcoPln’;<br /> = ‘url(‘iconURL+’)’;

newButton.onclick = function() {, helpWindowName ); return false; } ;

if ( trayHeaderIconContainer.hasChildNodes() ){

var insertionPoint = trayHeaderIconContainer.firstChild;

trayHeaderIconContainer.insertBefore( newButton, insertionPoint );


trayHeaderIconContainer.appendChild( newButton );



alert(‘Fehler beim Suchen des trayHeaderIconContainer’);




  • no error condition, as help might be turned off, and the iView Tray too.

  • alert(‘Fehler beim Suchen des trayHeaderElement:[‘ + trayId + ‘]’);




the enhanced DOM of the Tray :


*  The filestructure of the pagelayout looks like this :*


We reproduced this code for every pagelayout there is in standard, so the standard pagelyouts can be exchanged in the portal ccontent directory. (Propably there is a way to replacve the standard layouts, but I do not recommend trying – we had to restore our portal after trying.)

additionally take[ SAP Help on Creating Custom Layouts |] into account.

after uploading the project  you should create pagelayouts from the uploaded par file.


which looks like this in the end :

You must be Logged on to comment or reply to a post.
  • Hi Juergen,

    This blog was really informative, especially the way you got the trayID using the iViewStorage in the jsp. Thanks for sharing this information which I guess might have taken a long time for you to arrive at.


  • Hi Juergen,

    Nice to see your blog on SDN again!
    I hope you recognise me :). I still recall our portal implementation days in Germany.

    This blog is really awesome. It really helps to know the practicalities involved in designing and getting a custom tray to work.

    Looking forward to more blogs from you on custom stuff 🙂


    • Dear Prasanna,
      sure I remember the protal implementation days in Germany, and it is really nice to hear from you!
      It seems that after a while one accumulates some kind of library of useful stuff, and one reuses and reuses it.

      As for example, the solution in this blog, also what almost ever bubbles up is “…are we able to display some sort of system message…” (I guess I’ll do my next blog on this topic.)

      looking forward to stay in contact please send my greetings to Suresh too.


  • I don’t want to be unthankful about the way the point system – but getting now points at all for blogging a solution the is jugded helpful by some people is not what I expected. This might seem to be an inappropriate solution as it uses undocumented code – but hey – it serves its prupose well, and therefore is useful. I didn’t copy or plagiate a thing of this.

    re-think your reward system zero points for a blog that covers some insight topics just isn’t okay.

    best regards,