Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/column-label-hidden-in-control.xml

Created May 6, 2014 20:02
Show Gist options
  • Save dmccreary/da639f8ce5bee4dcee98 to your computer and use it in GitHub Desktop.
Save dmccreary/da639f8ce5bee4dcee98 to your computer and use it in GitHub Desktop.
Download ZIP
Orbeon column label hidden within control working with multiple alerts and error summay
Raw
column-label-hidden-in-control.xml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>XForms demo of label within table headers</title>
<xf:model>
<xf:instance xmlns="" id="save-data">
<data>
<row>
<integer1>1</integer1>
<integer2>2</integer2>
<integer3>3</integer3>
</row>
<row>
<integer1/>
<integer2/>
<integer3/>
</row>
<row>
<integer1/>
<integer2/>
<integer3/>
</row>
</data>
</xf:instance>
<xf:bind id="required" ref="row/*" required="true()"/>
<xf:bind id="integer" ref="row/*" type="xf:integer"/>
<xf:bind id="one-or-more" ref="row/*" constraint="if (. castable as xs:integer) then xs:integer(.) ge 1 else true()"/>
<xf:bind id="ten-or-less" ref="row/*" constraint="if (. castable as xs:integer) then xs:integer(.) le 10 else true()"/>
</xf:model>
<style type="text/css">
/* don't show the labels in-form */
.hidden {display:none!important;}
.orbeon table thead tr th {background:silver; color:white; text-align:center!important;font-weight:bold!important;}
.orbeon .xforms-type-integer {text-align:right!important;}
.orbeon .xforms-control .xforms-input-input {width:5ex;}
/* don't show initial alerts until after visited */
.orbeon .xforms-control .xforms-alert {display: none;}
.xforms-control.xforms-invalid.xforms-visited .xforms-alert {display: inline-block;}
</style>
</head>
<body>
<div class="container span5">
Enter an integer from 1 to 10 in each table cell.
The links in the error summary should display the column number and the link should move you to the right cell.
<xf:group id="my-group">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>
#
</th>
<th>
Column 1
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
<th>
Add
</th>
<th>
Remove
</th>
</tr>
</thead>
<tbody>
<xf:repeat nodeset="instance('save-data')/row" id="repeat-1">
<tr>
<td>
<xf:output value="position()"/>
</td>
<td>
<xf:input ref="integer1" id="integer1">
<xf:label class="hidden">Column 1</xf:label>
<xf:alert validation="required">Required</xf:alert>
<xf:alert validation="integer">Must be a valid integer</xf:alert>
<xf:alert validation="one-or-more">Must be 1 or larger</xf:alert>
<xf:alert validation="ten-or-less">Must be 10 or smaller</xf:alert>
</xf:input>
</td>
<td>
<xf:input ref="integer2" id="integer2">&gt;
<xf:label class="hidden">Column 2</xf:label>
<xf:alert validation="required">Required</xf:alert>
<xf:alert validation="integer">Must be a valid integer</xf:alert>
<xf:alert validation="one-or-more">Must be 1 or larger</xf:alert>
<xf:alert validation="ten-or-less">Must be 10 or smaller</xf:alert>
</xf:input>
</td>
<td>
<xf:input ref="integer3" id="integer3">
<xf:label class="hidden">Column 3</xf:label>
<xf:alert validation="required">Required</xf:alert>
<xf:alert validation="integer">Must be a valid integer</xf:alert>
<xf:alert validation="one-or-more">Must be 1 or larger</xf:alert>
<xf:alert validation="ten-or-less">Must be 10 or smaller</xf:alert>
</xf:input>
</td>
<td>
<xf:trigger>
<xf:label>Add</xf:label>
<xf:insert ref="." ev:event="DOMActivate"/>
</xf:trigger>
</td>
<td>
<xf:trigger>
<xf:label>Delete</xf:label>
<xf:delete ref="." ev:event="DOMActivate"/>
</xf:trigger>
</td>
</tr>
</xf:repeat>
</tbody>
</table>
</xf:group>
<fr:error-summary observer="my-group">
<fr:label>Your Form Contains the Following Errors</fr:label>
</fr:error-summary>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment