See Actions - <script> action.

The javascript: protocol

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

Using AVTs on the resource attribute, this allows you to pass parameters from XForms to JavaScript.

Calling XForms from JavaScript

Getting and Setting Controls Value 

To:

• Get a control value, use: var value = ORBEON.xforms.Document.getValue(myControl).
• Set 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. Effective ids usually have the form myControl·1-2, where the suffix indicates the levels of repetition. The "·" character is unicode U+00B7.

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.

 The input control below is bound to <foo>, and the output control is bound to <bar>. When activated, the trigger executes JavaScript with the <xxforms: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>.

Dispatching Events

You can dispatch your own events from JavaScript by calling the function ORBEON.xforms.Document.dispatchEvent(). The parameters to this function are:

targetId	Mandatory	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 <xforms:model>, <xforms:instance>, or <xforms:submission>.
eventName	Mandatory	Name of the event. Note: 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 xxforms:external-events attribute on the first <xforms:model> element, for example: <xforms:model xxforms:external-events=         "acme-super-event acme-famous-event">     ... </xforms: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. [SINCE 2012-04-09] XBL components can also declare that they support external events: <xbl:binding xxforms: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.
form	Optional	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. Typically, this would only happens if you are running your form in a portal and you have multiple portlets using XForms 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.
bubbles	Optional	Optional boolean indicating if this event bubbles, as defined in DOM2 Events. The default value depends on the definition of the custom event.
cancelable	Optional	Optional boolean indicating if this event is cancelable, as defined in DOM2 Events. The default value depends on the definition of the custom event.
incremental	Optional	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	Optional	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.

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


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 explicatly declared to handle the do-something event on the XForms model:

Custom Events

The arguments of your listener 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).