Screencast 2 – WebCenter PS3 Navigation Models and CSS Menus

*View an updated version of the CSS navigation within the WebCenter ADF Bootstrap Theme

In our second installment of the WebCenter workbench we take a look at WebCenter PS3’s new Nagivation Model and how it is possible to create fly-out, multi-level drop down menus using it and CSS3 stylesheets. This allows WebCenter navigations to be developed using very common web design and development skills, but take advantage of many other WebCenter platform features.

Source Code
Complete Sample Page Template
ADF CSS Fragment
UL-based Navigation Model Code Snippet
JSTL Inclusion Text

16 Comments
  • SplashFantastic
    Reply
    June 10, 2011

    This was a great help, thanks mate!

  • tcwbot
    Reply
    September 28, 2011

    Great article!

    I was wondering if you had an idea how you would add the IconURI next to each menu node in your code sample?

    <c:set var=”navNodes” value=”${navigationContext.defaultNavigationModel.listModel[‘startNode=/, includeStartNode=false, includeShowIcons=true’]}” scope=”session”/>

    <ul id=”nav”>

    <c:forEach var=”menu” varStatus=”vs” items=”${navNodes}”>

    <li>

    <img src=”#{menu.iconURI}”/>

    <!–img src=”#{menu.attributes[‘IconURI’]}”/–>

    <a href=”/webcenter${menu.goLinkPrettyUrl}”>${menu.title}</a>

    None of the above appears to work.

  • John Brunswick
    Reply
    October 1, 2011

    @tcwbot Thanks – I have not worked with the IconURI attribute, but may suggest setting a second CSS class with each node in the navigation

    link name

    Then in the CSS associated with the page you can reference the li and use a CSS entry to setup the spacing, background, color, etc for specific links.

    This is a really common web pattern and could hopefully offer you a good degree of flexibility.

    Hope that helps!

    Cheers,

    John

  • nickolmsted
    Reply
    October 13, 2011

    Hi John,

    We have a WebCenter Spaces 11g PS4 env that is using a custom template and navigation resources to display our spaces using a page hierarchy. We are using the out of the box spaces navigation menu component to display the navigation hierarchy within our template. The issue that we are having is when accessing a page through a direct link to the page (i.e. /webcenter/space/spaceName/pages/pageName the navigation context is not loaded properly for that page. This will cause a lot of confusion for our users who will be saving Favorites or accessing the pages through their Notifications as the navigation context will not load properly. Have you experienced this problem with any of your custom navigations that display parent and child menus?

    Thanks,

    Nick Olmsted

  • John Brunswick
    Reply
    October 18, 2011

    @nickolmsted Hey Nick,

    Apologies for the delay. You are correct about the URLs and context. I am not certain if there is an update from product management – have you opened an SR around it?

    Depending on how your nav is setup you could use parse the URL to sections of your nav UI to illustrate the context of the given URL at a visual level if a person was accessing via a Friendly URL, instead of the full ADF generated URL.

    Hope that helps!

    Cheers,

    John

  • joeswislocki
    Reply
    September 21, 2012

    I tried the tutorial and it worked on my practice spaces page.  Is it possible to use this technique to customize the header and footer and completely override the default template? 

    • John Brunswick
      Reply
      September 21, 2012

       @joeswislocki You can definitely create your own template – you will just need to include the snippets of code to provide admin links, etc in the UI.  The ones that ship are meant as examples, so you can definitely elaborate based on them.
       
      Was that what you were asking?
       
      Cheers,
      John

      • joeswislocki
        Reply
        September 21, 2012

         @John Brunswick Basically, how far can I take my design? What are my limitations? If I create a design from scratch, is it possible to duplicate it within Spaces and WebCenter Portal?

        • John Brunswick
          Reply
          September 23, 2012

           @joeswislocki There are no design limitations – it is possible to have the UIs for Spaces / Portal be the same.  The key is understanding the geometry with ADF.  Take a look at http://www.johnbrunswick.com/2012/05/webcenter-portal-template-design-best-practices/ for some details that might be helpful.

  • anshuman4luv
    Reply
    August 11, 2014

    John Brunswick tcwbot Hi, I have a requirement. I had to show all the pages used in my portal in a page. So i used the navigation model and showed all the pages in a single page. Now what do i need to do if i have to sort it alphabetically with proper index. Suppose if page name is Administrator Then it should come under index ‘A’ .

  • sumitdey
    Reply
    October 20, 2014

    Hi John,

    We are using Oracle webcenter 11.1.1.8.3(PS7) in our organization

  • sumitdey
    Reply
    October 20, 2014

    Hi John,

    We are using Oracle webcenter 11.1.1.8.3(PS7) in our organization, we want to use these functionality in our navigation model, Can you please guide us to implement it . Right now I can’t able to download code form this site, can you please send me the code. 

    –Sumit

  • martinreyesv
    Reply
    August 19, 2015

    Hi John.

    I now this is a very old post but I’m wondering if this solution could work for webcenter portal 11.1.1.9. I’m trying to show a 3 level drop down menu.

    Thanks in advance.

    Greetings…

Leave a comment