XForms/Entity Selection
< XForms
Motivation
editYou 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
editWe 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
edit
Source Code
edit<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>