XForms/Select Multi-Column
< XForms
Motivation
editSometimes you have a large number of items to select from, for example you want to include one of many counties within a state to include in your search. In the following example there are 87 counties that might be included in a search. These county names are places in seven columns with 13 counties in all but the last column.
Screen Image
edit
Link to Working Example
editSample Program
editHere is a sample program. Make sure to put the page into edit mode if you want to copy and paste the code. This is because Wiki software replaces the ampersand-lt-semicolon with a "&".
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Select County</title>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {
font-family: Helvetica, sans-serif;
font-size: 10pt;
}
.table-container {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: top;
}
xf|label {
font-weight: bold;
}
</style>
<xf:model>
<xf:instance xmlns="">
<data>
<counties1>anoka carver</counties1>
<counties2>dakota</counties2>
<counties3>hennepin</counties3>
<counties4>mower</counties4>
<counties5>ramsey</counties5>
<counties6>scott</counties6>
<counties7>washington</counties7>
<counties />
</data>
</xf:instance>
<xf:bind nodeset="counties"
calculate="concat(../counties1, ' ', ../counties2, ' ',
../counties3, ' ', ../counties4,' ', ../counties5, ' ',
../counties6, ' ',../counties7)" />
</xf:model>
<xf:model id="code-tables">
<xf:instance xmlns="" id="MNCountyCode" src="counties.xml" />
</xf:model>
</head>
<body>
<p>Select all counties to include in the search:</p>
<div class="table-container ">
<div class="table-cell">
<xf:select ref="counties1" appearance="full">
<xf:itemset model="code-tables"
nodeset="instance('MNCountyCode')/EnumeratedValues/Item[boolean(position() < 14)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties2" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 13) and (position() < 27)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties3" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 26) and (position() < 40)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties4" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 39) and (position() < 53)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties5" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 52) and (position() < 66)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties6" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 65) and (position() < 79)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
<div class="table-cell">
<xf:select ref="counties7" appearance="full">
<xf:itemset model="code-tables" nodeset="instance('MNCountyCode')/EnumeratedValues/Item[(position() > 78)]">
<xf:label ref="Label" />
<xf:value ref="Value" />
</xf:itemset>
</xf:select>
</div>
</div>
<xf:output ref="counties">
<xf:label>Counties selected: </xf:label>
</xf:output>
</body>
</html>
Table for Data
editThe following is the shared resources file used by all the forms. Note that the values do not have any spaces in them. This way the codes can be passed through systems that use spaces as delimineters.
<CodeTable>
<DataElementName>MNCountyCode</DataElementName>
<EnumeratedValues>
<Item>
<Label>Aitkin</Label>
<Value>aitkin</Value>
</Item>
<Item>
<Label>Anoka</Label>
<Value>anoka</Value>
</Item>
<Item>
<Label>Becker</Label>
<Value>becker</Value>
</Item>
<Item>
<Label>Beltrami</Label>
<Value>beltrami</Value>
</Item>
<Item>
<Label>Benton</Label>
<Value>benton</Value>
</Item>
<Item>
<Label>Big Stone</Label>
<Value>big-stone</Value>
</Item>
<Item>
<Label>Blue Earth</Label>
<Value>blue-earth</Value>
</Item>
<Item>
<Label>Brown</Label>
<Value>brown</Value>
</Item>
<Item>
<Label>Carlton</Label>
<Value>carlton</Value>
</Item>
<Item>
<Label>Carver</Label>
<Value>carver</Value>
</Item>
<Item>
<Label>Cass</Label>
<Value>cass</Value>
</Item>
<Item>
<Label>Chippewa</Label>
<Value>chippewa</Value>
</Item>
<Item>
<Label>Chisago</Label>
<Value>chisago</Value>
</Item>
<Item>
<Label>Clay</Label>
<Value>clay</Value>
</Item>
<Item>
<Label>Clearwater</Label>
<Value>clearwater</Value>
</Item>
<Item>
<Label>Cook</Label>
<Value>cook</Value>
</Item>
<Item>
<Label>Cottonwood</Label>
<Value>cottonwood</Value>
</Item>
<Item>
<Label>Crow Wing</Label>
<Value>crow-wing</Value>
</Item>
<Item>
<Label>Dakota</Label>
<Value>dakota</Value>
</Item>
<Item>
<Label>Dodge</Label>
<Value>dodge</Value>
</Item>
<Item>
<Label>Douglas</Label>
<Value>douglas</Value>
</Item>
<Item>
<Label>Faribault</Label>
<Value>faribault</Value>
</Item>
<Item>
<Label>Fillmore</Label>
<Value>fillmore</Value>
</Item>
<Item>
<Label>Freeborn</Label>
<Value>freeborn</Value>
</Item>
<Item>
<Label>Goodhue</Label>
<Value>goodhue</Value>
</Item>
<Item>
<Label>Grant</Label>
<Value>grant</Value>
</Item>
<Item>
<Label>Hennepin</Label>
<Value>hennepin</Value>
</Item>
<Item>
<Label>Houston</Label>
<Value>houston</Value>
</Item>
<Item>
<Label>Hubbard</Label>
<Value>hubbard</Value>
</Item>
<Item>
<Label>Isanti</Label>
<Value>isanti</Value>
</Item>
<Item>
<Label>Itasca</Label>
<Value>itasca</Value>
</Item>
<Item>
<Label>Jackson</Label>
<Value>jackson</Value>
</Item>
<Item>
<Label>Kanabec</Label>
<Value>kanabec</Value>
</Item>
<Item>
<Label>Kandiyohi</Label>
<Value>kandiyohi</Value>
</Item>
<Item>
<Label>Kittson</Label>
<Value>kittson</Value>
</Item>
<Item>
<Label>Koochiching</Label>
<Value>koochiching</Value>
</Item>
<Item>
<Label>Lac Qui Parle</Label>
<Value>lac-qui-parle</Value>
</Item>
<Item>
<Label>Lake</Label>
<Value>lake</Value>
</Item>
<Item>
<Label>Lake of the Woods</Label>
<Value>lake-of-the-woods</Value>
</Item>
<Item>
<Label>Lesueur</Label>
<Value>lesueur</Value>
</Item>
<Item>
<Label>Lincoln</Label>
<Value>lincoln</Value>
</Item>
<Item>
<Label>Lyon</Label>
<Value>lyon</Value>
</Item>
<Item>
<Label>Mahnomen</Label>
<Value>mahnomen</Value>
</Item>
<Item>
<Label>Marshall</Label>
<Value>marshall</Value>
</Item>
<Item>
<Label>Martin</Label>
<Value>martin</Value>
</Item>
<Item>
<Label>McLeod</Label>
<Value>mcleod</Value>
</Item>
<Item>
<Label>Meeker</Label>
<Value>meeker</Value>
</Item>
<Item>
<Label>Mille Lacs</Label>
<Value>mille-lacs</Value>
</Item>
<Item>
<Label>Morrison</Label>
<Value>morrison</Value>
</Item>
<Item>
<Label>Mower</Label>
<Value>mower</Value>
</Item>
<Item>
<Label>Murray</Label>
<Value>murray</Value>
</Item>
<Item>
<Label>Nicollet</Label>
<Value>nicollet</Value>
</Item>
<Item>
<Label>Nobles</Label>
<Value>nobles</Value>
</Item>
<Item>
<Label>Norman</Label>
<Value>norman</Value>
</Item>
<Item>
<Label>Olmsted</Label>
<Value>olmsted</Value>
</Item>
<Item>
<Label>Otter Tail</Label>
<Value>otter-tail</Value>
</Item>
<Item>
<Label>Pennington</Label>
<Value>pennington</Value>
</Item>
<Item>
<Label>Pine</Label>
<Value>pine</Value>
</Item>
<Item>
<Label>Pipestone</Label>
<Value>pipestone</Value>
</Item>
<Item>
<Label>Polk</Label>
<Value>polk</Value>
</Item>
<Item>
<Label>Pope</Label>
<Value>pope</Value>
</Item>
<Item>
<Label>Ramsey</Label>
<Value>ramsey</Value>
</Item>
<Item>
<Label>Red Lake</Label>
<Value>red-lake</Value>
</Item>
<Item>
<Label>Redwood</Label>
<Value>redwood</Value>
</Item>
<Item>
<Label>Renville</Label>
<Value>renville</Value>
</Item>
<Item>
<Label>Rice</Label>
<Value>rice</Value>
</Item>
<Item>
<Label>Rock</Label>
<Value>rock</Value>
</Item>
<Item>
<Label>Roseau</Label>
<Value>roseau</Value>
</Item>
<Item>
<Label>Saint Louis</Label>
<Value>saint-louis</Value>
</Item>
<Item>
<Label>Scott</Label>
<Value>scott</Value>
</Item>
<Item>
<Label>Sherburne</Label>
<Value>sherburne</Value>
</Item>
<Item>
<Label>Sibley</Label>
<Value>sibley</Value>
</Item>
<Item>
<Label>Stearns</Label>
<Value>stearns</Value>
</Item>
<Item>
<Label>Steele</Label>
<Value>steele</Value>
</Item>
<Item>
<Label>Stevens</Label>
<Value>stevens</Value>
</Item>
<Item>
<Label>Swift</Label>
<Value>swift</Value>
</Item>
<Item>
<Label>Todd</Label>
<Value>todd</Value>
</Item>
<Item>
<Label>Traverse</Label>
<Value>traverse</Value>
</Item>
<Item>
<Label>Wabasha</Label>
<Value>wabasha</Value>
</Item>
<Item>
<Label>Wadena</Label>
<Value>wadena</Value>
</Item>
<Item>
<Label>Waseca</Label>
<Value>waseca</Value>
</Item>
<Item>
<Label>Washington</Label>
<Value>washington</Value>
</Item>
<Item>
<Label>Watonwan</Label>
<Value>watonwan</Value>
</Item>
<Item>
<Label>Wilkin</Label>
<Value>wilkin</Value>
</Item>
<Item>
<Label>Winona</Label>
<Value>winona</Value>
</Item>
<Item>
<Label>Wright</Label>
<Value>wright</Value>
</Item>
<Item>
<Label>Yellow Medicine</Label>
<Value>yellow-medicine</Value>
</Item>
</EnumeratedValues>
</CodeTable>
Discussion
editThe ideal way to do this would be to use a style sheet to pour the items into different cells of a table. Unfortunately there is little documentation on how the itemset results can be styled into different tables.