Orbeon Forms
  • Getting started
  • Installation
    • Logging
    • Configuration banner
    • Docker
    • Azure
    • Tomcat
    • WildFly
    • WebSphere
    • WebLogic
    • GlassFish
    • Caches
    • Replication
    • Upgrading
  • Configuration
    • Properties
      • General
        • HTTP client
      • Form Runner
        • Detail page
          • Attachments
          • Email properties
          • PDF
          • Table of contents
        • Persistence
        • Summary page
      • Form Builder
      • XForms
    • Advanced
      • Workflows
      • Session management
      • State handling
      • Client-side error handling
      • Clustering and High Availability
      • Configuring a Form Runner eXist database
      • Creating a production WAR
      • Environments
      • JavaScript and CSS assets
      • Limiter filter
      • Run modes
      • Security
        • Content-Security-Policy header
      • SAP Hybris Module
      • XForms logging
    • Troubleshooting
      • Troubleshooting with the orbeon.log
      • Memory and threads
      • Relational database logging
      • Misc
  • Form Builder
    • Form settings
      • Time window
    • Form editor
      • Form area
      • Toolbox
      • Buttons bar
      • Control settings
      • Dependent fields and sections
      • Validation
      • Choices editor
      • Publishing
      • Cut, copy and paste
      • Section and grid settings
      • Section settings
      • Grid settings
      • Quick control search
      • Repeat settings
      • Repeated grids
      • Undo and redo
      • Keyboard shortcuts
    • Formulas
      • Examples of formulas
      • Formulas inspector
      • Formulas console
    • Summary page
    • Form localization
    • Advanced
      • Edit source
      • Services and actions
        • HTTP services
        • Database services
        • Simple Actions
        • Action Syntax
        • Action Syntax examples
        • Synchronizing repeated content
      • Testing a form in web mode
      • Testing PDF production
      • Testing offline functionality
      • Email Settings dialog
      • Field-level encryption
      • Messages
      • Section templates
      • Template syntax
      • XML Schemas support
      • Extensibility
        • Extension API
        • Integration
        • Toolbox component metadata
  • Form Runner
    • Overview
      • Terminology
    • Pages
      • Landing page
      • Published Forms page
      • Forms Admin page
      • Summary page
    • Components
      • Alert dialog
      • Attachment
      • Autocomplete
      • Captcha
      • Character counter
      • Checkbox input
      • Currency
      • Date
      • Dropdown date
      • Static and dynamic dropdown
      • Error summary
      • Grid
      • Handwritten signature
      • Hidden field
      • Image
      • Image annotation
      • Image attachment
      • Number
      • Open selection
      • Repeater
      • Formatted Text / Rich Text Editor
      • Section
      • Single-selection tree
      • Source code editor
      • Time
      • US phone
      • US state
      • Video
      • Video attachment
      • Wizard
      • XForms inspector
      • Yes/No answer
    • Features
      • Automatic calculations dependencies
      • Datasets
      • Excel and XML import
      • Excel and XML export
      • Summary page Excel Export
      • Form definitions and form data Zip Export
      • Purging historical data
      • Lease
      • Localization
      • Supported languages
      • Mobile support
      • Multitenancy
      • Form Runner navigation bar
      • PDF production
        • Automatic PDF
        • Automatic PDF header and footer configuration
        • PDF templates
      • Responsive design
      • Revision history
      • S3 storage
      • Simple data migration
      • TIFF production
      • Versioning
      • Wizard view
      • Workflow stage
    • Persistence
      • Using a relational database
      • Relational database schema
      • Purging old data using SQL
      • Auditing
      • Autosave
      • Database support
      • Flat view
    • Linking and embedding
      • Linking
      • Java Embedding API
      • JavaScript Embedding API
      • Liferay full portlet
      • Liferay proxy portlet
      • Securing Form Runner access
      • Form Runner offline embedding API
      • Angular component
      • React component
    • Access control and permissions
      • Users
      • Login & Logout
      • Deployed forms
      • Form fields
      • Editing forms
      • Owner and group member
      • Organizations
      • Scenarios
      • Token-based permissions
    • Styling
      • CSS
      • Grids CSS
      • Automatic PDF styling and CSS
    • APIs
      • Authentication of server-side service APIs
      • Persistence API
        • CRUD API
        • Search API
        • List form data attachments API
        • Form Metadata API
        • Lease API
        • Reindexing API
        • Caching
        • Versioning
        • Revision History API
        • Zip Export API
        • Custom persistence providers
      • Other APIs
        • Connection context API
        • Duplicate form data API
        • File scan API
        • Form Runner JavaScript API
        • Generate XML Schema API
        • PDF API
        • Publish form definition API
        • Run form in the background API
      • Data formats
        • Form data
        • Date and time
        • Form definition
    • Architecture and integration
      • Architecture
      • Access form data
      • Integration
    • Advanced
      • Buttons and processes
        • Simple process syntax
        • Core actions
        • Form Runner actions
          • Save action
          • Send action
          • Email action
        • XForms actions
        • Predefined buttons, processes and dialogs
        • Summary page buttons and processes
      • Custom dialogs/model logic
      • Services
      • Singleton form
      • Monitoring HTTP requests
  • XForms
    • Core
      • Attribute Value Templates (AVTs)
      • Binds
      • Validation
      • Variables
      • Keyboard focus
      • XForms JavaScript API
      • Error handling
        • Detailed behavior
      • Model-Bind variables
      • XForms 2.0 support
    • Events
      • Standard support
      • UI refresh events
      • Keyboard events
      • Extension events
      • Extension context information
      • Other event extensions
    • Actions
      • Repeat, insert and delete
      • Scripting actions
      • Extensions
    • Controls
      • Label, hint, help
      • Input
      • Output
      • Text area
      • Button
      • Upload
      • Dialog
    • Submission
      • Standard support
      • JSON support
      • Asynchronous submissions
      • Caching extension
      • Other submission extensions
    • XPath
      • Type annotations
      • Expression analysis
      • Tips
      • Compatibility
      • Standard functions
      • Maps and arrays Functions
      • Extension functions
        • Core functions
        • Utility functions
        • Model functions
        • Controls functions
        • XML functions
        • JSON functions
        • HTTP functions
        • Form Runner functions
        • Other functions
        • Deprecated functions
    • XBL components
      • FAQ
      • Guide
        • XBL Tutorial
        • Bindings
        • XForms models
        • Including content
        • Event handling
        • Conventions
        • Map XBL example
        • Learning from existing components
      • Advanced topics
        • XBL Modes
        • JavaScript companion classes
        • XBL library
        • Extensions
        • Attachment controls
    • XForms tutorial
      • Introduction
      • Installation
      • The Hello application
      • The Bookcast application
        • The basic app
        • Database access
        • Polishing the app
        • Adding a feed
    • Using XForms from Java apps
  • XML Platform
    • Page Flow Controller
      • Basics
      • XML submission
      • Navigating between pages
      • Paths and matchers
      • Other configuration elements
      • Typical combinations of page model and page view
      • Examples
      • Authorizing pages and services
    • Processors
      • URL generator
      • Request generator
      • PDF to image converter
    • Resources
      • Resource managers
      • Setting up an external resources directory
    • Other
      • Binary and text documents
  • FAQ
    • Licensing
    • PE and Dev Support
    • Form Builder and Form Runner
    • Resources and support
    • Other technical questions
  • Contributors
    • Automated tests
    • Building Orbeon Forms
    • Localizing Orbeon Forms
    • Validation functions
    • Contributor License Agreement
  • Release notes
    • Orbeon Forms 2022.1.9
    • Orbeon Forms 2024.1.1
    • Orbeon Forms 2023.1.7
    • Orbeon Forms 2024.1
    • Orbeon Forms 2023.1.6
    • Orbeon Forms 2023.1.5
    • Orbeon Forms 2021.1.11
    • Orbeon Forms 2022.1.8
    • Orbeon Forms 2023.1.4
    • Orbeon Forms 2023.1.3
    • Orbeon Forms 2023.1.2
    • Orbeon Forms 2022.1.7
    • Orbeon Forms 2023.1.1
    • Orbeon Forms 2023.1
    • Orbeon Forms 2022.1.6
    • Orbeon Forms 2021.1.10
    • Orbeon Forms 2022.1.5
    • Orbeon Forms 2021.1.9
    • Orbeon Forms 2022.1.4
    • Orbeon Forms 2022.1.3
    • Orbeon Forms 2021.1.8
    • Orbeon Forms 2022.1.2
    • Orbeon Forms 2022.1.1
    • Orbeon Forms 2022.1
    • Orbeon Forms 2021.1.7
    • Orbeon Forms 2021.1.6
    • Orbeon Forms 2021.1.5
    • Orbeon Forms 2021.1.4
    • Orbeon Forms 2021.1.3
    • Orbeon Forms 2021.1.2
    • Orbeon Forms 2021.1.1
    • Orbeon Forms 2021.1
    • Orbeon Forms 2020.1.6
    • Orbeon Forms 2019.2.4
    • Orbeon Forms 2019.1.2
    • Orbeon Forms 2018.2.5
    • Orbeon Forms 2018.1.4
    • Orbeon Forms 2020.1.5
    • Orbeon Forms 2020.1.4
    • Orbeon Forms 2020.1.3
    • Orbeon Forms 2020.1.2
    • Orbeon Forms 2019.2.3
    • Orbeon Forms 2020.1.1
    • Orbeon Forms 2020.1
    • Orbeon Forms 2019.2.2
    • Orbeon Forms 2019.2.1
    • Orbeon Forms 2019.1.1
    • Orbeon Forms 2019.2
    • Orbeon Forms 2019.1
    • Orbeon Forms 2018.2.4
  • Release history
  • Use cases
  • Product roadmap
  • Index of features
