Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/Orbeon XForms JavaScript using xf:load and AVTs

Created October 9, 2013 15:12
Show Gist options
  • Save dmccreary/6902826 to your computer and use it in GitHub Desktop.
Save dmccreary/6902826 to your computer and use it in GitHub Desktop.
Download ZIP
With Orbeon, you can pass parameters between an XForms application and a JavaScript function using the <xf:load> statement and Attribute Value Templates (AVTs). This example shows you how it is done. Note that there are a few samples (in comments) that do not work due to limitations in the ways parameters are passed. Thanks to Alessandro Vernet …
Raw
Orbeon XForms JavaScript using xf:load and AVTs
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Example of Using JavaScript Variable Passing Using xf:load and Attribute Value Templates</title>
<!--
http://wiki.orbeon.com/forms/doc/developer-guide/xforms-actions/actions-script-action
http://wiki.orbeon.com/forms/doc/developer-guide/xforms-javascript-integration
Note that http://wiki.orbeon.com/forms/projects/client-side-api-for-custom-javascript-widgets is not yet implementd
-->
<xf:model>
<xf:instance xmlns="" id="save-data">
<data>
<firstName>Dan</firstName>
<lastName>McCreary</lastName>
<row>
<element>Element 1 Content</element>
</row>
<row>
<element>Element 2 Content</element>
</row>
<row>
<element>Element 3 Content</element>
</row>
<row>
<element>Element 4 Content</element>
</row>
</data>
</xf:instance>
</xf:model>
<script>
// display an alert panel with one or two parameters using the JavaScript alert() function.
// note that spaces and special characters are escaped within the alert panel
function showOneParameter(string) {
alert('The string =' + string);
};
function showTwoParameters(string1, string2) {
alert('String1=' + string1 + ' String2=' + string2);
};
</script>
<style type="text/css">
.orbeon .xforms-label {display: inline-block;}
.orbeon .xforms-label {font-weight: bold; width: 21ex; text-align: right; margin-right: 3px;}
</style>
</head>
<body>
<h4>AVT Loads outside a repeat</h4>
<fieldset>
<xf:input ref="firstName">
<xf:label>First Name:</xf:label>
</xf:input>
<br/>
<xf:input ref="lastName">
<xf:label>Last Name:</xf:label>
</xf:input>
</fieldset>
<xf:trigger appearance="minimal">
<xf:label>Link</xf:label>
<xf:action ev:event="DOMActivate">
<xf:load resource="javascript:showTwoParameters('{firstName}','{lastName}')"/>
<!-- pass
<xf:load resource="javascript:showOneParameter('{firstName}')"/>
<xf:load resource="javascript:showOneParameter('{//firstName}')"/>
<xf:load resource="javascript:showOneParameter('{instance('save-data')/firstName}')"/>
-->
<!--
Notes:
Fails if there are ANY spaces between the parameters like this:
<xf:load resource="javascript:showTwoParameters('{firstName}', '{lastName}')"/>
Fails : if you have any content inside the instance with a single quote in it
Fails : if you have any double quotes in the expression within double quotes of the attribute
-->
</xf:action>
</xf:trigger>
<h4>AVT Loads within a repeat</h4>
<br/>
<xf:repeat ref="row" id="repeat-1">
<xf:input ref="element"/>
<xf:trigger appearance="minimal">
<xf:label>Link</xf:label>
<xf:action ev:event="DOMActivate">
<!-- pass
<xf:load resource="javascript:showOneParameter({position()})"/>
<xf:load resource="javascript:showOneParameter('{element}')"/>
<xf:load resource="javascript:showTwoParameters('{element}',{position()})"/>
<xf:load resource="javascript:showTwoParameters('{element}',{index('repeat-1')})"/>
-->
<xf:load resource="javascript:showTwoParameters('{element}',{index('repeat-1')})"/>
</xf:action>
</xf:trigger>
<br/>
</xf:repeat>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment