change tmsadm password

Generated by Jive on 2014-07-22+02:001

Development of Custom Top Level Navigation-- Horizontal Drop-Down Menu

Top Level Navigation - Horizontal Drop-Down MenuJune, 2014

Prerequisites:

Basic knowledge of SAP NetWeaver 7.3 Basic knowledge of SAP NWDS 7.3 Basic knowledge of HTML, Java Script, CSS Basic knowledge of SAP NetWeaver Portal Adminstration Basic knowledge of LSAPI's

II Introduction:

This article will tell you how to develop a cutom top level naviagation using Navigation Tag Library and LSAPI's-- Horizontal Drop Down Menu which behaves like a SAP delivered TLN. It works pefectly in IE 9 (InternetExplorer only).

Process for creation of TLN: Create a war file in NWDS studio. Create a two jsp files namely header.jsp and header_style.jsp with the codeas shown belowInclude the header_style.jsp file in header.jsp file. The header_style.jsp file contains only the CSS.

Development of Custom Top Level Navigation -- Horizontal Drop-Down Menu


Download the com.sap.portal.navigation.afp.tln war file and import the war file into the NWDS studio or createa new war/ear file. Include the header.jsp and header_style.jsp file in jsp folder under dist folder. Also makechanges to the portalapp.xml file as mentioned below.

Using the cascading style sheet the top level navigation is displayed with different colors.Using the Javascript the drop down menu will be visible for a hovered role if the role has child elements likeroles/iviews.

header.jsp



var clicked = false;var currEl = 0;

function(navigationDiv) {if (!document.all) return; // continue only for IEvar liEls = document.getElementById(navigationDiv).getElementsByTagName("LI");var id21;var countLevels1 = 0;var brandingWidth = 0;

for (var i=0; i



/*In the above figure it has four roles indicated as "Level1" and "current" class. The class nameassigned is Level1 .

When the user clicks on the role for eg. User Administration the class name of that parentnode / parent role is set to current and the current elements parent node / parent role calssname is set to currenthref. The font color of parent node / parent role is set to the shade of red("#C51733").

If the roles do not have child elements, the idvalue will be same as of id2Value.

But for User Administration role there are four child elements and so their idvalues will bedifferent from id2Value. The class name assigned is Level2 for these child elements. Theseid2Values are same as of their parent node as shown in below figure. This will help to distinguishthe node of the parent from the child elements to set the color and background color when thechild element is selected.*/// as shown in the above fiugre I have mainly added the above code to find out the level one with leveltwo node.

if(liEls[i].className == "Level2"){ liEls[i].setAttribute"id2Value"); liEls[i].id2Value = id21; }

liEls[i].onmouseover = function() { this.className += " hover"; var aEl = document.getElementById(navigationDiv).getElementsByTagName("A"); this.id2Value].style.color="#C51733"; };

liEls[i].onmouseout = function() { this.className = this.className.replace(new RegExp(" hover\\b"), ""); var lEl = document.getElementById(navigationDiv).getElementsByTagName("LI"); var aEl = document.getElementById(navigationDiv).getElementsByTagName("A"); if(clicked) { // The if condition is used for used for work protect mode if(currEl != this.id2Value) { this.id2Value].className = "Level1";



this.id2Value].className = ""; this.id2Value].style.color="#FFFFFF"; lEl[currEl].className = "current"; aEl[currEl].className = "currenthref"; aEl[currEl].style.color = "#C51733"; } } else { this.id2Value].style.color="#FFFFFF";

if(lEl[this.id2Value].className == "current") this.id2Value].style.color="#C51733"; }

clicked = false; }; liEls[i].onclick = function() {

// // one can uncomment the below code and can try also. This was mainly used for work protect mode

/* var lEl = document.getElementById(navigationDiv).getElementsByTagName("LI"); var aEl = document.getElementById(navigationDiv).getElementsByTagName("A");

for(var j=0; j



}

/* The below code help to set the branding width of the TLN. The top level width is set depending upon thenumber of roles. The style set for the top level navigation are font family is Verdana with size of 12. Each therole text length is taken and multipled by 7(on an average) and then added to the brandingwidth. The gapbetween the roles also need to be conisdered. The gap between the roles is taken as 22 pixels and this gap ismultipled by the number of roles and then added to the branding width. */

brandingWidth = brandingWidth + countLevels1*22;document.geElementById("navigation").style.width = brandingWidth;



TLNHover("navigation");

var nodeNameFromNaviagation;

/*

Whenever the navigation changes, the raiseEvent is fired with the current selected/clicked Node name. We canget the path of the current selected/clicked Node by using the LSAPI's. The first element in the pathArray willbe have the node name of the "Level one/Parent Node" of the "Top Level Navigation".

This event is subscribed using the function as mentioned below in the header.jsp in top level navigation war file

*/

EPCM.subscribeEvent("urn:com.node.test", "currentNode", onCurrentNode );

function onCurrentNode( eventObj ) { var aEls = document.getElementById("navigation").getElementsByTagName("A"); var lEls = document.getElementById("navigation").getElementsByTagName("LI");

nodeNameFromNaviagation = eventObj.sourceId; aEls[currEl].style.color="#FFFFFF"; for(var n1=0;n1



aEls[n].style.color = "#C51733"; currEl = n; clicked =true; break; } } }

