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 (Image: dmccreary, CC BY-SA 3.0)

Source Code

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms">;

Entity Selector
rel="stylesheet" type="text/css" href="entity-selector.css"/>

xmlns="" id="save-data">

xmlns="" id="views">

xmlns="" id="candidate-people">

1
Amy Smith

2
Becky Adams

3
Mark Daniels

4
Dan Jones

5
Fred Johnson

6
Sue Johnson

7
John Doe

8
Jane Smith

9
Jake Anderson

10
Jason Burke

11
Jerome Hughes

12
Robert Paulson

13
Paul Robertson

xmlns="" id="candidate-organizations">

1
Courts

2
County

3
Prosecution

4
Probation

5
Public Defender

6
Jails

7
Prison

8
State

ev:event="xforms-ready">
control="person-input"/>

id="save"
action="echo.xq" method="post"/>

Entity Selector
Select either a person or an organization:

class="horiz-tabs-menu">
id="tab1">
href="#tab1">Person
case="case-1" ev:event="DOMActivate"/>

id="tab2">
href="#tab2">Organization
case="case-2" ev:event="DOMActivate"/>

id="case-1" selected="true()">
ref="Person/PersonLabel" incremental="true" class="PersonLabel" id="person-input">
Person:

class="autoscroll">

nodeset="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)]"
id="persons-repeat">
appearance="minimal">
ref="PersonLabel"> ( ref="PersonID">)

ev:event="DOMActivate">

ref="instance('save-data')/Person/PersonLabel"
value="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)][index('persons-repeat')]/PersonLabel" />

ref="instance('save-data')/Person/PersonID"
value="instance('candidate-people')/Person[contains(PersonLabel, instance('save-data')/Person/PersonLabel)][index('persons-repeat')]/PersonID" />

id="case-2">
ref="Organization/OrganizationLabel" incremental="true">
Organization:

class="autoscroll">

nodeset="instance('candidate-organizations')/Organization[contains(OrganizationLabel, instance('save-data')/Organization/OrganizationLabel)]"
id="organizations-repeat">
appearance="minimal">
ref="OrganizationLabel">
( ref="OrganizationID">)

ev:event="DOMActivate">

ref="instance('save-data')/Organization/OrganizationLabel"
value="instance('candidate-organizations')/Organization[contains(OrganizationLabel,
instance('save-data')/Organization/OrganizationLabel)][index('organizations-repeat')]/OrganizationLabel" />

ref="instance('save-data')/Organization/OrganizationID"
value="instance('candidate-organizations')/Organization[contains(OrganizationID,
instance('save-data')/Organization/OrganizationID)][index('organizations-repeat')]/OrganizationID" />

class="test">
ref="instance('save-data')/Person/PersonLabel">
Person:

( ref="instance('save-data')/Person/PersonID"/>)

ref="Organization/OrganizationLabel">
Organization:

( ref="instance('save-data')/Organization/OrganizationID"/>)

submission="save">
Save

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.