Latest In!
    Ameya's Blog Bridging the gap between latest web technologies and SAP

    Cool drop-down menu on Netweaver Portal navigation

    codingOk its not a good idea to open a post with question, but I cannot help this time. How many times have you felt that Top-Level navigation in SAP Netweaver portal is too cumbersome and takes ages to navigate? I understand those of you who have more than 2GB of RAM, but in general, how many times you felt that “I need to get this done quickly and portal is too slow”. For e.g. say you have to go create a system in portal for connecting to R/3. You have to navigate through System Administration –> System Configuration and then PCD Contents. Now, it would be great to have a simple drop-down on TLN that makes life much easy. Yes, this post is about how to create a cool hover drop-down on Portal TLN.

    Though I have already written an article on it on SDN, but I felt it would be good if put the code directly in different files and you can simply import these files in your NWDS.

    More about the code:

    Entire code of generating a drop-down is based on one single JavaScript. It is a std. JavaScript and you can get this script from any HTML, JSP or JavaScript development site. However, fitting in this script and parsing the parent nodes and child nodes in TLN is what you need you do of your own. Well that’s not a difficult task. All you need to do is understand how should you read parent nodes and then loop at child nodes. This code is to be written in Header.jsp

    Portalapps.xml cofigurations:

    There are not much to write about this file. Just a few configurations to make. We will add application-config property named SecurityArea and set value to NetWeaver.Portal. This is basically to determine what level of security this application will have and who all can actually get access to code. We will also add one more property in application-config that controls that sharing of code among different applications. For that we will add SharingReference property.  Then in Component-profile we will add two properties named as NavigationTagLibrary and FrameworkTagLibrary for referring to navigation tags that helps us converting TLN <Div> to drop-down.

    CSS and styling:

    You can write this code in .css file as well but here I have written css and styling in a JSP file and simply included this file with <include> statements in our main Header.jsp file. This does not makes any difference in tag rendering. It’s just another way of writing a .css file. This code is to be written in a Header_style.jsp

    Download all files here:

    Header.jsp Download

    Portalapp.xml Download

    Header_style.jsp Download

    Above links are no longer working, Donwload the ZIP file for this project from following link.

    Download ZIP file

    You Don't Need a Bribe To Join

    Plain and Simple. Do you enjoy what you just read? Did you get help to solve a work issue or learn something new? Cool, then get more in your inbox whenever we publish a new post

    SAP Netweaver consultant, writer, blogger, budding SEO analyst, learner & fun loving being.

    (16) Comments

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Bridging the gap between latest web technologies and SAP