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.

(19) Comments

  1. Hello
    your post has been very helpfull !
    But as I have implemented a drop down menu, in IE7 when I wabt to open an iview which should be load in a separate windows it opens 2 portal windows … any idea ?

  2. Do you mean to say that upon clicking a role or any other node in the drop down menu, two windows are getting launched? Did you try integrating this iView in details navigation or something? Is the behavior same? I just want to eliminate options for me to conclude it’s IE 7 bug. Please also try opening same menu in other browser and let me know what are the results. I will verify and come back to you on this.

    Thanks for commenting,

    Ameya

  3. Hi Ameya,

    First of all, I would like to thanks you for the code, it was really helpful.
    But I’m having trouble converting it into a horizontal drop-down, i.e. the second level navigation should appear in one line. Any inputs/help is greatly appreciated.

    Thanks,

    Rajiv

  4. Hello Rajiv,

    Thanks for appreciating and sorry for getting back late. If you want hover to be horizontal and to appear in second line only, you actually don’t have to change to code at all. SAP has provided default hover effect that I am sure would satisfy your requirement. All you have to do is find the TLN iView and change the hover property. Once you save this, upon mouse over, second level navigation would appear in one line.

    Ameya

  5. Hi Ameya,

    Thanks for this article, this seems to be exactly what our requirement is looking for “drop-down” TLN view.
    However i am not able to download above files it says links not valid, also do you have any steps as how to use these files and implement, as i am new to portal but i do have development experience, any help will be appriciated.

    Thanks
    Deepak

  6. hello Ameya,
    It is s great blog which is quite fitting our requirement. We are trying to face-lifting our customer portal https://customers.sagenorthamerica.com to a new look & feel.

    I have two question..

    1. Is there any way we can implement any CSS tag to show the tab selected in different image or color?

    2. Also I see that the Dropdown TLN is not refreshing while an Iview is getting called inside another IView through some link calling the URL as ROLES://portal_content/.(inside webdynpro application)

    Your help is much appreciated.

    thanks a lot
    Papiya Dutta

  7. Hi Papiya,

    1) Yes you can very well make use of CSS. Rather you can achieve it right from the theme editor itself. Have you heard about CSS Hack in portal theme editor?

    2) Is that happening because you are opening another iView in Content area? Or is it happening irrespective of it?

    I just saw your customer portal, one more tip I would like to give you is, if possible, use CSS Sprite on your Social Media page. I can see you have referenced every image seperately and I can clearly see the increase in page load time. You can greatly enhance performance of this page by using CSS Sprites. Check out this link for more details on CSS Sprites:
    http://www.ameyablog.com/wordpress/mystical-css-sprites-how-to-implement-in-non-list-elements/

    Let me know if you have any further doubts.

    Ameya

  8. Hi Ameya!

    First, great blog. I have used your code and customized it to create a great hover menu.

    I’m have a problem though. In our LSO (Learning Solution Online) portal content, we use a workset as a Leaf Folder, and the Services iView in Dynamic Navication to create a second section called Services just below Detailed Navigation.

    Using your new HoverMenu navigation iView on the framework page, when a user clicks on the text of the top level navigation tab, the corresponding content is not displayed correctly. The first link in the Detailed Navigation is not automatically selected, and therefore the services section does not display at all.

    IF the user hovers over the top level text, and proceeds to click on the second level pop-out text, it works fine. Or the user may click on the first link in the detailed navigation.

    Is there a way to correct this?

    Screenshots for reference:
    When a user clicks on the top level nav text, they see: http://i.imgur.com/3imqV.png
    When a user clicks on the second level nav text, they see: http://i.imgur.com/cI8C1.png

    It is desirable to have the content of the second screenshot display, when the text of the top level nav is clicked. Is that possible?

    • UPDATE:

      I guess the root of the problem is that when a user clicks on the top level nav text, the first iView in the first workset does not open automatically, like it does with standard top level navigation.

      Is there a way to make it open the first iView automatically?

      (I’ve noticed this is happening with normal Role –> Workset –> Page –> iView interaction, and not just with leaf folders and dynamic navigation iViews.)

      • As usual, the day after I ask for help, I figure it out.

        I had to set the “Default Entry for Folder” property to Yes on all Pages or iViews that are first in the Detailed Navigation.

        Standard TLN will open these pages/iViews without the property set, but with this hover menu I needed to set it manually.

        • Ah I am really sorry for missing out to reply earlier Adam. That’s an interesting find you have got here! May be we have to consider this property with its due in case of using hover menu :) Thanks for taking time and posting updates. I hope you find other posts as useful as you found this one. Keep visiting.

          Best Regards,
          Ameya

          • Thanks for responding, Ameya. Setting the “Default Entry for Folder” property to Yes now works with regular Detailed Navigation links, but is still not working with Dynamic Navigation. I’m trying to get the first link in the Detailed Navigation to be automatically selected, thereby opening the Dynamic Navigation. It works if you click on the second level nav link in the hover menu, but not if you only click the top level nav link. I have not found any combination of property settings that will make this work. Any help or ideas are appreciated!

  9. Dear Ameya,

    thanks for your helpful blogs. I have two question reading this drop down menu:

    1- when I click the top level navigation (e.x. home or ESS) show “No content available for this navigation node”

    I want when I click home or ESS display the first iView on hover (e.x. overniew )

    2- I implemented post logon message but when I click on any thing of hovering menu display the message, and cannot to

    navigate to the menu because it show the message again.

    Regards,

    Mohamed

    • Hi Mohamed,

      To answer your first question, Did you face the same issue when you have a page or workset instead of an iView? I have implemented this hover menu on a lot of servers and I never faced this issue. Can you please send me a screen shot on ameya[at]ameyablog[dot]com?

      About the second question, unfortunately I did not understand what you exactly you meant here. Can you please explain a bit more on this? What kind of message are you talking about? Is it an error message?

      Looking forward to your update so that I can answer it in a better way.

      Ciao,
      Ameya

  10. Hi Ameya,

    With the help of your blog, I have implemented hover effect in NW7.1 till 3 level which is workin for NW7.3 also.
    Can you please help me to implement hovering till 4 level for NW7.3.

    Regards,
    Sarita Agrawal

  11. Hi Ameya

    I have an issue that I need to have two drp downs named as Country and Region.

    When I select any country from first drpdowns ,the respective Region should be populated in 2nd dropdown using OData Service.
    I am getting First Dropdown but the 2nd dropdown I am not getting.

    Can you please share some solutions or sample codes for the above issue.

    Thank you so much .

    • Hi Anil,

      First, the issue of yours is nowhere related to this post. Second, I guess you are developing an application in UI5? Correct me this is untrue. As much as I know, you can work with drop-down menus UI in UI5 for this. Let me know if you need any headsup on that.

      best,
      Ameya

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

x
Never Miss an Update!
Stay Updated with latest posts on

Bridging the gap between latest web technologies and SAP