Powered by GitBook
On this page
  • Rationale
  • Calling JavaScript from XForms
  • Scripting actions
  • The javascript: protocol
  • Calling XForms from JavaScript
  • Public API
  • Getting and setting controls value
  • Setting focus on a control
  • Dispatching events
  • The orbeonLoaded event
  • The error event
  • Removing event listeners
  • See also
  1. XForms
  2. Core

XForms JavaScript API

PreviousKeyboard focusNextError handling

Last updated 1 month ago

Rationale

While XForms gets you a long way towards creating a dynamic user-friendly user interface, there are some dynamic behaviors of the user interface that cannot be implemented easily or at all with XForms, or you might already have some JavaScript code that you would like to reuse. A JavaScript client-side API is provided to handle those cases, or other use cases involving JavaScript.

Calling JavaScript from XForms

Scripting actions

See .

The javascript: protocol

[DEPRECATED SINCE Orbeon Forms 2016.1]

In addition to <xxf:script> / <xf:action>, you can also use the javascript: protocol from the <xf:load> action to run scripts:

<xf:load
    resource="
        javascript:ORBEON.Builder.controlAdded.fire('{$effective-id}')
"/>

Using AVTs on the resource attribute allows you to pass parameters from XForms to JavaScript, although you have to be careful to properly escape values.

