XForms/Select Multi-Column

Motivation

edit

Sometimes 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
 
edit

Select Multi Column

Sample Program

edit

Here 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() &lt; 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() &gt; 13) and (position() &lt; 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() &gt; 26) and (position() &lt; 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() &gt; 39) and (position() &lt; 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() &gt; 52) and (position() &lt; 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() &gt; 65) and (position() &lt; 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() &gt; 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

edit

The 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

edit

The 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.

Next Page: Select1 Multi-Column | Previous Page: Select
Home: XForms