Skip to Content
Figure 1: Working hover menu.     With the introduction of the light framework page in support of external-facing portals, developers now have a access to several JSP tag libraries for navigation and layout. Using this library (in both the light as well as standard framework page), CSS and JavaScript you can build a hover drop down menu to replace the standard top level navigation bar.   Before the navigation tag libary was available, making changes to the top level navigation was painful to say the least. No more! Creating innovative, and highly branded navigation iViews is now straightforward. In this tutorial we will cover setting up the portal project in the SAP Netweaver Developers Studio, creating the JSP page and portalapp.xml file and deploying the PAR file into the portal. After successful deployemnt we will create an iView and add it to our copy of the light framework page. Figure 1 shows the end result of this tutorial. image  Let’s get started. Fire up your SAP NetWeaver Developer Studio and create a new portal project. If you haven’t done so already, also open the enterprise portal perspective (Window->Open Perspetive->Other). Once you have created the project, expand the ‘dist->PORTAL-INF’ folder, and add a new JSP page to the ‘JSP’ folder.See Figure 2, with step-by-step screen shots.   Step 1:image   Step 2: image  Step 3:image  Step 4: image   Figure 2: Creating a portal project.      The new tag libraries are extensively documented here  (http://help.sap.com/saphelp_nw04s/helpdata/en/42/f35146a7203255e10000000a1553f7/frameset.htm) so I will not go into great detail but just provide a brief overview. The navigation tags fall into different categories:             | Iterator:  | Iterates through a set of nodes, exposing in its body a different navigation node during each iteration. | | Node:  | Exposes in its body a specific navigation node. | | Operator:  | Performs an operation, such as storing a navigation node for later recall. | | Rendering:  | Outputs HTML based on the currently exposed navigation node. | | Conditional:  | Includes its body if a condition is true or false. |       Sven Kannenegiesser and his series of blogs were fundamental, providing insight and code, that made  this appliction possible. I encourage you to check out the blogs – they are very informative:  Part I  (EFP: Working with the New Taglibs – Part 1) Part II  (EFP: Working with the New Taglibs – Part 2) Part III  (EFP: Working with the new Taglibs – Part 3)  In you SAP NetWeaver Developer Studio project, notice the structure underneath the ‘dist’ folder: ‘images’ for any graphics you want to use in your JSP code, ‘CSS’ for all cascading style sheets used in your portal application (see Figure 3).  image Figure 3: Project Structure        Now that the project framework is in place, we can proceed with adding code. Since we are using two separate tag libraries we have to declare their use at the top of the ‘header.jsp’ file. In conjunction, we need to add the used tag libraries to our component and add them in  the ‘SharingReference’ of the portalapp.xml file. (Figure 4). On the portalapp.xml ‘Components’ tab the component-profile for our ‘HoverTLN’ component needs two new entries for the tag libraries (note the matching names in the XML file and the reference in the JSP!). All of the +portalapp.xml+ configuration options are well documented on the  SAP Help Portal  (http://help.sap.com/saphelp_nw2004s/helpdata/en/53/c8af42a6f6cb6ae10000000a155106/frameset.htm) but it’s easier to start from an existing XML file than create one from scratch. One important thing to point out is that the Enterprise Portal Client Framework (EPCF aka client-side eventing) is set to ‘0’ (disabled) to ensure that no EPCF JavaScript libraries are loaded.      imageimage
To report this post you need to login first.

29 Comments

You must be Logged on to comment or reply to a post.

      1. Ivan Mirisola
        Hi Oliver,

        Super! This is just what costumers are asking arround.

        It would be nice if there was a way to make a hover menu with Macromedia’s Falsh technology.

        Do you think this is possible?

        Best regards,
        Ivan

        (0) 
        1. Oliver Mayer Post author
          Hi Ivan,

            Glad you found the information useful. I haven’t worked with flash so I don’t know if this can be done in flash.

          Oliver

          (0) 
    1. Oliver Mayer Post author
      Hi David,

        When you say ‘render KM content’ are you referring to assigning a standard KM iView to the anonymous user role? If so, yes that’s doable but you loose the light framework page benefit since navigation within KM requires the standard framework page plumbing (i.e. JavaScript libraries). Please see SAP Note 853509 for EFP restrictions. You could of course also use the KM API to get access to the content but that’s quite a bit more effort :).

      O.

      (0) 
      1. david cole
        Hi Oliver –

        I would like to render KM content for our internal portal users. It would be OK to lose the light framework benefit. Ultimately, I’m looking at what tools will allow me to customize the display of KM content. I have seen some examples using the KM API and I would agree that it is a bit more effort. Is it possible to develop a KM iview for internal portal users using the jsp tag library ?

        I have started a thread for this topic if you would rather reply there => /thread/261806 [original link is broken]

        Thanks !

        (0) 
  1. Tiberiu Sasu

    great blog! I liked especially the work around the IE limitation. I may recommend to our company as an alternative to the existent navigation bar. <br/><br/>I have one question… it looks like my NWDS tool (ver7) does not pick up any errors located in jsp files. For instance, I typed <nav:guess who’s coming for dinner?>  and there was no compile/parsing error in NWDS.  Isn’t NWDS supposed to detect these types of problems?<br/><br/>Note: it does not look like the framework tag library is used in your example.<br/><br/>Regards,<br/>Tiberiu

    (0) 
    1. Oliver Mayer Post author

      Hi Tiberiu,<br/><br/>  Glad you found the information useful. You are correct, it was my understanding as well that the next release of the SAP NetWeaver Developer Studio would have JSP syntax checking. I’ll investigate. I do use the framework taglib, but only twice – for the user first and last name :)<br/><br/><frm:userFirstName /> <frm:userLastName /><br/><br/>O.

      (0) 
  2. Chittya Ranjan Bej
    Hi,

    The work is really imagine, in my case its working fine. but when i click any role, my particular is not highlight with color.

    so could you please give any suggestion so that i am very much great full to you.

    thanks
    chitta

    (0) 
  3. Aanchal Shukla
    Ur blog gives just what i have been looking for….
    thanks
    I have some more requirement

    Can u tell how can i add further iViews to the first dropdown which gets displayed in the hover menu.It would be like hover besides an item selected in first hover menu…
    It would be really helpful

    (0) 
    1. Oliver Mayer Post author

      Hi,<br/><br/>  The current version only goes through level 1 and level 2 navigation. You would have to modify the code with the comment ‘ <%– again go through all the nodes in level 2 –%>’ and check to see if level 2 nodes have children. Keep nesting until the desired level.<br/><br/>O.<br/>

      (0) 
  4. veronica haze
    Hi Oliver,
    I found ur blog very helpful.
    I need a lil Help from u though..I want to include “Log-off” option in the page. can u tell me the code for it to work .
    Please Help me out.
    Awaiting Ur Reply….
    (0) 
    1. Oliver Mayer Post author
      Hi Veronica,

         I’m sorry, but I haven’t worked with this for quite some time. Please try searching the forums (I did a quick search on ‘logoff’ and there were tons of hits) for your answer, or post the question if you cannot find an answer in the portal forums.

      Oliver

      (0) 
  5. Jeanette Abraham
    Hi,

    I tried to implement the Hover Menu in our portal PS 11 and worked very fine but now after the upgrade PS 13 I can not deploy de file.
    And the XML file have an error. I do not know What is wrong.

    Would you please help me?

    Thanks

    Jeanette

    (0) 
    1. Oliver Mayer Post author
      Hi Jeanette,

      I don’t have access to a SP13 portal so I cannot test the par file to see what may be wrong. Have you checked the portal log to see what the deployment error is?

      Oliver

      (0) 
  6. Aanchal Shukla
    Hi Oliver,

    I commented on ur blog earlier but did not state my requirement properly.

    Can you please tell if i want hovering menu only in Detail navigation and not in TLN,what needs to be done?
    I have few roles ion TLN and on clicking it is desired to get roles in Detail navigation…it is here that i want hovering menu for worksets or iViews.

    Please check this link:
    /thread/677025 [original link is broken]

    I require this to be done urgently
    Please help.

    Regards
    Aanchal

    (0) 
  7. Hüseyin Bilgen
    Hi,
    Hover Menu is good to use. But one problem is that when we activate RTC, and use Huver Menu to browse Portal, on each navigation attempt a Popup warn that a session already exists for this user.
    This is caused by (I guess) the way Hover Menu works. It is using Light Framework as URLs are generated like /irj/portal?NavigationTarget=navurl://0863931c4c779de6599e6227b82375e0

    how to overcome this bug?

    (0) 
    1. Jesus A. Valencia
      Hi Huseyin, were you able to solve your problem, I am facing the same issue today. I hope you can help me out if you got a solution for this.

      Thanx in advance.

      JV

      (0) 
  8. sruti gupta
    Hi,

    This bolg has been really helpful in creating the Hover Menu. But there is a problem that I am faciing. When the no. of roles increase then instead of scrolling they come in the second line.

    Is there a way by which i can make the roles scroll horizontally?

    It would be great if you could help.

    Thanks,
    Sruti

    (0) 
  9. Kiran Jakkaraju
    I have implemented a Hover Menu .. in SAP Enterprise Portal and I have few links in the Detailed Navigation for Transaction iViews to be shown in the portal. My Issue is , if I show the Transaction iView, the menu sub-items are going behind the iViews. Could any one give me any solution for displaying the Hover Menu on top of the Transaction iView, is that possible?

    I tried z-index = 1 in CSS and bring-to-front options in CSS but all are in vain.

    I want to attaching the image here but I could not. Hope you can understand the issue.

    (0) 
    1. Benoît DELPORTE
      Hello
      I have the same issue when I use iview for flash application developped in Visual Composer with flex.
      Could you solve your issue ?
      Thank you and Merry Christmas to all !!
      Benoit
      (0) 
        1. Vikas Saxena
          Hi Oliver,

          I’d used this blog to customized our Mover Menu but facing problem while opening PDF files. Pdf overlap menu and I’m not able to select anything further from menu.

          Can you please suggest any solution for this problem.

          Thanks,
          Vikas

          (0) 
  10. Vikas Saxena
    Hi Oliver,

    I’d used this blog to customized our Mover Menu but facing problem while opening PDF files. Pdf overlap menu and I’m not able to select anything further from menu.

    Can you please suggest any solution for this problem.

    Thanks,
    Vikas

    (0) 
    1. Oliver Mayer Post author
      Hi Vikas,

         Unfortunately I have not worked with this for over two years so I’m afraid I cannot assist you with your issue. Have you tried the forums?

      O.

      (0) 

Leave a Reply