Starting Orbeon Forms 2016.1, the recommended way to pass parameters is to use the nested <xxf:param> attribute of .

Calling XForms from JavaScript

Public API

The following objects are publicly exposed:

  • ORBEON.xforms.Document

  • ORBEON.xforms.Events.orbeonLoadedEvent

  • ORBEON.xforms.Events.errorEvent

Associated functions are described in more details below.

In addition, ORBEON.jQuery exposes the version of jQuery used by Orbeon Forms.

Getting and setting controls value

ORBEON.xforms.Document.getValue(controlIdOrElement, form)
ORBEON.xforms.Document.setValue(controlIdOrElement, newValue, form)
Name
Required
Type
Description

controlIdOrElement

Yes

String or HTMLElement

Either the id of the control without namespace (in the case of portal or embedding), or the control element.

newValue

Yes

Any value convertible with toString()

Value to set on the control (for setValue() only).

form

No

HTMLElement

[SINCE Orbeon Forms 2016.1] The form object that corresponds to the XForms control you want to deal with. This argument is only needed when you have multiple "XForms forms" on the same HTML page, which only happens if you are running your form in embedded mode and you have multiple forms on the same page. When the parameter is not present or null, the first form on the HTML page with the class xforms-form is used.

  • To get a control value, use: var value = ORBEON.xforms.Document.getValue(myControl).

  • To set a control value, use: ORBEON.xforms.Document.setValue(myControl, "42"). Setting the value with JavaScript is equivalent to changing the value of the control in the browser. This will trigger the recalculation of the instances, and the dispatch of the xforms-value-changed event. More formally, the Value Change sequence of events occurs.

For both getValue() and setValue():

  • The first parameter (myControl in the above example) can either be:

    • The id of the control (a string).

    • The element in the DOM that has this id.

  • Within repeats, currently you have to pass an "effective id", which is the id as found within the HTML element.

As an example, consider you have the model below. It declares an instance with two elements <foo> and <bar>, where <bar> is a copy of <foo>, implemented with a calculate MIP.

<xf:model>
    <xf:instance id="instance">
        <instance>
            <foo>42</foo>
            <bar/>
        </instance>
    </xf:instance>
    <xf:bind nodeset="/instance/bar" calculate="/instance/foo"/>
</xf:model>

The input control below is bound to <foo>, and the output control is bound to <bar>. When activated, the trigger executes JavaScript with the <xxf:script> action. It increments the value of the input control bound to <foo>. When this happens the value displayed by the output control bound to <bar> is incremented as well, as <bar> is a copy of <foo>.