header_style.jsp

navigation, #navigation ul {background-color: #414141;font: 11px verdana;padding-top: 4px;padding-bottom: 4px;margin: 0;list-style: none;height: 22px;

}

#navigation a {padding-left: 10px;padding-right: 10px;padding-top: 4px;padding-bottom: 4px;text-decoration: none;background-color: #414141;color: #FFFFFF;display: block;width: auto;}

#navigation a.currenthref {padding-left: 10px;padding-right: 10px;padding-top: 4px;padding-bottom: 4px;text-decoration: none;background-color: #FFFFFF;color: #C51733;



display: block;width: auto;}

#navigation a:hover {background-color: #F4F4F4;color: #C51733;display: block;border-color: #FFFFFF;font-weight: normal;}

#navigation li {bacground-color: #616F9E;float: left;}

#navigation li ul {position: absolute;width: 17em;white-space: nowrap;padding-top: 0px;padding-bottom: 0px;color: #ffff00;left: -999em;}

#navigation li:hover ul {left: auto;width: auto;display: block;position: relative;}

#navigation li:hover ul,#navigation li.hover ul{left: auto;display: block;border: 1px solid #CBDBEA;}

#navigation li.hover ul a:hover{left: auto;display: block;



border: 0px solid #CBDBEA;background-color: #F4F4F4;color: #414141;}

.current {font: 0.4em verdana;font-size: 11 px;border: 0px solid #000000;font-weight: light;background-color: #FFFFFF;color: #C51733;}

.Level1 {font: 0.4em verdana;font-size: 11 px;border: 0px solid #000000;font-weight: light;background-color: #FFFFFF;color: #C51733;}

.Level2 {font: 11px verdana;border: 0px solid #000000;font-size: 11px;display: block; width: 17em;white-space: nowrap;background-color: #F4F4F4;color: #414141;}

.clicklink{background-color: #FFFF00;color: #0000FF;}#navigation ul li.hover a{left: auto;display: block;border: 0px solid #CBDBEA;background-color: #F4F4F4;font-weight: normal;



color: #414141;}

#navigation ul li.hover .Level2{left: auto;display: block;border: 0px solid #CBDBEA;background-color: #F4F4F4;font-weight: normal;color: #414141;}

#navigation ul li.hover a:hover{left: auto;display: block;border: 0px solid #CBDBEA;background-color: #F4F4F4;color: #C51733;}

.Level2 a{left: auto;display: block;border: 0px solid #CBDBEA;background-color: #F4F4F4;color: #FFFF00;}

#l1 a {width: auto;border: 0px solid #000000;background-color: #F4F4F4;color: #414141;}

#l1 a:hover {width: auto;border: 0px solid #000000;background-color: #F4F4F4;color: #414141;}

portalapp.xml



Create another war/ear file where we use the LSAPI. Create a JSPDyn page



nav.jsp

function updateNavigationMenu(currentNode){ EPCM.getSAPTop().LSAPI.AFPPlugin.model.getNavigationSubTree(null,drawTree,null); }

function drawTree(nodes, container){ var pathArray = EPCM.getSAPTop().LSAPI.AFPPlugin.model.getCurrentSelectedPath();

//alert(pathArray[0].getTitle());



EPCM.raiseEvent( "urn:com.node.test", "currentNode", "Current Node", pathArray[0].getTitle());}

Whenever the navigation changes the raiseEvent is fired which with the current selected/clicked Node name. We can get the path of the current selected/clicked Node by using the LSAPI's. The first element in thepathArray will be have the node name of the "Level one" of the "top level naviagation".

portalapp.xml

Deploy this war/ear file in the server and create a iview for this component with isloation property as"Embedded". Set the height property as 0.



Create an page and copy the iview mentioned above as delta link into the page with isloation property as"URL". Set the height property of the page as 0 fo the page.



Add the above created page to your framework page as delta link and check the checkbox of visible for thispage.



In the framework page i have selected the container for HoverTLN and TlnNodePage in Page Tool BarContainer because when I add it in the Top Level Navigation Container I am not able to see the drop downmenu.

As shown in the above figure the TLN works fine. When the user moves the mouse over other nodes thesecond level of navigatin will come as drop down menu as shown in above figure with the background color inthe shade of light yellow. The current selected node will is identified with background color white and font coloras red shade.



By using Java Script I have hidden the blue arrow which appears on the left side of the browser to display thedetailed navigation.

Till here the code work fine.

For the above code I am trying to restrict the width to 900 px and trying to put the horizontal scroll using buttonsbut could not proceed further. So If anyone has the solution please add your comments which is the only thingI am missing for this code.

For the above shown figure I tried it using html file and it worked fine for the horizontal scroll using the butonbut the horizontal scroll did work but the dorp down menu in not visisble outside when I included in theframework page. This is because it is div tags are inside the table cells. I tired with "". If I remove the style overlfow-x:hidden,the drop down menu is visible on hover but the scroll does not work as the full width of the navigation will bevisible.

Any suggestions welcome.

change tmsadm password

Documents