Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-03

# <af:showDetailItem>

af:showDetailItem showDetailItem show detail item

UIComponent class: oracle.adf.view.rich.component.rich.layout.RichShowDetailItem
Component type: oracle.adf.RichShowDetailItem

The showDetailItem component is used inside of a panelAccordion, panelTabbed or panelDrawer component to contain a group of children. It is identified visually by the the text and/or icon attribute values and lays out its children. Note the difference between "disclosed" and "rendered": if "rendered" is false, it means that this the accordion header bar or tab link and its corresponding contents are not available at all to the user, whereas if "disclosed" is false, it means that the contents of the item are not currently visible, but may be made visible by the user since the accordion header bar or tab link are still visible.

The lifecycle (including validation) is not run for any components in a showDetailItem which is not disclosed. The lifecycle is only run on the showDetailItem(s) which is disclosed.

## Geometry Management

- This component should never have any width or height specified in its inlineStyle because it will always gets its dimensions from its ancestor component.
- This component cannot be used by itself, refer to the <af:panelAccordion>, <af:panelTabbed> and <af:panelDrawer> tag documentation for more details about geometry management.

## Disclosure Events

The af:showDetailItem component inside of af:panelAccordion and af:panelTabbed supports queuing of disclosure events so that validation can properly be handled--both on the server and on the client.

If you have an af:panelTabbed or an af:panelAccordion (with discloseMany="false" and discloseNone="false"):

- On client:
  - showDetailItem 1 is showing but not showDetailItem 2
  - user clicks to disclose item 2
  - a client-only disclosure event gets kicked off to set disclosed to false for item 1
  - if this first event is not canceled, another client disclosure event gets kicked off to set disclosed to true for item 2
  - if this second event is not canceled, it gets sent to the server
  - otherwise, no more disclosure changes
- On server:
  - the server disclosure event is kicked off to set disclosed to true on item 2
  - if this first server event is not canceled, another server disclosure event gets kicked off to set disclosed to false for item 1
  - if neither server event is canceled, the new states get rendered and the user will see the newly disclosed states on the client
  - otherwise, the client looks the same as it was before

For af:panelAccordion with discloseMany="false" and discloseNone="true", the process is the same as above only when the disclosure change forces a paired change (when 2 disclosed states are involved). If only one disclosure change is involved, there will just be 1 client and 1 server disclosure event.

For af:panelAccordion with discloseMany="true" (and any discloseNone setting), only one disclosure change is involved; there will just be 1 client and 1 server disclosure event.

## Item Events

The af:showDetailItem component inside of af:panelTabbed supports removal of tabs. When the user removes a tab, an item event is generated with the item type of "removal". On the client, an `AdfItemEvent` is generated and the method `getItemAction()` will return a value of `AdfItemEvent.ITEM_ACTION_REMOVE` on tab removal. Should the client event not be canceled, the event will propagate to the server where a `oracle.adf.view.rich.event.ItemEvent` will be queued and broadcast. The `getType()` method may be used to retrieve the event type (removal) on the server.

## Screen Shot(s)

ShowDetailItem component.

## Code Example(s)

Two showDetailItems, the first of which is "disclosed":

    <af:panelTabbed id="pt1">
      <af:showDetailItem text="First" disclosed="true" id="sdi1"/>
      <af:showDetailItem text="Second" id="sdi2"/>
    </af:panelTabbed>

## Events

Type | Phases | Description
--- | --- | ---
oracle.adf.view.rich.event.ItemEvent | Invoke, Application, Apply, Request, Values | The itemEvent is triggered when a containing object has an event on one of its child items. For example, a panelTabbed will launch an itemEvent of type 'remove' for one of its child tabs.
org.apache.myfaces.trinidad.event.DisclosureEvent | Apply, Request, Values, Invoke, Application | The disclosure event is delivered when a node is disclosed.
org.apache.myfaces.trinidad.event.AttributeChangeEvent | Invoke, Application, Apply, Request, Values | Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change event might include the width of a column that supported client-side resizing.

## Supported Facets

Name | Description
--- | ---
toolbar | The content for the toolbar region of the accordion header bar. It will be displayed when the disclosed="true". This facet is only applicable when used with the panelAccordion. As with JSP pages, when using Facelets, multiple components are not allowed in this facet.

## Attributes