<xh:p>
    <xf:input ref="foo" id="foo">
        <xf:label class="fixed-width">Value of foo:</xf:label>
    </xf:input>
</xh:p>
<xh:p>
    <xf:output ref="bar">
        <xf:label class="fixed-width">Value of bar:</xf:label>
    </xf:output>
</xh:p>
<xh:p>
    <xf:trigger>
        <xf:label>Increment foo with JavaScript</xf:label>
        <xxf:script ev:event="DOMActivate">
            var fooValue = ORBEON.xforms.Document.getValue("foo");
            ORBEON.xforms.Document.setValue("foo", Number(fooValue) + 1);
        </xxf:script>
    </xf:trigger>
</xh:p>

The setValue() function returns a JavaScript Promise which resolves when the value is set on the server.

For forms created in Form Builder

Keep in mind that, in Form Builder, if you have a field named first-name, the XForms id for that field will be first-name-control. Also, because your field is inside other containers, for instance a section, the id in the HTML for that field will have some prefix. Consequently, when using getValue() and setValue() described above, you'll want to write code along those lines:

var firstNameControl = ORBEON.jQuery('*[id $= "first-name-control"]')[0];
var firstName = ORBEON.xforms.Document.getValue(firstNameControl);

For compound XBL controls

Some XBL controls, like <fr:dropdown> AKA <xf:select1 appearance="dropdown"> are compound controls: they are built out of other controls and do not directly export a value to JavaScript.

For those, you have to go search for the nested core XForms control which holds the value, in this case the .xforms-select1 control:

ORBEON.xforms.Document.getValue(this.querySelector(".xforms-select1"))

Setting focus on a control

[SINCE Orbeon Forms 2017.2]

ORBEON.xforms.Document.focus(controlIdOrElement, form)

This function sets keyboard focus on the given control and lets the server know about the focus change if needed.

Name
Required
Type
Description

controlIdOrElement

Yes

String or HTMLElement

Either the id of the control without namespace (in the case of portal or embedding), or the control element.

form

No

HTMLElement

The form object that corresponds to the XForms control you want to deal with. This argument is only needed when you have multiple "XForms forms" on the same HTML page, which only happens if you are running your form in embedded mode and you have multiple forms on the same page. When the parameter is not present or null, the first form on the HTML page with the class xforms-form is used.

Example:

ORBEON.xforms.Document.focus(
    'fr-view-component≡text-controls-section≡xf-788≡input-control'
)

Actual focus only takes place if the control is focusable, not readonly, and not hidden within a hidden switch/case or dialog.

Dispatching events

Basic usage

ORBEON.xforms.Document.dispatchEvent(
    {
        targetId:  'my-target',
        eventName: 'my-event'
    }
);

You can dispatch your own events from JavaScript by calling the function ORBEON.xforms.Document.dispatchEvent(). The function takes a single parameter which is an object with properties as defined in the table below. Calling the function with several parameters in order listed in the table below is supported as a deprecated alternative for backward compatibility.

In most cases, you only need to call dispatchEvent() with a target id and event name, as in:

ORBEON.xforms.Document.dispatchEvent(
    {
        targetId:  'main-model',
        eventName: 'do-something'
    }
);

An event handler for the custom event can be in an XForms model or control, and can execute any valid XForms action. Here an action is explicitly declared to handle the do-something event on the XForms model:

<xf:model id="main-model" xxf:external-events="do-something">
    <xf:action ev:event="do-something">
        <xf:setvalue ref="first-name" value="instance('default-values')/first-name"/>
        <xf:toggle case="first-name-case"/>
    </xf:action>
</xf:model>

Parameters

Name
Required
Description

targetId

Yes

Id of the target element. The element must be an element in the XForms namespace: you cannot dispatch events to HTML elements. In addition, the id must identify either a relevant and non-readonly XForms control, or a model object that supports event handlers such as <xf:model>, <xf:instance>, or <xf:submission>.

eventName

Yes

Name of the event.

properties

No

Allows you to attach custom properties to the event.

form

No

The form object that corresponds to the XForms form you want to dispatch the event to. This argument is only needed when you have multiple "XForms forms" on the same HTML page, which only happens if you are running your form in embedded mode and you have multiple forms on the same page. When the parameter is not present or null, the first form on the HTML page with the class xforms-form is used.

incremental

No

When false the event is sent to the XForms server right away. When true the event is sent after a small delay, giving the opportunity for other events that would occur during that time span to be aggregated with the current event.

ignoreErrors

