Screencast 2 – WebCenter PS3 Navigation Models and CSS Menus

[easy-social-share counters=1 total_counter_pos="leftbig"]
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

  1. SplashFantastic 8 years ago

    This was a great help, thanks mate!

  2. tcwbot 8 years ago

    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.

  3. Author
    John Brunswick 8 years ago

    @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

  4. nickolmsted 8 years ago

    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

  5. Author
    John Brunswick 8 years ago

    @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

  6. joeswislocki 7 years ago

    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? 

    • Author
      John Brunswick 7 years ago

       @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 7 years ago

         @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?

        • Author
          John Brunswick 7 years ago

           @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.

  7. anshuman4luv 5 years ago

    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’ .

  8. sumitdey 4 years ago

    Hi John,

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

  9. sumitdey 4 years ago

    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

  10. martinreyesv 4 years ago

    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 reply

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

*