XForms/Entity Selection
Motivation
You want a user interface control that allows a user to select a legal entity in a contract such as a person or an organization. The list of people or organizations are supplied in a list that includes an id and a screen label. You want as-you-type functions to narrow down a list of choices from these lists.
Method
We will create a user interface control with two tabs. The first tab will be for people and the second will be for organizations.
Screen Image
Entity Selector Control. Note that only the person names that contain the string 'John' are displayed
Source Code
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xf="http://www.w3.org/2002/xforms"> <head> <title>Entity Selector</title> <link rel="stylesheet" type="text/css" href="entity-selector.css"/> <xf:model> <xf:instance xmlns="" id="save-data"> <data> <Person> <PersonID></PersonID> <PersonLabel></PersonLabel> </Person> <Organization> <OrganizationID></OrganizationID> <OrganizationLabel></OrganizationLabel> </Organization> </data> </xf:instance> <xf:instance xmlns="" id="views"> <data> <persons></persons> <organizations></organizations> </data> </xf:instance> <xf:instance xmlns="" id="candidate-people"> <data> <Person> <PersonID>1</PersonID> <PersonLabel>Amy Smith</PersonLabel> </Person> <Person> <PersonID>2</PersonID> <PersonLabel>Becky Adams</PersonLabel> </Person> <Person> <PersonID>3</PersonID> <PersonLabel>Mark Daniels</PersonLabel> </Person> <Person> <PersonID>4</PersonID> <PersonLabel>Dan Jones</PersonLabel> </Person> <Person> <PersonID>5</PersonID> <PersonLabel>Fred Johnson</PersonLabel> </Person> <Person> <PersonID>6</PersonID> <PersonLabel>Sue Johnson</PersonLabel> </Person> <Person> <PersonID>7</PersonID> <PersonLabel>John Doe</PersonLabel> </Person> <Person> <PersonID>8</PersonID> <PersonLabel>Jane Smith</PersonLabel> </Person> <Person> <PersonID>9</PersonID> <PersonLabel>Jake Anderson</PersonLabel> </Person> <Person> <PersonID>10</PersonID> <PersonLabel>Jason Burke</PersonLabel> </Person> <Person> <PersonID>11</PersonID> <PersonLabel>Jerome Hughes</PersonLabel> </Person> <Person> <PersonID>12</PersonID> <PersonLabel>Robert Paulson</PersonLabel> </Person> <Person> <PersonID>13</PersonID> <PersonLabel>Paul Robertson</PersonLabel> </Person> </data> </xf:instance> <xf:instance xmlns="" id="candidate-organizations"> <data> <Organization> <OrganizationID>1</OrganizationID> <OrganizationLabel>Courts</OrganizationLabel> </Organization> <Organization> <OrganizationID>2</OrganizationID> <OrganizationLabel>County</OrganizationLabel> </Organization> <Organization> <OrganizationID>3</OrganizationID> <OrganizationLabel>Prosecution</OrganizationLabel> </Organization> <Organization> <OrganizationID>4</OrganizationID> <OrganizationLabel>Probation</OrganizationLabel> </Organization> <Organization> <OrganizationID>5</OrganizationID> <OrganizationLabel>Public Defender</OrganizationLabel> </Organization> <Organization> <OrganizationID>6</OrganizationID> <OrganizationLabel>Jails</OrganizationLabel> </Organization> <Organization> <OrganizationID>7</OrganizationID> <OrganizationLabel>Prison</OrganizationLabel> </Organization> <Organization> <OrganizationID>8</OrganizationID> <OrganizationLabel>State</OrganizationLabel> </Organization> </data> </xf:instance> <xf:action ev:event="xforms-ready"> <xf:setfocus control="person-input"/> </xf:action> <xf:submission id="save" action="echo.xq" method="post"/> </xf:model> </head> <body> <h1>Entity Selector</h1> <p>Select either a person or an organization:</p> <div class="horiz-tabs-menu"> <div id="tab1"> <a href="#tab1">Person <xf:toggle case="case-1" ev:event="DOMActivate"/> </a> </div> <div id="tab2"> <a href="#tab2">Organization <xf:toggle case="case-2" ev:event="DOMActivate"/> </a> </div> </div> <xf:switch> <xf:case id="case-1" selected="true()"> <xf:input ref="Person/PersonLabel" incremental="true" class="PersonLabel" id="person-input"> <xf:label>Person: </xf:label> </xf:input> <br/> <div class="autoscroll"> <!-- list all the candidate people and filter out the ones that start with the prefix --> <xf:repeat nodeset="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)]" id="persons-repeat"> <xf:trigger appearance="minimal"> <xf:output ref="PersonLabel"></xf:output> (<xf:output ref="PersonID"></xf:output>) <!-- now copy the selected item to the save instance --> <xf:action ev:event="DOMActivate"> <!-- this should work <xf:insert origin="instance('candidate-people')/Person[index('persons-repeat')]" nodeset="instance('save-data')/Person"/> --> <xf:setvalue ref="instance('save-data')/Person/PersonLabel" value="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)][index('persons-repeat')]/PersonLabel" /> <xf:setvalue ref="instance('save-data')/Person/PersonID" value="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)][index('persons-repeat')]/PersonID" /> </xf:action> </xf:trigger> </xf:repeat> </div> </xf:case> <xf:case id="case-2"> <xf:input ref="Organization/OrganizationLabel" incremental="true"> <xf:label>Organization: </xf:label> </xf:input> <div class="autoscroll"> <!-- list all the candidate people and filter out the ones that start with the prefix --> <xf:repeat nodeset="instance('candidate-organizations')/Organization[contains(OrganizationLabel, instance('save-data')/Organization/OrganizationLabel)]" id="organizations-repeat"> <xf:trigger appearance="minimal"> <xf:output ref="OrganizationLabel"></xf:output> (<xf:output ref="OrganizationID"></xf:output>) <!-- now copy the selected item to the save instance --> <xf:action ev:event="DOMActivate"> <xf:setvalue ref="instance('save-data')/Organization/OrganizationLabel" value="instance('candidate-organizations')/Organization[contains(OrganizationLabel, instance('save-data')/Organization/OrganizationLabel)][index('organizations-repeat')]/OrganizationLabel" /> <xf:setvalue ref="instance('save-data')/Organization/OrganizationID" value="instance('candidate-organizations')/Organization[contains(OrganizationID, instance('save-data')/Organization/OrganizationID)][index('organizations-repeat')]/OrganizationID" /> </xf:action> </xf:trigger> </xf:repeat> </div> </xf:case> </xf:switch> <br/><br/> <div class="test"> <xf:output ref="instance('save-data')/Person/PersonLabel"> <xf:label>Person:</xf:label> </xf:output> (<xf:output ref="instance('save-data')/Person/PersonID"/>) <br/> <xf:output ref="Organization/OrganizationLabel"> <xf:label>Organization:</xf:label> </xf:output> (<xf:output ref="instance('save-data')/Organization/OrganizationID"/>) </div> <xf:submit submission="save"> <xf:label>Save</xf:label> </xf:submit> </body> </html>