Show Detail

Page is ready
Component Demo
Show

Sumary

The showDetail provides a means of toggling a group of components between being disclosed or undisclosed. A showDetail should be used to:

1. Hide/show an entire section or a part of a section of information within the contents of a page such as:

  • show more information / hide more information
  • show details / hide details
  • show "section name" / hide "section name"
  • show graph/hide graph, etc.

2. Hide/show functionality such as:

  • simple/advance search

3. Hide/show details of a table row

On mobile devices the showDetail renders nothing itself, but does renders its children.
If the "disclosed" property on the showDetail is set to false, the an icon indicating that the item is not disclosed will be rendered and the "prompt" facet will be rendered next to the icon. In this case the children of showDetail will not be rendered. If the "disclosed" property is set to false, the icon indicating that the item IS disclosed will be rendered and the and the "prompt" facet will be rendered next to the icon. In this case, the children of showDetail WILL be rendered.
If the "prompt" facet is not present, but either the disclosedText or undisclosedText attributes are present (not both), the text in the attribute will appear next to the disclosure icon for both states.
If the "prompt" facet is not present and both the disclosedText and or undisclosedText attributes are present , the text in the disclosedText attribute will appear when disclosed="true" and the text in the undisclosedText attribute will appear when disclosed="false".
Finally, if the "prompt" facet is not present and neither the disclosedText or undisclosedText attributes are present, then the word "hide" will appear next to the disclosure icon when disclosed="true" and the word "show" will appear next to the disclosure icon when disclosed="false". In this case both the "hide" and "show" labels will be links and mnd may be clicked in order to toggle the disclosure.
Clicking on the icon of the showDetail will deliver a DisclosureEvent to the server. If a "prompt" facet is used, changing the value of the disclosed attribute on this component will also deliver the event.

Code samples

JSF Page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
        
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:tr="http://myfaces.apache.org/trinidad"
                template="/pages/componentDemo.xhtml">

    <ui:define name="demoContent">

        <tr:showDetail id="showDetail1">
            <tr:spacer height="10"/>
            <tr:table width="100%" emptyText="No data available." value="#{tableColumn.monarchs}" var="row">
                <tr:column >
                    <tr:outputText value="#{row.id}"/>
                </tr:column>

                <tr:column>
                    <f:facet name="header">
                        <tr:outputText value="Name"/>
                    </f:facet>
                    <tr:outputText value="#{row.name}"/>
                </tr:column>

                <tr:column>
                    <f:facet name="header">
                        <tr:outputText value="Birth"/>
                    </f:facet>
                    <tr:outputText value="#{row.birth}"/>
                </tr:column>

                <tr:column>
                    <f:facet name="header">
                        <tr:outputText value="Death"/>
                    </f:facet>
                    <tr:outputText value="#{row.death}"/>
                </tr:column>
            </tr:table>
        </tr:showDetail>

    </ui:define>
</ui:composition>