XForms, Relevant

Using Bind with the Relevant Attribute

XForms also allows you to conditionally display part of a form based on some value in your instance data. Typically this is used when the answer to one field of the form conditionally displays another part.

The format of this is to use the xf:bind statement within in the xf:model.

nodeset="NodeYowWantToConditionallyDisplay" relevant="XPathExpression"/>

The following examples demonstrate this.

Link to Relevancy XForms Application

Relevancy Demos Note: RelevancySelector.xhtml in the example application is incomplete.

Bind to a Decimal

In the following example, the second input field is conditionally displayed based on the integer value of the first instance value.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema">;
Testing the XForms bind relevant attribute.

xmlns="">
1
This is the second value

nodeset="/var/first" type="xs:decimal" />
nodeset="/var/second" relevant="/var/first > 0" />

Demonstration of relevant fields.

ref="/var/first" >
Should I show the second question?
/>
select="yes">
Yes Please!
1

No Thank You
0

/>
ref="/var/second">
Second value:

Using Multiple Predicates in Binds

Sometimes you have a sequence of many items and the display of one item depends on the values of other items. Predicates are a way of appending AND/OR operations to the end of a path expression used as a relevancy expression.

The following example uses a bind with two predicates. The second item in a sequence is bound to the first item. To do this you must select the second item item[2] in the nodeset and add [. > 2.0] to end of the item[1] predicate.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">;

id="instanceData">
xmlns="">
0.00
0.00

nodeset="instance('instanceData')/item[2]" relevant="instance('instanceData')/item[1][. > 2.0]" />

ref="instance('instanceData')/item[1]">
First item:

/>
ref="instance('instanceData')/item[2]">
Second item:

Bind to Boolean

Since parts of a form are usually either visible or not visible, it is natural to use a boolean value
to determine if the field should be displayed.

In this example if InputIndicator is true, the second output instance is visible.

If the InputIndicator is false, the second output is not visible.

Note that expression .='true' is used. This is a string comparison. Ideally you would just be able to test a node using mynoode=true() but I have had problems with this method.

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

Example of binding to to boolean controls

id="model">
id="input">
xmlns="">
false

id="input_bind" nodeset="/DataIn/InputIndicator" type="xs:boolean">

id="output">
xmlns="">
Hello World!

id="output_bind" nodeset="instance('output')/OutputValue" relevant="instance('input')/InputIndicator[.='true']"/>

bind="input_bind">
Check to see the value of output:

bind="output_bind">
Value of Output:

In this example, a simple checkbox is used to conditionally display a field.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema">;
Testing the relevant attribute of the bind element with boolean values.

xmlns="">
true

nodeset="/var/first" type="xs:boolean" />
nodeset="/var/second" relevant="/var/first='true'" />

The input field should only display if the first value is checked.

ref="/var/first">
Display the next input?:

/>
ref="/var/second">
Display this only if the first answer is true:

In this example the type cast to boolean does not have any impact since relevant="/var/first=true()" does not work as expected. String comparison must be used.

Binding a view to a select 1

This example shows how to conditionally display a view based on the value of a select1 control.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema">;
Testing the XForms bind relevant attribute based on a select1 control.

xmlns="">
1
/>
/>
/>

nodeset="/data/select1value" type="xs:decimal" />
nodeset="/data/view1" relevant="/data/select1value = 1" />
nodeset="/data/view2" relevant="/data/select1value = 2" />
nodeset="/data/view3" relevant="/data/select1value = 3" />

Demonstration of relevant fields.

ref="/data/select1value">
What view would you like to see?
/>
select="yes">
View 1
1

View 2
2

View 3
3

/>
ref="/data/view1">
First view:

ref="/data/view2">
Second view:

ref="/data/view3">
Third view:

Note that the functionally is similar to a and combination but no is used.

The bind statement

The following line is the line that does the actual bind. You should use the instance() function whenever you are binding one instance to another.

Also note that you must compare the text of the InputIndicator (the period) to true and not the InputIndicator itself.

id="output_bind"
nodeset="instance('output')/OutputValue"
relevant="instance('input')/InputIndicator[.='true']" />

An Architecture for Conditional Views and User-Maintainable Rules

Sometimes you need to have a consistent way of conditionally displaying views in a form. For example, if you want non-programmers to maintain the business logic of when a view is displayed, the binding rules to a view can be generated by an external rules engine.

To make this work you need to create a central instance that is used to control form views:

id="views" xmlns="">

We call this architecture one of "Named Views" because an external tool can be used to state the rules of how any named view is rendered. This will be a central location in the form that generates the view instance and the binding expressions.

Each view is wrapped in a group element that binds the group to the instance in the view:

ref="instance('views')/named-view-1">

ref="instance('views')/named-view-2">

ref="instance('views')/named-view-2">

The display rules for each view can then be stored in a bind statement:

nodeset="instance('views')/named-view-1" relevant="XPath-expression-that-returns-a-boolean-for named-view-1"/>
nodeset="instance('views')/named-view-2" relevant="XPath-expression-that-returns-a-boolean-for named-view-2"/>
nodeset="instance('views')/named-view-3" relevant="XPath-expression-that-returns-a-boolean-for named-view-3"/>

Each form can then have a "rules file" that looks similar to the following:

my-form-ver-2

named-view-1
XPath-expression-that-returns-a-boolean-for named-view-1

named-view-2
XPath-expression-that-returns-a-boolean-for named-view-2

named-view-2
XPath-expression-that-returns-a-boolean-for named-view-3

You can then build another XForms application that allows non-programmers to maintain these rules files and and a simple transform that places the instance and bind statements in the XForms model when it is loaded. The original groups may still need to be manually added to the form but once the views are added the rules can be maintained with a separate application.

Changing Fields to Display

The following example conditionally displays two zip code fields if the country code is 'usa" or displays a postal code if the field is not 'usa'.

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema">;

Testing the XForms bind relevant attribute.
language="text/css">

@namespace xf url("http://www.w3.org/2002/xforms");

/* this allows the descenders (jpqy) to be visible in the drop down list */
xf|select1 .xf-value {height: 1.5em;}

.ZipCode .xf-value {width:5ex}
.ZipCodeSuffix .xf-value {width:4ex}
.PostalCode .xf-value {width:10ex}
]]>

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

usa
12345
1234
AB-1234

xmlns="" id="views">

id="DisplayZipCode"
nodeset="instance('views')/DisplayZipCode"
relevant="instance('save-data')/CountryCode='usa'" />
id="DisplayPostalCode"
nodeset="instance('views')/DisplayPostalCode"
relevant="not(instance('save-data')/CountryCode='usa')" />

Demonstration of binding Zip Code Input

ref="instance('save-data')/CountryCode" selection="open">
Country:

USA
usa

Canada
can

Mexico
mex

Other
other

bind="DisplayZipCode">
ref="instance('save-data')/ZipCode" class="ZipCode">
Zip Code:

ref="instance('save-data')/ZipCodeSuffix" class="ZipCodeSuffix">

ref="instance('save-data')/LocationPostalID" bind="DisplayPostalCode" class="DisplayPostalCode">
Postal Code:

Delete

One of the most common occurrence of conditional display is the delete function for repeating elements. Typically you do not want to delete the last one. See the XForms/Conditional_delete example.

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.