No

When set to true, errors happening while the event is dispatched to the server are ignored. This is in particular useful when you are using a JavaScript timer (e.g. window.setInterval()) that runs a JavaScript function on a regular interval to dispatch an event to the server, maybe to have part of the UI updated. In some cases, you might not want to alert the user when a there is a maybe temporary communication error while the event is being dispatched to the server. In those cases, you call dispatchEvent() with ignoreErrors set to true.

The following parameters were previously documented but had no effect. They are ignored and you should not use them:

  • bubbles

  • cancelable

Security considerations

For security reasons, by default Orbeon Forms prohibits client-side JavaScript from dispatching any external events except DOMActivate, DOMFocusIn, DOMFocusOut, and keypress. Furthermore, these events can only be dispatched to relevant and non-readonly XForms controls. In order to enable dispatching of custom events, you must first add the xxf:external-events attribute on the first <xf:model> element, for example:

<xf:model xxf:external-events="acme-super-event acme-famous-event">
    ...
</xf:model>

This attribute contains a space-separated list of event name. In this example, you explicitly enable your JavaScript code to fire the two events acme-super-event and acme-famous-event to any relevant and non-readonly XForms controls, or to any model object supporting event handlers. Note that you can only enable custom events, but you cannot enable standard XForms or DOM events in addition to DOMActivate, DOMFocusIn and DOMFocusOut.

Since the event handlers for custom events can be called by JavaScript code that runs on the client, you need to be aware that these handlers can potentially be activated by anybody able to load the form in his browser.

XBL components can also declare that they support external events:

<xbl:binding xxf:external-events="acme-super-event acme-famous-event">
    <xbl:handlers>
        <xbl:handler event="acme-super-event" phase="target">
            ...
        </xbl:handler>
    </xbl:handlers
    ...
</xbl:binding>

In that case the setting is only valid for the given XBL binding, not for the entire form. This in particular allows JavaScript companion code to communicate with XBL components.

Any XForms control can declare external events with the xxf:external-events attribute:

<xf:group xxf:external-events="fr-select fr-deselect">
    ...
</xf:group>

Custom properties

The properties parameter is a JSON object:

For instance:

ORBEON.xforms.Document.dispatchEvent({
    targetId:   "my-target",
    eventName:  "my-event",
    properties: { p1: 'v1', p2: 'v2' }
});

When properties are provided, the code handling the event can access the property values with the event() function. With the event dispatched above, in the handler for my-event on my-target, calling event('p1') will return the string 'v1'.

Passing properties is only supported when calling dispatchEvent() with a single object parameter; it isn't supported when calling it with multiple parameters.

The orbeonLoaded event

The ORBEON.xforms.Events.orbeonLoadedEvent fires when the form is fully loaded and initialized.

To add your event listener on, say orbeonLoadedEvent, write:

(function () {
    addEventListener("DOMContentLoaded", function () {
        ORBEON.xforms.Events.orbeonLoadedEvent.subscribe(function () {
            alert("Hello!");
        });
    });
}).call(this);

The above does a few things:

  • Add an event listener upon DOMContentLoaded (similar to jQuery's "ready"). When this event fires, the global ORBEON object exists.

  • Add your event handler for "orbeonLoaded".

The error event

The ORBEON.xforms.Events.errorEvent fires when the JavaScript code catches an error.

The arguments of the listener for errorEvent are as follows:

  1. The first argument is the name of the event (the string errorEvent), which most likely you don't need to know about if that listener is explicitly registered to this event.

  2. The second argument contains information about the error. Assuming you defined your second argument to be named eventData, inside your listener you can access:

    • eventData.title – A string describing the issue.

    • eventData.details – A string containing HTML with more information about the error, including:

      • If it happened in JavaScript: information of where the error happened (such as the file name and the line number).

      • If if happened on the server: detailed information about where the error happened (such as the invalid XPath expression and the file where that expression is found).

Removing event listeners

To remove your event listener on, say orbeonLoadedEvent, you'll need to implement your listener in a named function, say myListener:

ORBEON.xforms.Events.orbeonLoadedEvent.unsubscribe(myListener);

See also

See .

The first line above uses the to get the element in the DOM whose id ends with first-name-control.

NOTE: In some cases, if the Orbeon Forms initialization happened before adding the event handler, it was possible that the event could not fire. This is fixed with issue .

See also .

Scripting Actions
scripting actions
[SINCE Orbeon Forms 2024.1]
$= CSS selector
#3891
Form Runner JavaScript API
JavaScript Event Handler
JavaScript event handler
Adding your own JavaScript