Vertical panelTabbed component

Hi all,
Is it possible to arrange ShowDetailItems inside a PanelTabbed component in vertical order. The default is horizontal. Is there a work around to make it appear in vertical order.
Im using Jdev 11.1.1.3.0
Thanks in advance.
Surangi.

I'd like to extend this question and ask if anyone has implemented vertically stacked auxiliary links as seen at the bottom of the Page Layout section of the RCUX guidelines (http://stux.us.oracle.com/blafstaging/blafPlus/VisualDesign/Shepherd/pageLayout_P_SSI.html) ?

Similar Messages

  • Panel Stretch Layout is not a valid child of PanelTabbed Component

    With reference to the use case shown here(' [Table with Header Left,Footer Right|http://www.oracle.com/technetwork/testcontent/thlfrpattern-083015.html] ") :
    I tried to embed the table inside the tabbed pane.
    Here is the code for the same:
    <f:view>
    <af:document id="d1">
    <af:form id="f1">
    <af:panelSplitter id="ps1" orientation="vertical" splitterPosition="47">
    <f:facet name="first"/>
    <f:facet name="second">
    <af:panelSplitter id="ps2" splitterPosition="144">
    <f:facet name="second">
    <af:panelTabbed id="pt1">
    <!---- point of error here i get the error message ---------->
    <af:showDetailItem text="Embedded in a Tab" id="sdi1"/>
    <af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
    <f:facet name="bottom">
    <af:panelStretchLayout id="psl2" endWidth="103em">
    <f:facet name="end">
    <af:panelGroupLayout id="pgl2" valign="middle" halign="end" layout="horizontal" >
    <af:commandButton text="Save" id="cb1" accessKey="S"/>
    <af:commandButton text="Cancel" id="cb2" accessKey="C"/>
    <af:spacer width="6" height="31" id="s2"/>
    </af:panelGroupLayout>
    </f:facet>
    </af:panelStretchLayout>
    </f:facet>
    <f:facet name="center">
    <!-- here the table will be displayed i have omitted the code from here------->
    </f:facet>
    <f:facet name="top">
    <af:panelGroupLayout id="pgl1" layout="horizontal">
    <af:spacer width="6em" height="31em" id="s1"/>
    <af:image source="/coffee.bmp" shortDesc="demo icon" id="i1"/>
    <af:outputText value="List of Cool Employees" id="ot1"
    inlineStyle="color:Black; font-weight:bold; font-size:large;"/>
    </af:panelGroupLayout>
    </f:facet>
    </af:panelStretchLayout>
    </af:panelTabbed>
    </f:facet>
    </af:panelSplitter>
    </f:facet>
    </af:panelSplitter>
    </af:form>
    </af:document>
    </f:view>
    Inside the PanelTabbed Component I cannot insert the PanelStretchLayout component.
    The error it is displaying is that the Panel Stretch Layout is not a valid child of the PanelTabbed Component.
    Please let me know how can I embed the 'Table with Header Left,Footer Right' in case of a PanelTabbed Component as shown in the use case in the documentation.

    Hi,
    Yes, children of af:panelTabbed must be af:showDetailItem - these represent each tab. You then add further components (e.g. your panelStretch, table etc.) as children to the af:showDetailItem.
    Looking at your code, you have a showDetailItem but the panelStretch is not inside it. In fact nothing is inside the showDetailItem as the XML tag is self-closed (i.e. has a / at the end). You need to remove the / and add a closing tag (</af:showDetailItem) after your panelStretch.
    Change your code to something like this:
    <af:panelTabbed id="pt1">
      <af:showDetailItem text="Embedded in a Tab" id="sdi1">
        <af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
        </af:panelStretchLayout>
      </af:showDetailItem>
    </af:panelTabbed>Alternatively in the JDeveloper Structure view you could drag the panelStretch onto the showDetailItem so that it shows it as a child.
    Kevin.

  • Apply custom style to the first tab of af|panelTab component

    Hi,
    Could anyone please advice me how to apply custom style to the first and last tabs of af|panelTab component.
    For eg- If I have 6 tabs and I want tab1 and tab6 to be in Red and rest of the tabs in blue, what should I add. Please advice.
    Regards
    Jeffry Roy
    Edited by: Jeffry on Mar 8, 2011 4:45 AM

    Hi Rishit,
    Please let me know if you have applied Fix pacK3 for Xcelsius.
    I have seen this issue in FP2, which got fixed in FP3. The workaround you can try is including a blank cell.
    Thanks,
    Amit.

  • Unable to switch between Tabs in a af:panelTabbed component

    Hi all,
    Good Day,
    I am working on a POC which has 6 tabs in an af:panelTabbed component. All the tabs (af:showDetailItem components) are with the default properties.
    While running the application it is working fine till one or two tab clicks but after clicking on 1 or 2 tabs , with the next tab click the application seems to be not responding
    and I am getting the below error in the server logs.
    *<UIXShowDetail> <broadcast> Event org.apache.myfaces.trinidad.event.DisclosureEvent[phaseId=INVOKE_APPLICATION 5,component=RichShowDetailItem[UINodeFacesBean, id=sdi4],expanded=true] was delivered to a showDetail already in that disclosure state.*
    I am not sure what would have gone wrong. Please help me in this.
    Thanks In Advance.

    Hi paramu,
    Thanks for your help. I haven't created bindigs for af:showDetailItem.
    and in each tab I have created some tables from datasource and Name of each tab is different.
    Regards
    Phanindra.

  • Dynamic Tabs using the PanelTabbed component

    I would like to use the PanelTabbed component which is bound to a managed bean to render tabs dynamically. The page will simply consist of a navigationTree on the left and the panelTabbed on the right. When the user clicks a node in the tree I would like to PPR the panelTabbed component to display the new tab. If you know of any examples or could point me in the right direction it would be greatly appreciated!
    Thanks,
    Matt

    Hello Matt,
    panelTabbed won't do for that, you're going to need navigationPane using "tabs" hint. The navigationPane should have a partialTriggers on the tree and its value should be a custom MenuModel instance that get populated from click made on the tree.
    It's not overwhelming, but I fear there's some complexity in achieving what you want.
    Regards,
    ~ Simon

  • Increase height of panelTabbed component

    hi,
    I wanted to increase the height of panelTabbed component using css. what is d class that i have to use ?

    Or you have to skin the richShowDetailItem inside
    Are you sure you want to do that? Usually you should just put it in some stretchning layout.

  • Stretching af:panelTabbed component

    Hi All,
    i am having a af:panelTabbed which contains 3 tabs the middle tab's width is quite large as it contains a table and also the height becaule it have table as well as form under it.
    I have applied styleClass="AFStretchWidth" to the af:panelTabbed but it only stretches the width of the tab but ont height.
    So how can i stretch the height as well as width of tabs...
    -Thanks.

    In the af:showDetailItem set the property StretchChildren to true...this should do it.
    Regards
    Grant Ronald
    Author: Quickstart Guide to Fusion Development Oracle JDeveloper Oracle ADF

  • Is there any component like Panel Accordian but vertical

    Hi,
    Can I create panel accordian vertically or different tabs in single show detail component of panel accordian ?
    regards,
    devang

    Hi,
    accordian is with horizontal headers only. You can have a paneltab component as a child of an accordian.
    Frank

  • Vertical Menu Bar Component

    Hi,
    I would need to deploy some kind of component as a menu bar but on vertical position. I have found a very interesting component on FlexLib library (see http://flexlib.googlecode.com/svn/trunk/examples/VerticalMenuBar/VerticalMenu_Sample.swf) developed by Doug Mc Cune (see at http://dougmccune.com/blog/2007/01/25/vertical-menubar-component/). Unfortunately the code does not run properly on Flex 3, and in spite of tracing the source code I'm not able to find but is wrong (I have attached it there if someone wants to take a glance of it).
    Has someone been able to fix this issue or developing some kind of component that may be re-used?
    Thanks

    OK just managed to resolve the ftp issue. Bit tricky as our
    old (average) website is still on the same server.
    Anyway please check this link.
    http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
    As you can see it works fine in FF but not in IE7. The child
    sub menus keep appearing at the top of the vertical menu
    bar.

  • PanelTabbed height issue

    The default height for a PanelTabbed component I believe is 300px. I would prefer that it default to the height of its contents.
    In my case the contents for any given tab can vary. Some may need the height to be only 200px, while others may need the height to be 1000px. Therefore a hardcoded value is not an option. I'm trying to avoid all the wasted white space between the bottom of the panelTabbed component and any other component underneath it.
    Here's a sample of my code:
    <af:panelGroupLayout layout="vertical" id="pgl1">
    <af:panelTabbed id="myPanelTab">
    <af:showDetailItem text="tab 1" id="tab1">
    <af:panelGroupLayout id="pgl2" layout="vertical">
    <af:outputText value="Line 1.1" id="ot2"/>
    <af:spacer height="10px;" id="s1"/>
    <af:outputText value="Line 1.2" id="ot1"/>
    </af:panelGroupLayout>
    </af:showDetailItem>
    <af:showDetailItem text="tab 2" id="tab2">
    <af:panelGroupLayout id="pgl3" layout="vertical">
    <af:outputText value="Line 2.1" id="ot3"/>
    </af:panelGroupLayout>
    </af:showDetailItem>
    </af:panelTabbed>
    <af:outputText value="This is a message on the bottom." id="ot4"/>
    </af:panelGroupLayout>
    Edited by: UI Tex on Jul 6, 2011 8:13 AM

    That didn't work.
    Here's my code with your suggestion:
    <af:panelGroupLayout layout="vertical" id="pgl1">
    <af:panelStretchLayout id="psl1">
    <f:facet name="center">
    <af:panelTabbed id="myPanelTab">
    <af:showDetailItem text="tab 1" id="tab1">
    <af:panelGroupLayout id="pgl2" layout="vertical">
    <af:outputText value="Line 1.1" id="ot2"/>
    <af:spacer height="10px;" id="s1"/>
    <af:outputText value="Line 1.2" id="ot1"/>
    </af:panelGroupLayout>
    </af:showDetailItem>
    <af:showDetailItem text="tab 2" id="tab2">
    <af:panelGroupLayout id="pgl3" layout="vertical">
    <af:outputText value="Line 2.1" id="ot3"/>
    </af:panelGroupLayout>
    </af:showDetailItem>
    </af:panelTabbed>
    </f:facet>
    <f:facet name="bottom">
    <af:outputText value="This is a message on the bottom." id="ot4"/>
    </f:facet>
    </af:panelStretchLayout>
    </af:panelGroupLayout>

  • Help sizing panelTabbed components - how do I get it to 100% height

    firefox 2.0.0.4
    Is there any trick to getting a panelTabbed component to size itself (height and width) smartly? By default it always seems to be approx 200 pixels by 200 pixels, even if its children are bigger and even if I add my panelTabbed to a panelStretchLayout.
    When I try to force the height of my panelTabbed to 100%, I get wierd results. For instance, the entire panelTabbed component disappears (I can't find it in my browser, almost as if the height gets set to zero).
    When I look at the FusionOrderDemo home.jspx example, it looks like the author is hardcoding the panelTabs as a fixed height in pixels.
    Has anyone figured out any tricks for getting panelTabbed componets to use a % of the screen?
    I want to have a way that my panelTabbed component takes up as much space as my browser allows.
    Thanks,
    dave

    This is the code for the page:
    <af:form>
    <af:panelGroupLayout inlineStyle="position:absolute">
    <af:table value="#{bindings.EmployeeView1.collectionModel}" var="row"
    rows="#{bindings.EmployeeView1.rangeSize}"
    first="#{bindings.EmployeeView1.rangeStart}"
    emptyText="#{bindings.EmployeeView1.viewable ? 'No rows yet.' : 'Access Denied.'}"
    fetchSize="#{bindings.EmployeeView1.rangeSize}"
    inlineStyle="width:100%; height:100%;">
    <af:column sortProperty="EmpId" sortable="false"
    headerText="#{bindings.EmployeeView1.hints.EmpId.label}">
    <af:outputText value="#{row.EmpId}">
    <af:convertNumber groupingUsed="false"
    pattern="#{bindings.EmployeeView1.hints.EmpId.format}"/>
    </af:outputText>
    </af:column>
    <af:column sortProperty="FName" sortable="false"
    headerText="#{bindings.EmployeeView1.hints.FName.label}">
    <af:outputText value="#{row.FName}"/>
    </af:column>
    <af:column sortProperty="LName" sortable="false"
    headerText="#{bindings.EmployeeView1.hints.LName.label}">
    <af:outputText value="#{row.LName}"/>
    </af:column>
    </af:table>
    </af:panelGroupLayout>
    </af:form>
    Well this is not the scenario I’m looking for, what I need to do is to place a table inside of a panel group and that panel group to be inside a panel splitter, actually the table shows up fine, but I just need to remove the box that surround it i.e the table size to fit with the surrounding box. So when I set the table width & height to 100% the table rows are not shown.

  • Paneltab always remember user prev selection but not programmatic disclosed

    Hi,
    Like the similar post Programmatic disclosure of showDetailItem under panelTabbed i would like the tab to be selected / disclosed based on the button the user click.
    I have a paneltabbed component in a page called site which consists of 3 showdetailframe components ..let's call it as (tab1,tab2,tab3) . I have a button (go to site) in entirely different page called plot which should navigate to site page and open tab3 by default.
    This works fine, for the first time. But let's say if user explictly clicked tab2 and then gone to plot page, click GoToSite button which navigates to Site page, but remembers the last selection user has made and selecting tab2 by default.
    I have the following method in site page taskflow which is called always and evaluates the value which i set in the request scope on clicking GoToSite button.
         public void setCopyPlotTabOnSiteDetails()
              FacesContext context = FacesContext.getCurrentInstance();
              Map request = context.getCurrentInstance().getExternalContext().getRequestMap();
              Boolean copyPlotFlag = (Boolean)request.get("copyPlotReq");
              if (Boolean.TRUE.equals(copyPlotFlag) && panelTab != null)
                   List<UIComponent> element = panelTab.getChildren();
                   for (UIComponent child : element)
                        RichShowDetailItem sdi = (RichShowDetailItem)child;
                        if ("sdi2".equals(sdi.getId()))
                             sdi.setDisclosed(true);
                             _addAttributeChange(sdi, "disclosed", true);
                        AdfFacesContext.getCurrentInstance().addPartialTarget(sdi);
                        else
                        sdi.setDisclosed(false);
                        _addAttributeChange(sdi, "disclosed", false);     
                        AdfFacesContext.getCurrentInstance().addPartialTarget(sdi);
              AdfFacesContext.getCurrentInstance().addPartialTarget(siteDetails);
                   AdfFacesContext.getCurrentInstance().addPartialTarget(panelTab);
    After following the post Programmatic disclosure of showDetailItem under panelTabbed i added this method call addAttributeChange
         private static void _addAttributeChange(UIComponent uic, String attribName,
                                                           Object attribValue) {
              try
                   FacesContext fc = FacesContext.getCurrentInstance();
                   ChangeManager cm = RequestContext.getCurrentInstance().getChangeManager();
                   ComponentChange cc = new AttributeComponentChange(attribName, attribValue);
                   cm.addComponentChange(fc, uic, cc);
              catch (Exception e)
                   // TODO: Add catch code
                   e.printStackTrace();
    But is giving NullPointerException on ChangeManager.
    Even otherwise, i have removed the option Enable User Customizations from my View Project (checked in web.xml) and removed the ShowDetailFrame tag in Adf-config.xml. Put the disclosed property in DontPersist attribute of all those showdetail frame components. But nothing worked, i face the same issues...Can any one please help me?
    Regards
    Prabhu

    Hi,
    why do you work so cmplicated. Wouldn't it be simpler to point the disclosed property to a managed bean that then evaluates whether true/false should be returned instead of parsing the component tree? The managed bean would need to be in viewScope. Also note that a request parameter should be read by a pahse listener (f:view afterMethod listening to RESTORE_VIEW) because the ADF Faces page is not rendered in a single round trip but deferred by default which means that subsequent requests are issued. So the first request will be intercepted and then the value added to a bean or attribute in view scope for use by the tabs.
    Another cause of error we frequently see is that personalization is enabled (with or witjout MDS) in which case the tab selection is saved as personalizes setting.
    Also have a look at: http://docs.oracle.com/cd/E23943_01/apirefs.1111/e12419/tagdoc/af_showDetailItem.html
    See: disclosedTransient and disclosed property and how to use them
    Frank

  • Component refresh from region

    Hi All,
    I am using JDeveloper 11.1.1.6.0.
    I have created my ADF page having panelTabbed component (it is not a template). in each tabs, i have dragged other task flows as regions. I have a outputText on the page, which should be refreshing from a button click inside the region.
    How do i achieve that?
    below is the code
    <?xml version='1.0' encoding='windows-1252'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
              xmlns:f="http://java.sun.com/jsf/core">
       <af:pageTemplate viewId="/OverviewTemplate.jspx" id="OverviewTemplate">
          <f:facet name="userOverview">
             <af:panelStretchLayout id="psl1" styleClass="AFStretchWidth">
                <f:facet name="center">
                   <af:panelTabbed id="pannelTabbedOverview"
                                   binding="#{userBean.panelTabbed}">
                      <af:showDetailItem text="Overview" id="showDetailItem1"
                                         stretchChildren="first"
                                         binding="#{userBean.overviewTab}">
                         <af:panelStretchLayout id="overviewtabPSL" topHeight="25px">
                            <f:facet name="center">
                               <af:region value="#{bindings.overviewtaskflow1.regionModel}" id="r1"/>
                            </f:facet>
                         </af:panelStretchLayout>
                      </af:showDetailItem>
                   </af:panelTabbed>
                </f:facet>
                <f:facet name="top">
                   <af:panelBox text="PanelBox1" id="pt_pb1" styleClass="AFStretchWidth">
                            <af:outputFormatted value="#{bindings.userStatus.inputValue}" id="pt_of1"/>
                   </af:panelBox>
                </f:facet>
             </af:panelStretchLayout>
          </f:facet>
       </af:pageTemplate>
    </jsp:root>Here i want to refresh the userStatus value from a button which is inside overflowtaskflow1 region. Please help me out.
    regards,
    Rajan

    set partial triggers to your outputFormatted component as similar to below example...
    partialTriggers="r1:<btn-id>"Since some of the ADF components are naming-container (while generating IDs for child, their presence is considered by appending ID) ... so select r1 from Jdev's partial trigger selection window...and rest of the string you can get from the jsff page in your TF and append both with ":"
    1. Say Jdev shows r1 reference as ":::r1"
    2. Your btn reference inside TF from top component is "pt1:t1:btn1"
    so your partial trigger would become 1+":"+2 = ":::r1:pt1:t1:btn1"
    This is just an example, you might have to compute your strings for ppr.

  • Get disclosed showDetailItem [panelTabbed] when page renders

    Hello,
    My Jdev version is 11.1.1.6.
    I have a page where there are many showDetailItem under panelTabbed component at different levels.
    These showDetailItems are showing regions implemented as bounded taskflow using fragments. I am controlling taskflow activation logic using a pageFlowScope variable setting the value using something like this:
    <af:setPropertyListener from="tabLevel1"
                            to="#{pageFlowScope.TabLevel1}"
                            type="disclosure"/>Similarly other tabs are sharing variables as pageFlowScope.TabLevel2, pageFlowScope.TabLevel3...
    When the page renders first time, the value of pageScope variable is not set, since no disclosure listener is fired yet. I can not assume to activate the first Tab's taskflow since user may not have access [authorization] to first tab and in that case, it is not rendered at all.
    My problem is - How to figure out which tab is the first rendered tab at each level?
    Is there a way to capture which tab is disclosed under each panelTabbed component? I can then do something like setting the pageFlowScope variable for that level. My tabs are fixed at design time, so I can hard code showDetailItem's component Id to check/set.
    I tried binding panelTabbed in a bean and then try to iterate through it's children but it returns 0 children when page is rendered first time.
    So apparently, I am stuck and don't know how to proceed on this. Any help is highly appreciated.
    Thanks,
    Jai

    Hello,
    Thanks for your response.
    We are already using UIShell in our application. It is based on One-Page application concept.
    Menu is opening the pages in dynamic tabs supported by UIShell.
    The page has it's own tabs (showDetailItem under panelTabbed) defined at design time. I need to control activation of taskflows only when they are open.
    It works fine after user starts interacting with the tabs as disclosureListener is fired but first time is an issue.
    I need a solution to figure out the "open" tab at each level. Obviously, it's too late to change the design/navigation architecture of whole application.
    Thanks,
    Jai

  • PanelTabbed auto height problem

    Hey guys,
    i want to know how to set auto height for panelTabbed componant to make it stretch in height depending on the content on it.
    i tried it by css but it doesnt work.
    waiting for your support guys thanks :)

    Normally, panelTabbed has a showDetailItem as its direct child,Try to set the stretchChildrento First and check if this meets your requirement.
    <af:panelTabbed id="pt1">
        <af:showDetailItem text="showDetailItem 1" id="sdi1" stretchChildren="first"/>
      </af:panelTabbed>

Maybe you are looking for