Winshuttle Composer JavaScript reference guide

JavaScript reference guides

The Winshuttle Composer rules interface uses the Web browser's JavaScript engine. The Composer Rule Wizard defines built-in rules, which are then converted to JavaScript when the form is run.

But if the Composer Rule Wizard still does not meet your needs, you can create and customize specific functions through advanced JavaScript rules, which are generally divided among the following:

Function type	Description
Form Functions	General form functions used to manipulate form fields and elements, such as creating or hiding groups, reloading dropdown options, setting values in fields, and more.
Workflow functions	Functions generally used and applied to Workflow Transitions to control workflow logic.
Global Helper Functions	More discreet functions generally used to manipulate data in fields, and perform tasks such as converting text from upper case to lower case, averaging a set of values, returning the number of values in a repeating group, etc.
JQuery Functions	A small set of helper functions that can be used by JQuery users.

Important Notes - Please Read

You can permanently convert rules to JavaScript code, and/or create custom CSS styles for your forms.
Once a rule is converted to JavaScript code, it cannot be converted back to a built-in rule. From that point forward, the rule can be maintained only through the JavaScript code editor (not the rule wizard user interface).
Winshuttle Support cannot help you create or troubleshoot JavaScript.

Adding custom JavaScript/CSS to a form

The Composer solution tree has two nodes where custom JavaScript Code and Custom CSS (Styles) are stored.

Open Composer.
Open your solution file.
Click the Solution tab.
In the Solution pane, double-click either node (Javascript Code or Custom Styles) to open the built-in JavaScript or CSS code editor. (See example at right.)

You can also right-click a node to open the context menu, and edit the JavaScript/CSS references. The References dialogs allow you to insert links to JavaScript files or CSS files from any URL.

Accessing form field values

To access or modify a field, use $form.getValue and $form.setValue in the form.

You should not access DOM elements directly to manipulate the values. Doing so will disrupt proper event handling and rules propagation within the form renderer.

Using jQuery

The form renderer uses jQuery, which is available for use within rules.

Instead of using $ to access jQuery functionality, you should use the alias $j or use the full jQuery function name.