Forum Stats

  • 3,875,729 Users
  • 2,266,956 Discussions
  • 7,912,321 Comments

Discussions

Navigation Pane - Display Content

User_QUFP4
User_QUFP4 Member Posts: 176 Red Ribbon
edited Mar 20, 2018 12:21AM in WebCenter Portal

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

Best Answer

  • User_QUFP4
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Mar 19, 2018 10:41PM Answer ✓

    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!

«1

Answers

  • Dinil Mithra
    Dinil Mithra Member Posts: 351 Bronze Badge
    edited Feb 2, 2018 11:41PM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Feb 5, 2018 10:14AM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Feb 5, 2018 10:32AM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Feb 5, 2018 4:54PM

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

    pastedImage_0.png

    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
    Dinil Mithra Member Posts: 351 Bronze Badge
    edited Feb 5, 2018 10:27PM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Mar 18, 2018 8:47AM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Mar 18, 2018 8:48AM

    And I'm using 12c.

  • Dinil Mithra
    Dinil Mithra Member Posts: 351 Bronze Badge
    edited Mar 19, 2018 4:41AM

    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
  • User_QUFP4
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Mar 19, 2018 10:56AM

    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
    User_QUFP4 Member Posts: 176 Red Ribbon
    edited Mar 19, 2018 2:15PM

    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 -

    pastedImage_7.png

    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!

This discussion has been closed.