Creating a collapsible layout using the CFLAYOUT tag in ColdFusion

Readability

Creating a collapsible layout using the CFLAYOUT tag in ColdFusion

The fol­low­ing exam­ple shows how you can cre­ate a col­lapsi­ble lay­out using the <CFLAY­OUT> and <CFLAY­OUTAREA> tags and set­ting the Boolean collapsible attribute to “true” in ColdFusion.


    SELECT A.ARTISTID,
           A.FIRSTNAME,
           A.LASTNAME,
           (SELECT COUNT(*) from ART A1 WHERE A1.ARTISTID = A.ARTISTID) AS numArts
    FROM ARTISTS A
    ORDER BY A.LASTNAME ASC,
           A.FIRSTNAME ASC



    SELECT A.*, A1.FIRSTNAME, A1.LASTNAME
    FROM ART A, ARTISTS A1
    WHERE A.ARTISTID = A1.ARTISTID
       
       AND A.ARTISTID in ()
       
    ORDER BY A1.LASTNAME, A1.FIRSTNAME, A.ARTNAME


 
    
        ALL ARTISTS

#getArt.LASTNAME#, #getArt.FIRSTNAME#

Name Price
#getArt.ARTNAME# #dollarFormat(getArt.PRICE)#

No art found for specified artist.

CFLAYOUTAREA collapsible=true (open)
Fig­ure 1. CFLAY­OUTAREA collapsible=true (open)

CFLAYOUTAREA collapsible=true (closed)
Fig­ure 2. CFLAY­OUTAREA collapsible=true (closed)

CFLAYOUTAREA collapsible=true (floating)
Fig­ure 3. CFLAY­OUTAREA collapsible=true (floating)

The following example shows how you can create a collapsible layout using the <CFLAYOUT> and <CFLAYOUTAREA> tags and setting the Boolean collapsible attribute to “true” in ColdFusion.

<cfquery name="getArtists" datasource="cfartgallery">
    SELECT A.ARTISTID,
           A.FIRSTNAME,
           A.LASTNAME,
           (SELECT COUNT(*) from ART A1 WHERE A1.ARTISTID = A.ARTISTID) AS numArts
    FROM ARTISTS A
    ORDER BY A.LASTNAME ASC,
           A.FIRSTNAME ASC
</cfquery>
 
<cfquery name="getArt" datasource="cfartgallery">
    SELECT A.*, A1.FIRSTNAME, A1.LASTNAME
    FROM ART A, ARTISTS A1
    WHERE A.ARTISTID = A1.ARTISTID
       <cfif structKeyExists(URL, "artistID")>
       AND A.ARTISTID in (<cfqueryparam value="#URL.artistID#" list="true" cfsqltype="cf_sql_integer" />)
       </cfif>
    ORDER BY A1.LASTNAME, A1.FIRSTNAME, A.ARTNAME
</cfquery>
 
<cflayout type="border" height="300"> 
    <cflayoutarea title="Artists" position="left" collapsible="true" style="width:220px;">
        <cfoutput><a href="#CGI.SCRIPT_NAME#" style="font-weight:bold;">ALL ARTISTS</a><br/></cfoutput>
        <ul>
        <cfoutput query="getArtists">
            <li><a <cfif getArtists.numArts GT 0>href="#CGI.SCRIPT_NAME#?artistID=#getArtists.ARTISTID#"</cfif>>#getArtists.LASTNAME#, #getArtists.FIRSTNAME#</a> (#getArtists.numArts#)</li>
        </cfoutput>
        </ul>
    </cflayoutarea> 
    <cflayoutarea position="center" style="padding:5px;">
        <cfif getArt.recordCount GT 0>
            <cfoutput query="getArt" group="LASTNAME">
                <h2>#getArt.LASTNAME#, #getArt.FIRSTNAME#</h2>
                <table width="100%">
                <tr bgcolor="##EEEEEE">
                    <th width="100%">Name</th>
                    <th align="right">Price</th>
                </tr>
                <tbody>
                <cfoutput>
                <tr>
                    <td>#getArt.ARTNAME#</td>
                    <td align="right">#dollarFormat(getArt.PRICE)#</td>
                </tr>
                </cfoutput>
                </tbody>
                </table>
            </cfoutput>
        <cfelse>
            <h3>No art found for specified artist.</h3>
        </cfif>
    </cflayoutarea> 
</cflayout>

CFLAYOUTAREA collapsible=true (open)
Figure 1. CFLAYOUTAREA collapsible=true (open)

CFLAYOUTAREA collapsible=true (closed)
Figure 2. CFLAYOUTAREA collapsible=true (closed)

CFLAYOUTAREA collapsible=true (floating)
Figure 3. CFLAYOUTAREA collapsible=true (floating)

Leave a Reply

Your email address will not be published.