Accordian Panel "Tab Name" Question

Hi.
I have a collapsible panel that when closed the name of the tab is "Read more".
How can I change that to lets say "Collapse" when the panel is open?
tx
G

G'day Mate (Aussi slang for goeie dag boet)
Try the following
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Click to <span id="col1">Close</span></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="2">Click to <span id="col2">Close</span></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="3">Click to <span id="col3">Close</span></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script>
function MyCol1EventHandler(e) {
    if (document.getElementById('col1').innerHTML == 'Open') {
        document.getElementById('col1').innerHTML = 'Close';
    } else {
        document.getElementById('col1').innerHTML = 'Open';
    return false;
function MyCol2EventHandler(e) {
    if (document.getElementById('col2').innerHTML == 'Open') {
        document.getElementById('col2').innerHTML = 'Close';
    } else {
        document.getElementById('col2').innerHTML = 'Open';
    return false;
function MyCol3EventHandler(e) {
    if (document.getElementById('col3').innerHTML == 'Open') {
        document.getElementById('col3').innerHTML = 'Close';
    } else {
        document.getElementById('col3').innerHTML = 'Open';
    return false;
Spry.$$(".CollapsiblePanelTab[tabindex='1']").addEventListener("click", MyCol1EventHandler, false);
Spry.$$(".CollapsiblePanelTab[tabindex='2']").addEventListener("click", MyCol2EventHandler, false);
Spry.$$(".CollapsiblePanelTab[tabindex='3']").addEventListener("click", MyCol3EventHandler, false);
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
</script>
</body>
</html>
Gramps (no longer Grumps)

Similar Messages

Panel Tab as Link only (no content) in Accordian Widget?

Is there a way for panel tabs that have no content to
a) Close any other open panels when clicked
b) Act as link of their own (they will navigate to separate html page rather than open accordian panel) and
c) show active state when clicked
I would be wanted 'Label 2' of the follwing panel to be a link to an external page, whereupon i will set that panel tab to be default active when they land there.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 3</div>
    <div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 4</div>
    <div class="AccordionPanelContent">Content 4</div>
</div>
</div>
Hope i've made sense....
Thanks in advance of anyone's help/advice (I ammeanwhile scouring the forums on the web).
ccesca

Why not?
Be sure you have not set a height for the panel content, or you will end up with a normal tab with a blank content panel falling below it.
I've never tried creating an accordion that had a tab completely without a content area, but that might work.
So, put a link on your tab text and see if it functions the way you want.
Regarding the Show active state when clicked, examine the accordion CSS file and fiddle around with things to change. It is likely that it is already set up to do that.
Beth

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

.js update of spry accordion panel tab data for countdown functionality

Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!

Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.

How to open a panel tabbed window using a button present in the same page

below is my jspx page where i have two buttons and two panel tabs. I want to open respective panel tabs using respective buttons:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" binding="#{backing_pages_bb.d1}">
<af:form id="f1" binding="#{backing_pages_bb.f1}">
<af:panelStretchLayout binding="#{backing_pages_bb.psl1}" id="psl1">
<f:facet name="bottom"/>
<f:facet name="center">
<af:panelTabbed binding="#{backing_pages_bb.pt1}" id="pt1">
<af:showDetailItem text="first"
binding="#{backing_pages_bb.sdi1}" id="sdi1"/>
<af:showDetailItem text="second"
binding="#{backing_pages_bb.sdi2}" id="sdi2"
rendered="true" disclosed="false"/>
</af:panelTabbed>
</f:facet>
<f:facet name="start"/>
<f:facet name="end"/>
<f:facet name="top">
<af:panelGroupLayout binding="#{backing_pages_bb.pgl1}" id="pgl1">
<af:commandButton text="first"
binding="#{backing_pages_bb.cb1}" id="cb1"
action="#{backing_pages_bb.cb1_action}"/>
<af:commandButton text="second"
binding="#{backing_pages_bb.cb2}" id="cb2"
action="#{backing_pages_bb.cb2_action}"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>

</jsp:root>
below is the backing bean created for the jspx page:
package view.backing.pages;
import javax.faces.component.UIComponent;
import oracle.adf.view.rich.component.rich.RichDocument;
import oracle.adf.view.rich.component.rich.RichForm;
import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
import oracle.adf.view.rich.component.rich.layout.RichPanelStretchLayout;
import oracle.adf.view.rich.component.rich.layout.RichPanelTabbed;
import oracle.adf.view.rich.component.rich.layout.RichShowDetailItem;
import oracle.adf.view.rich.component.rich.nav.RichCommandButton;
public class Bb {
private RichForm f1;
private RichDocument d1;
private RichPanelStretchLayout psl1;
private RichPanelGroupLayout pgl1;
private RichCommandButton cb1;
private RichCommandButton cb2;
private RichPanelTabbed pt1;
private RichShowDetailItem sdi1;
private RichShowDetailItem sdi2;
public void setF1(RichForm f1) {
this.f1 = f1;
public RichForm getF1() {
return f1;
public void setD1(RichDocument d1) {
this.d1 = d1;
public RichDocument getD1() {
return d1;
public void setPsl1(RichPanelStretchLayout psl1) {
this.psl1 = psl1;
public RichPanelStretchLayout getPsl1() {
return psl1;
public void setPgl1(RichPanelGroupLayout pgl1) {
this.pgl1 = pgl1;
public RichPanelGroupLayout getPgl1() {
return pgl1;
public void setCb1(RichCommandButton cb1) {
this.cb1 = cb1;
public RichCommandButton getCb1() {
return cb1;
public void setCb2(RichCommandButton cb2) {
this.cb2 = cb2;
public RichCommandButton getCb2() {
return cb2;
public void setPt1(RichPanelTabbed pt1) {
this.pt1 = pt1;
public RichPanelTabbed getPt1() {
return pt1;
public void setSdi1(RichShowDetailItem sdi1) {
this.sdi1 = sdi1;
public RichShowDetailItem getSdi1() {
return sdi1;
public void setSdi2(RichShowDetailItem sdi2) {
this.sdi2 = sdi2;
public RichShowDetailItem getSdi2() {
return sdi2;
public String cb1_action() {
// Add event code here...
return null;
public String cb2_action() {
// Add event code here...
return null;
Wat method has to be coded inside cb1_action and cb2_action so that respective panels are opened.
thank u for ur help in advance.

Hi,
If the data need to be passed is large, consider using Shared Memeory Objects: Check this doc for reference: How to pass data from ABAP to Web Dynpro ABAP
Hope this helps u,
Regards,
Kiran

Why does right-click & "Open Link in New Tab" make the original tab name to change to "New Tab" when I back-arrow in the original tab to reach the original page

I use Google as my home page.
When I do a search in Google I have a practice of opening the search links in a new tab by right-clicking on the link and selecting "Open Link in New Tab". That way I can examine multiple links from the search page, which is now open in the first tab.
The problem that occurs is that when I use the back-arrow in the Navagation bar to return the first tab to its original page, I find the tab name of the original page to be "New Tab" rather than "Google" and I have to click on the "Reload current page" in the Navigation bar to return the tab name to "Google".
I'm using Firefox-25 on a Linux-Mint 64-bit platform with KDE-4.9.5.

The problem is just with the name of the tab, not with the contents of the page -- the page looks normal??
I ask about the page because Firefox 23 seems to have introduced a problem with Firefox's "fast back-forward cache" on the Google search results page. It is related to the "instant prediction results" feature interacting with Firefox is some different way. (More in this thread: [https://support.mozilla.org/en-US/questions/970863?page=2#answer-485663])
Might be related. Not sure.

Getting tab name or tab id or tab label at runtime

Hi All,
I think the answer is "no" but I'm going to ask anyway just in case I missed something.
I am designing some authorization schemes for my application. The context behind the design is this:
1. Two-level tabs application.
2. Access is stored in a table where an assignment between a level 2 tab is assigned to a user (well, it's really assigned to groups of users but that's not that important for this question). The level 2 tab is assigned via a select-list LOV defined as:
select
tab_label d,
tab_id r
from apex_application_tabs
where application_id = :APP_ID
and workspace = :OWNER
order by 1
So I store the TAB_ID of the 2nd level tab and it's assigned to groups of users.
So what I'd like is this at runtime:
1. For page-level security, I read the Apex data dictionary and pass APP_PAGE_ID to a function that reads the page number. I traverse the tab hierarchy in APEX_APPLICATION_TABS to see if the APP_PAGE_ID resides in TAB_PAGE or TAB_ALSO_CURRENT_FOR_PAGES to get the TAB_ID. Then I check my own assignment table to see if that TAB_ID is accessible to the user. If so, return TRUE, else, return FALSE. This is working wonderfully and isn't a problem...at runtime if I navigate to a page that is on a 2nd level tab and I don't have access to the page, the security scheme errors (correctly).
2. For tab-level security, I want that at the parent tab level that if the user has access to one or more of the 2nd level child tabs, display the parent tab.
3. For tab-level security, if the user is on a parent tab (because he/she has access to at least one child tab), only show the child tabs to which they have access.
Now the problem(s). The thing is that the user sees the tabs before they navigate to them (#2 and #3 I don't have working right now) and I want to hide them if they don't have access.
For example, let's say my parent tabs are A, B, and C. Child tabs are A1, A2, A3 underneath A. B1, B2, B3 underneath B. C1, C2, and C3 underneath C.
Let's say everything in A and underneath A (so A1, A2, and A3) are available to anyone who has a login to the application. No problem there.
Then, let's say most or all users have access to B1 but fewer users have access to B2 and B3. What I want is that if anything from B is available to a user, show parent tab B. If the user clicks on parent tab B, then show B1, B2, and B3 but only show the tabs to which they have access (so if they have access to B1 and B2 but not B3, do not display B3).
Then, let's say C is a very powerful administrative tab and very few people have access to it. I want to not-show C at all for people who do not have any access to C1, C2, or C3.
The problem I have at runtime is that I cannot find a way for a tab to pass information about itself when the tab is about to paint (or not-paint). The only variable or substitution string at runtime that I can find to reference about a tab is "CURRENT_PARENT_TAB_TEXT". However this gives me only information about the parent tab's text of the parent tab that has focus right now; each parent tab cannot pass it's own info until I navigate there. I need to get that information w/o navigating to the tab first so that I can determine to show/hide the tab. Does that make sense? In other words, at runtime, I log into the system and let's say I'm not very powerful and should only be on tabs A1, A2, and A3 under A. I log in, I land on A1, and I can see A2 and A3 (good), but also I can see parent tabs B and C poking up there too. CURRENT_PARENT_TAB_TEXT does not resolve to B or C (it currently resolves to A) until I actually try to click on B or C. I need to hide B or C before the user clicks.
Yes I can do it if I hard-code the name of the tab in a security boolean function, but I would have to have as many authorization schemes as I have tabs. This is why I want just one tab-level scheme where I pass the tab name or ID at runtime dynamically but I can't seem to reference it.
Over in the template for two-level tabls I see #TAB_LABEL#, #TAB_NAME#, #TAB_ID#, and #TAB_LINK#. These don't seem to be available to PL/SQL to pass at runtime to a PL/SQL function. If they could, this would be my answer.
Any other options or am I stuck on this one?
BTW...we are on version 3.2 of Apex and going to version 4 soon. If something is available in 4 for this that helps, I can do it then.
Ideas? Thanks!

Hey gti_matt,
Did you end up getting anywhere with this?
I'm in the same boat atm...
Thanks,
Dan

Tabs without using panel tabbed

i have to create a page with multiple tabs on top of the page without using panel tabbed, since multiple users cannot work in panel tabbed.
i have created fragments for indivudual tabs.
included fragments in a bounded task flow. connected all fragments to wildcard control flow.
used a jsff with command menu items in top of the page in a pgl.
below this, i dropped task flow as region where i would like jsff to be displayed depending on command menu item selected on top.
specified command menu item action property as name of control flow case connecting wild card to individual jsffs used in page.
Navigation is not working from one to another jsff on clicking command menu item on top.
what is wrong with this approach.
jdev 11.1.1.5

it would be easier for multiple people to work on different page fragments as with panel tabbed it would be single jspx.
i m focusing on how to achieve navigation using fragments in a region and command menu items or command navigation items at the top.

Panel tabbed is not working in the page fragments used in a bounded task fl

Hi,
I tried creating a simple page fragment with a panel tabbed as below
<?xml version='1.0' encoding='UTF-8'?>
<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:panelStretchLayout id="psl1">
<f:facet name="center">
<af:panelTabbed id="pt1">
<af:showDetailItem text="showDetailItem 1" id="sdi1"/>
<af:showDetailItem text="showDetailItem 2" id="sdi2"/>
<af:showDetailItem text="showDetailItem 3" id="sdi3"/>
</af:panelTabbed>

</f:facet>
</af:panelStretchLayout>
</jsp:root>
Then in an unbounded task flow, I added the bounded task flow which is just created above. when I run this page, the page is loaded but the tabs doesn't switch. When I click on the other tabs, it doesnt change, it is always active only in the first tab.
Is this a bug in adf, or am I missing something?
Can someone please help?
Thanks,
Sudarsan M

Hi Vinod,
Thanks for responding.
I want a page fragment with tabbedPanel to be loaded in my dynamic region. As I am facing this issue, I tried very simple example of creating a page fragment with a tabbedPanel of 3 tabs.
1. added this page fragment in an bounded task flow.
2. In the unbounded task flow(adfc-config.xml) added a view with the some jspx page and then added the bounded task flow created above as a static region in this jspx page.
3. When I run this view, I can see the page loaded with all the tabs in the page frament.
4. By default the first tab is selected, but when I tried to click on the other tabs, there is no response. It still stays in the first tab only.
Thanks,
Sudan

RE: How to set createInsert operation with panel tab

Hi all,
I am using Jdeveloper 11.1.2.3.0
Here i have one form and it contains two panel tabbed subDetailedItems called List and New.
I have table in List Tab and form in New Tab.
Now my requirement is if i select New tab then it has to display empty fields to enter new record.
Help me to resolve the issue.
Thanks,
Syam

Nitesh,
I understood the usecase. But my question was, what happens if the user clicks on the New tab (a new record gets created due to createInsert - but not committed), then go back to another tab and then click on New tab again (another new record gets created due to next createInsert). Now, if the user commits, after entering values, he would have 2 rows added to the table (one with blank values and next one with data). You should have to handle that as well.
-Arun

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Accordian Spry Tab link

I've successfully created an accordian spry menu in Dreamweaver CS4 but want to make the "AccordianPanelTab" a link as well. Currenly only the panel content will go to other pages.
On a different topic, can I force a content panel to be open when going to a page instead of the top panel (home) always being the one open?
Code below: I'm only including the code for the accordian panel. If you need the whole page, let me know.
<div class="container">
<div id="content-wrapper">
    <div id="secondary-content">
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="index.html">home</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="contact.html">contact us</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="whoweare.html">who we are</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="staff.html">management and staff</a></li>
           <li><a href="why360.html">why 360</a></li>
           <li><a href="testimonial.html">patient testimonitals</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="services.html">services</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="javascript:;">what we do</a></li>
            </ul>
          </div>
        </div>
<div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="clinics.html">clinic locations</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="lake_elmo.html">lake elmo/stillwater</a></li>
            <li><a href="wyoming.html">wyoming/forest lake</a></li>
            </ul>
          </div>
        </div>
<div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="patient_info.html">patient info</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="insurance.html">insurance and forms</a></li>
            <li><a href="homecare.html">home care</a></li>
            <li><a href="faq.html">faq</a></li>
            <li><a href="financial.html">financial options</a></li>
            </ul>
          </div>
        </div>
<div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="photos.html">photos</a></div>
          <div class="AccordionPanelContent">
          <ul>
           <li><a href="photos.html">before & after</a></li>
            </ul>
          </div>
        </div>
</div>
    </div>

Thank you sigmadog for your kind input. but this problem has a slight slant to the one that you discussed.
If the link on a tab is clicked then you will be directed to the linked page. Click on the tab away from the link and the accordion will open.
You must make up your mind what you want to do
if there are no submenu items then place the link on the tab and do not have any content.
if there are submenus, don't place a link on the tab, but place the links within the content
For instance a home page usually does not contain submenus so your markup will look like:
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="index" onclick="window.location = this.href">home</a></div>
        </div>
And the markup for an item with submenus will look like:
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">who we are</div>
          <div class="AccordionPanelContent">
            <ul>
              <li><a href="whoweare.html">who we are</a></li>
              <li><a href="staff.html">management and staff</a></li>
              <li><a href="why360.html">why 360</a></li>
              <li><a href="testimonial.html">patient testimonitals</a></li>
            </ul>
          </div>
        </div>
I hope this helps.
Ben

Including jspx page into Panel Tabbed !!

Hi all,
Jdeveloper 11g is really powerful ..
I want to create windows explorer interface which consists of two main areas:
First one represented as a tree and the second to show the details of the selected item in the tree. I want the detail area to be as tabbed so that multiple tabs can be seen at a time, I developed most of this issue.
Here is my question:
How to include a jspx page into one of the tabs (showDetailItem) created in the panel tabbed, I've tried <jsp:include> but it didn't work
Regards,
Bassam

not sure what you mean by Panel Tabbed, but you should be able to do something like the following so that when user clicks on a tab, the proper page will load:
<af:showOneTab binding="#{backing_bean.showOneTab1}"
id="showOneTab1" position="above">
<af:showDetailItem text="Tab Text"
binding="#{backing_bean.showDetailItem1}"
id="id"
disclosed="#{some evaluation}">

<f:subview id="positionHeader">
<jsp:include page="/Header.jspx"/>
</f:subview>
</af:showDetailItem>
</af:showOneTab>
the included jsp will need to be stripped of at least the <f:view> tag since it's being included in another page that will already have the <f:view> tag. Can't remember if there are other tags <afh:html>, <afh:body> which might need to be removed from the included jsp.

Spry accordian panel not closing

I have created a page using both the spry tabbed panels and
accordian panels. The accordian panels are in the content sections
of the tabbed ares. I want the accordian panels to be closed
initially, and whenever you click on the tab of the panel it will
open if it is closed, and close if it is open. I have modified the
code (as described in the Adobe Resource section) at the bottom of
the div. I got it to work on a simpler page (without the tabbed
panels) but I can't get it to close when click on if open. It will
close if another tab is clicked, but that isn't what I want. I'm
thinking it has something to do with the fact that it is in the
tabbed panels spry, or I am overlooking something. I am not very
verse in javascript, so I can't troubleshoot it. Can someone look
at the code and suggest a solution? The site is
http://www.capitolphotointeractive.com/test

Hi amilesslady,
You'll need to replace the version of the SpryAccordion.js
file on your site with a more recent one. You can get the the one
from Spry 1.6.1 here:
http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
Or you can download the Dreamweaver 1.6.1 updater and use it
to update the Spry related files in Dreamweaver and your sites.
http://download.macromedia.com/pub/labs/spry/1/spry_p1-6-1_updater_022508.mxp
--== Kin ==--.

Panel tabbed - selectionlistener

Hi,
I have panel tabbed layout with 2 tabs.
First tab has a table listing.
Second tab has the details(from VO2) for a particular row of the first tab listing from view VO1.
Need is how do I write a selection listener on the first tab table row so that it will show the
details in the second tab please?
Thanks

Hi,
1 question ...
does the details are from same table or from different table.. if from different table then you need to create a viewlink between 2 tables.
then create master table from master viewobject and detail(form or table... whateever) from detail view object.
i assume that you want to display the details from same table row, where detail is form or table.
just add the table as partialTriggers to the detail one, if detail then add it to panelFormLayout(any container) or to table
like
partialTrigger="table1"it will provide a wizard where you can navigate the component to add as partialTrigger.
Regards,
Santosh.
Edited by: Santosh Vaza on Aug 10, 2011 9:26 AM
Edited by: Santosh Vaza on Aug 10, 2011 9:26 AM

Accordian Panel "Tab Name" Question

Similar Messages

Maybe you are looking for