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 />   newButton.style.backgroundImage = ‘url(‘iconURL+’)’;

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

if ( trayHeaderIconContainer.hasChildNodes() ){

var insertionPoint = trayHeaderIconContainer.firstChild;

trayHeaderIconContainer.insertBefore( newButton, insertionPoint );

}else{

trayHeaderIconContainer.appendChild( newButton );

}

}else{

alert(‘Fehler beim Suchen des trayHeaderIconContainer’);

}

}else{

/**

• 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 :*

!https://weblogs.sdn.sap.com/weblogs/images/18890/filestructure.JPG|height=200|alt=image|width=400|src=https://weblogs.sdn.sap.com/weblogs/images/18890/filestructure.JPG|border=0!

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 | http://help.sap.com/SAPHELP_NW70EHP1/helpdata/EN/42/efbac120711a71e10000000a422035/frameset.htm] into account.

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

  !https://weblogs.sdn.sap.com/weblogs/images/18890/portal_admin_1.JPG|height=143|alt=image|width=235|src=https://weblogs.sdn.sap.com/weblogs/images/18890/portal_admin_1.JPG|border=0!