XForms/Select1 drop list

Motivation

You want to allow the user to select a single value from a list.

Method

Here is an example of using the select1 to create a drop-down list. The user must pick one and only one from the selected list.

Note that each item has a label (for humans to read) and a value (usually placed within an XML document). Values are typically stored in a database and use to compare to items together. Since values are frequently passed as arguments in a URL in a REST interface the convention is to only use lowercase letters and dashs. Do not put spaces, slashes and other characters in values if you are using REST interfaces. This makes the URLs difficult to read.

Screen Image

select1 control

Link to Working Application

Load XForms Application

Note that when the form is initially loaded, no day of the week is displayed in the input our output. After you press the drop-down list (the back triangle to the right of the input control) and select a day of the week the value will be filled in. A label (the name that starts with the uppercase) will be displayed in the select1 control. The actual version in the model will be the value which is the lower-case version. This is also the version that is displayed in the output.

Source Code

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Demonstration of XForms Select1</title>
        <style type="text/css"><![CDATA[body {font-family: Helvetica, sans-serif;}]]></style>
        <xf:model>
            <xf:instance xmlns="">
                <data>
                    <DayOfWeekCode/>
                </data>
            </xf:instance>
        </xf:model>
    </head>
    <body>       
        <xf:select1 ref="DayOfWeekCode">  
            <xf:label>Day of Week:</xf:label>
                <xf:item>
                    <xf:label>Monday</xf:label>
                    <xf:value>monday</xf:value> 
                </xf:item>
                <xf:item>
                    <xf:label>Tuesday</xf:label>
                    <xf:value>tuesday</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Wednesday</xf:label>
                    <xf:value>wednesday</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Thursday</xf:label>
                    <xf:value>thursday</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Friday</xf:label>
                    <xf:value>friday</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Saturday</xf:label>
                    <xf:value>saturday</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>Sunday</xf:label>
                    <xf:value>sunday</xf:value>
                </xf:item>             
        </xf:select1>
        <br/>
        Output: <xf:output ref="DayOfWeekCode"/>
    </body>
</html>

Discussion

The list of values does not have to be in the body of the form. It can be in the model stored in an instance, it can be fetched on-demand from a web service. We will cover these in other examples.

Next Page: Open Selection | Previous Page: Select1
Home: XForms