Name | Type | Supports EL? | Description
accessKey | char | Yes | a character used to gain quick access to this showDetailItem. If the same access key appears in multiple locations in the same page of output, the rendering user agent will cycle among the elements accessed by the similar keys. This attribute is sometimes referred to as the "mnemonic". Note that the accessKey is triggered by browser-specific and platform-specific modifier keys. It even has browser-specific meaning. For example, Internet Explorer will set focus when you press Alt+<accessKey>. Firefox sets focus on some operating systems when you press Alt+Shift+<accessKey>. Firefox on other operating systems sets focus when you press Control+<accessKey>. Refer to your browser's documentation for how it treats access keys.
attributeChangeListener | javax.el.MethodExpression | Only EL | a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
badge | String | Yes | A String that may show up in a badge area of an item. A use case for a badge is to indicate on a springboard item the number of new phone calls, or the number of new email messages.
binding | oracle.adf.view.rich.component.rich.layout.RichShowDetailItem | Only EL | an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
clientComponent | boolean | Yes | Default Value: false whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary. For the components outputText and outputFormatted, setting the clientComponent to true will render id attribute for the html DOM. This ID attribute can alternatively be generated by setting oracle.adf.view.rich.SUPPRESS_IDS to "auto" in web.xml.
customizationId | String | Yes | This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release.
depressedIcon | String | Yes | the URI of an image to be displayed when the icon is pressed or the item is disclosed. This attribute supports the same URI types described for the icon attribute.
disabled | boolean | Yes | Default Value: false a boolean which if the value is "true", the component becomes non-interactive. Otherwise,the default value is "false" and component assumes its expected behavior.
disabledIcon | String | Yes | the URI of an image to be displayed when the item is disabled. This attribute supports the same URI types described for the icon attribute.
disclosed | boolean | Yes | Default Value: false whether or not to disclose the children
disclosedTransient | boolean | Yes | Default Value: false stops the local value of disclosed from being set by renderers. This allows the value to always be taken from the value of the disclosed value expression. Disclosed values must be updated in other ways (i.e. from a disclosure listener) Not supported on the following renderkits: oracle.adf.rich
disclosureListener | javax.el.MethodExpression | Only EL | a method reference to a disclosure listener
displayIndex | int | Yes | Default Value: -1 When placed inside of a component that supports reordering, this attribute is used to determine the index that the child should be displayed in. It will be updated when the component is reordered in the parent. A display index of -1 (default) means that items will appear at the end, in the order they appear in the component tree. All values at 0 or above appear before the -1 values in ascending order.
dontPersist | String[] | Yes | a list of attributes whose changes are NOT to be persisted by FilteredPersistenceChangeManager via the "Persistent Change Manager" registered in adf-config.xml. The token 'ALL' can be used in the list here to indicate that all attribute changes that the component implicitly persists should be excluded. If there is a conflict of values, "dontPersist" always precedes "persist".
flex | int | Yes | Default Value: 0 a non-negative integer that indicates the flexibility of this component in its container. If the container supports it, flex is used to determine how space is distributed among its children. Components with larger flex values will be made larger than components with lower flex values. This is done so at the ratio determined by the flex of each of the two components. The actual value is only relevant if there are other flexible components (components with flex values larger than zero) within the same container. This attribute is only applicable when used with the panelAccordion.
hoverIcon | String | Yes | the URI of an image to be displayed when the mouse is hovering over the icon. This attribute supports the same URI types described for the icon attribute. This image is not rendered in touch screen devices.
icon | String | Yes | the URI of an image to be displayed with the showDetailItem. SVG icons are also supported, please refer to "iconDelivery" attribute for various SVG embed modes. This attribute supports these various types of URIs: absolute - an absolute path to the image, like "http://oracleimg.com/admin/images/ocom/hp/oralogo_small.gif" relative - a path located relatively to the source page, like "bullet.jpg" context relative - a path relatively based on the web application's context root, like "/images/error.png" server relative - a path relatively based on the web server by application name, like "//adf-richclient-demo-context-root/images/error.png"
iconDelivery | String | Yes | Valid Values: auto, reference, inline, fetchAndInline Default Value: auto An attribute specifying ways to render icon. reference - icon will be rendered as "img" tag. inline - svg icon will be rendered inline as "svg" tag fetchAndInline - svg icon will be fetched using XHR and will be rendered inline as "svg" tag. For subsequent requests, svg will be served from browser cache auto - Lets the framework decide the optimal rendering mode. You can use the skinnng property -tr-icon-delivery to override default framework behavior. Skinning property -tr-icon-delivery can be set to any one of "inline/reference/fetchAndInline" modes. However "inline" and "fetchAndInline" modes apply only for svg icons. Details about attribute values "inline" and "fetchAndInline" :- Only svg icons will be inlined. Only context relative and server relative icon URIs are supported Hover, disabled and depressed states should be handled through CSS classes/styles on svg elements. The hoverIcon, disabledIcon and depressedIcon attributes will be ignored.
id | String | No | the identifier for the component. Every component may be named by a component identifier that must conform to the following rules: They must start with a letter (as defined by the Character.isLetter() method) or underscore ( _ ). Subsequent characters must be letters (as defined by the Character.isLetter() method), digits as defined by the Character.isDigit() method, dashes ( - ), or underscores ( _ ). To minimize the size of responses generated by JavaServer Faces, it is recommended that component identifiers be as short as possible. If a component has been given an identifier, it must be unique in the namespace of the closest ancestor to that component that is a NamingContainer (if any).
immediate | boolean | Yes | Default Value: false whether data validation - client-side or server-side - should be skipped when events are generated by this component. When immediate is false (the default), the disclosure event will be delivered during the Invoke Application phase, which will trigger validation. When set to true, the disclosure event will be executed during the Apply Request Values phase.
inflexibleHeight | int | Yes | Default Value: 100 the number of pixels that the item will use when in a container that allocates size among multiple sibling items. If this item has flex="0", this is the size that will be used and the remaining space will be dispersed among the non-zero flex items. If this item cannot fit within its container using this number of pixels, other nearby items may be pushed out into overflow menus. This attribute is only applicable when used with the panelAccordion.
inlineStyle | String | Yes | the CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.
itemListener | javax.el.MethodExpression | Only EL | a method reference to an item listener
partialTriggers | String[] | Yes | the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "::" will pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, ":::" will pop out of two naming containers (including itself if the component is a naming container) and begin the search from there, etc.
persist | String[] | Yes | a list of attributes whose changes are to be persisted by FilteredPersistenceChangeManager via the "Persistent Change Manager" registered in adf-config.xml. The token 'ALL' can be used in the list here to indicate that all attribute changes that the component implicitly persists should be included.
remove | String | Yes | Valid Values: inherit, no, disabled Default Value: inherit sets the remove ability of the showDetailItem. The default value of "inherit" means that the item inherits its remove ability from its parent container. A value of "no" means that when in a container that supports item removal, this item is not allowed to be removed. A value of "disabled" means that when in a container that supports item removal, this item is not allowed to be removed and it should have a disabled remove indicator. Currently, only panelTabbed supports item removal of child showDetailItems.
rendered | boolean | Yes | Default Value: true whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
shortDesc | String | Yes | the short description of the component. The shortDesc text may be used in two different ways, depending on the component. For components with images, the shortDesc is often used to render an HTML alt attribute for the image. Please see the accessibility guidelines section for correct alt text usage of the shortDesc attribute. shortDesc is also commonly used to render an HTML title attribute, which is used by user agents to display tooltip help text. In this case the behavior for the tooltip is controlled by the user agent, e.g. Firefox 2 truncates long tooltips. For form components, the shortDesc is displayed in a note window. For components that support the helpTopicId attribute and are not using the shortDesc as image alt text, it is recommended that helpTopicId is used instead of shortDesc as it is more flexible and provides more accessible descriptive text than the use of the title attribute.
stretchChildren | String | Yes | Valid Values: none, first Default Value: none The stretching behavior for children. Acceptable values include: "none": does not attempt to stretch any children (the default value and the value you need to use if you have more than a single child; also the value you need to use if the child does not support being stretched) "first": stretches the first child (not to be used if you have multiple children as such usage will produce unreliable results; also not to be used if the child does not support being stretched)
styleClass | String | Yes | a CSS style class to use for this component. The style class can be defined in your jspx page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.
text | String | Yes | the textual label of the showDetailItem.
textAndAccessKey | String | Yes | an attribute that will simultaneously set both the "text" and "accessKey" attributes from a single value, using conventional ampersand ('&') notation. For example, setting this attribute to "T&amp;ext" will set the text to "Text" and the access key to 'e'.
unsecure | java.util.Set | Yes | A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty('attribute', newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty('disabled', false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
visible | boolean | Yes | Default Value: true the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property. Not supported on the following renderkits: org.apache.myfaces.trinidad.core