XForms/Entity Selection

From Wikibooks, open books for an open world
Jump to: navigation, search

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