The application forms can be manipulated using javascript either on a per-program or global basis.  

Global Handler for Public Theme
At the theme level you can add the following code to the footer:

<script>
FrontendApiManager.onReady("submissionForm", function (api) {
   //remaining code goes here
});
</script>

The options for onReady include submissionForm, evaluationForm and sessionForm depending on the form you plan to manipulate.

Form Specific Handler
If you plan to inject code to update the admin portal the only option is to use the Developer Settings option in the various form builders.

Here you will see the option to add javascript.  You can add third party script URLs to pre-load.  After all scripts pre-load you the javascript entered will then execute.  The above code is the equivalent of the onReady code listed above.

API Examples

Example 1: Get, Set and Alert on Change of a Single Line Text Box

    /**Single line text box has alias of textBox**/
    var textBox = api.getField("textBox");
    window.originalValue = textBox.getValue("textBox");
   
    textBox.setValue("Test");
    textBox.hide();
    textBox.show();
   
    textBox.onChange(function () {
        alert(textBox.getValue());
    });
    textBox.offChange(function () {
        //stop binding
    });


Example 2: Add a Row to a Table Field

 var table = api.getField("table");
    table.addRow([
        {
            alias: "firstNameTable",
            value: "ahmed"
        },
        {
            alias: "lastNameTable",
            value: "mohamed"
        }
    ]);
    table.hide();
    table.show();
    table.removeRow(0);
    table.getRowCount();

Example 3: Cancel Changed Field

    var textBox = api.getField("textBox");

   
    textBox.onChange(function (oldValue, newValue) {
        return {canceled: true};
    });


Example 4: Auto-Complete Widget

    var autocomplete = api.getField("autocomplete");
    autocomplete.autocomplete({
        serviceUrl: apiURL, //external URL
        paramName: 'query',
        transformResult: function (response) {
            return {
                suggestions: $.map(response.myData, function (dataItem) {
                    return { value: dataItem.valueField, data: dataItem.dataField };
                })
            };
        }
    });

/* response.myData is in this format:
[
  { "value": "United Arab Emirates", "data": "AE" },
  { "value": "United Kingdom", "data": "UK" },
  { "value": "United States", "data": "US" }
]*/


Full API Documentation
Full Javascript Documentation can be found here.

Did this answer your question?