XForms/Entity Selection

Motivation edit

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 edit

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 edit

 
Entity Selector Control. Note that only the person names that contain the string 'John' are displayed

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>
Next Page: Repeat into table | Previous Page: Tri-Document Loading
Home: XForms