Navigation Pane - Display Content

User_QUFP4

Hi,

Below is my page template code to display the subpages as a navigation bar in the main page - (it works fine)

             <af:panelGroupLayout id="pgl_22" layout="horizontal" halign="left">

                     

                       <af:navigationPane id="np1" value="#{navigationContext.defaultNavigationModel.currentSelection.children}" var="node2" hint="bar">

                           <f:facet name="nodeStamp">

                            <af:commandNavigationItem text="#{node2.title}"

                             id="cni1"  destination="#{node2.goLinkPrettyUrl}" targetFrame="_self">

                           </f:facet>

                          </af:navigationPane>

         

                   

                  </af:panelGroupLayout>

                  <af:skipLinkTarget/>

                  <af:facetRef facetName="content"/>

               </af:panelGroupLayout>

Here, since I'm giving the destination as the URL of the subpage, when I click the link in the page it is redirecting to the new url (subpage)..

But instead of this, is there any way to set the targetframe as the content of the main page.. Because I dont have any content for the main page.. Just it should display the content of the subpages..

for example - I have two subpages - subpg1 and subpg2.. When I click the main page, it should display the content of subpg1 by default and when I click the link subpg2 in nav bar, it should display the content of subpg2 in the same page.

Just trying to achieve this thro page template before creating <af:golink> for each page..

Thanks as always!

User_QUFP4

Got this fixed.. In my navigation pane, added a condition for styleclass checking of that node  is selected, apply this styleclass else different one.

Defined that styleclass in my css file. That worked!

Thank you for your help in this!

Dinil Mithra

What is your webcenter portal version?

Below code works with 11.1.1.9 version WCP.

            <af:navigationPane hint="bar" id="pt_np1"

                               value="#{navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}"

                               var="node2">

              <f:facet name="nodeStamp">

                <af:commandNavigationItem text="#{node2.title}" id="pt_cni2"

                                          action="pprnav"

                                          actionListener="#{navigationContext.processAction}">

                  <f:attribute name="node" value="#{node2}"/>

                </af:commandNavigationItem>

              </f:facet>

            </af:navigationPane>

Regards,

DM

User_QUFP4

Thanks a lot for your reply!

I'm working on version 12.2.1.3.0.

Tried the above code -  getting the main menu as a navigation pane bar.. But not getting the sub menus for a menu item in the page.

User_QUFP4

Below code worked -

<af:panelGroupLayout id="pgl_24" layout="horizontal" halign="left">

          <c:set value="#{navigationContext.currentNavigationModel.currentSelection.parent.children}" var="node3"/>

               <c:if test="#{node3 !=null}">

                <af:navigationPane id="np2" value="#{navigationContext.defaultNavigationModel.currentSelection.parent.children}" var="node4" hint="bar">

                    <f:facet name="nodeStamp">

                     <af:commandNavigationItem text="#{node4.title}" destination="#{node4.goLinkPrettyUrl}" id="cni2" windowEmbedStyle="inlineDocument" disabled="false"/>

                    </f:facet>

                </af:navigationPane>

               </c:if>

              

</af:panelGroupLayout>

<af:panelGroupLayout id="pgl_22" layout="horizontal" halign="left">

            <af:navigationPane id="np1" value="#{navigationContext.defaultNavigationModel.currentSelection.children}" var="node2" hint="bar">

                      <f:facet name="nodeStamp">

                            <af:commandNavigationItem text="#{node2.title}" destination="#{node2.goLinkPrettyUrl}"

                             id="cni1" windowEmbedStyle="inlineDocument" disabled="false"/>

                        </f:facet>

             </af:navigationPane>                    

</af:panelGroupLayout>

With this code, I'm getting both the main menu and the sub menus in the page. Also,getting the submenus in the subpages as well.

User_QUFP4

Also, would like to ask - if I use "tabs" in the hint attribute, I'm not getting like below -

This screenshot is from 11g.. but i am using 12c.

The tabs are just displaying like a regular texts

Page1  Page2  Page3 >

Should I apply any separate CSS for this - to get a tab like above.

Thanks as always!

Dinil Mithra

You have two options

1. change portal skin to skyrose (11g skin). Navigate to your portal -->Edit Portal --> settings --> select skyrose skin from skin selection.

2. write a custom skin class and apply to navigation pane component.

I would recommend 2nd option.So this change will not impact other components

Thanks,

DM 

User_QUFP4

Thanks for your reply!

I got the tab and evrything worked.. but when I click on the tab, I am trying to change the background color of the tab and the color of the link.

af|navigationPane-tabs::tab af|navigationPane-tabs::tab-link:active

{

    color:White;

    background-Color: #336699;

    white-space:nowrap;

}

af|navigationPane-tabs::tab af|navigationPane-tabs::tab-content:active

{

    color:White;

    background-Color: #336699;

    white-space:nowrap;

}

But from this CSS, When I click on the tab-link, the color is getting changed but just during the click.

It is again reverting back to the original background color and link color.

How to check if the tab is selected/active and make the active tab background color and link color be there till the user switches tab.

Thanks as always!

User_QUFP4

And I'm using 12c.

Dinil Mithra

Please try below approach, which has ppr navigation instead of full page refresh.

<f:facet name="nodeStamp">

     <af:commandNavigationItem text="#{node2.title}" id="pt_cni2" action="pprnav" actionListener="#{navigationContext.processAction}">

            <f:attribute name="node" value="#{node2}"/>

     </af:commandNavigationItem>

</f:facet>

Regards,

DM

User_QUFP4

I tried to use pprnav but still not getting the CSS..

This is my template code to get the tabs -

       <af:navigationPane id="np2" value="#{boilerBean.navigationModelPath == null ? navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false'] : navigationContext.navigationModel[modelPath=boilerBean.navigationModelPath].listModel['startNode=/, includeStartNode=false']}" var="node4" hint="tabs"

                                  level="0"  >

             

               <f:facet name="nodeStamp">

           <af:commandNavigationItem text="#{node4.title}"

                                         id="cnitem2" action="pprnav" actionListener="#{navigationContext.processAction}">

                                         <f:attribute name="node"

                                                      value="#{node4.childCount > 0  ? node4.childByIndex[0] : node4}"/>

                                         </af:commandNavigationItem>

                                         

   

               </f:facet>

              </af:navigationPane>

I tried to use the inlineStyle option here in commandNavigationItem but still not getting this style.

Eg : inlineStyle="Color:Black;background-color:blue;" but still not getting the tabs with these colors.

Please advise.

Thanks as always!

User_QUFP4

Is there any bug in navigationPane - tabs - Oracle 12c.?

This is the tmeplate code -

               <af:navigationPane id="np2" value="#{navigationContext.defaultNavigationModel.rootNode.children}" var="node4" hint="tabs"

                                  level="0"  >

             

               <f:facet name="nodeStamp">

                      <af:commandNavigationItem text="#{node4.title}"

                                         id="cnitem2" action="pprnav" actionListener="#{navigationContext.processAction}" 

                                                inlineStyle="background-color:#{node4.selected ? 'Red' : 'Yellow'};">

                                                <f:attribute name="node" value="#{node4}"/>

                      </af:commandNavigationItem>

              

                </f:facet>

              </af:navigationPane>

Removed all the skinning for af|navigationPane-tabs in .css file..

Got the page like this -

The red color background is coming and when I select Page1, the red color dot is coming in Page1 Tab..

How to get the background color for the whole tab?

Thanks as always!