Add different icons to tree nodes

Site map

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

Improved retry mechanism
edited by Erik Bruchez
Configuration Properties - Form Runner
edited by Erik Bruchez
Form Runner - Data Envelope
edited by Erik Bruchez
Form Builder - Data Models
edited by Erik Bruchez
Project - XForms UI Dependencies
edited by Erik Bruchez
View All

How-to guides‎ > ‎

Add different icons to tree nodes

The problem

You want to show an icon next to every item rendered by the tree control, for instance a folder or a document icon, as shown in this screenshot:

The choice between folder or document is driven by data you have stored in the instance (i.e. folders are not necessarily nodes with children and documents are not necessarily nodes without any children). For instance, your instance might look like the following, where the folder="true | false" attribute determines if a given item is a folder or a document:

<items>
    <item label="Encyclopedia" folder="true" value="en">
        <item label="Science" folder="true" value="sc"/>
        <item label="Culture" folder="true" value="cu">
            <item label="Art" folder="false" value="ar"/>
            <item label="Craft" folder="false" value="cr"/>
        </item>
    </item>
</items>

The solution

Using the class attribute support on xforms:itemset, you can write:

<xforms:select1 ref="select1" appearance="xxforms:tree">
    <xforms:itemset nodeset="instance('encyclopedia-instance')//item"
            class="{if (@folder = 'true') then 'node-folder' else 'node-document'}">
        <xforms:label ref="@label"/>
        <xforms:value ref="@value"/>
    </xforms:itemset>
</xforms:select1>

The value of the class attribute here is an AVT which when evaluate has access to the current node currently being iterated on based on the nodeset expression. Here, depending on whether the folder attribute in the instance is true or not, it sets a class or either node-folder or node-document. That class shows in the generated HTML, so you can use CSS to style the items, displaying a folder or document icon next to the label:

.node-folder, .node-document { background-repeat: no-repeat; 
                               padding: 2px 0 0 18px; line-height: 18px }

.node-folder { background-image: url('../../../apps/fr/style/images/silk/folder.png') }
.node-document { background-image: url('../../../apps/fr/style/images/silk/page.png') }

Run it and get the source

Download the full source

	Orbeon Search