Select Multi-Column

XForms · Wikibooks

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From Wikibooks, under CC BY-SA 4.0, as the source states it. This page at Wikibooks.

    Select Multi-Column

    Motivation

    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

    Illustration

    Select Multi Column

    Sample Program

    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

    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

    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