Skip to main content
OpenWater Javascript (JS) API

Documentation for our frontend api to manipulate the application, review and session chair forms.

Kunal Johar avatar
Written by Kunal Johar
Updated over a week ago

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:

FrontendApiManager.onReady("submissionForm", function (api) {
   //remaining code goes here

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

Preview Engine
On any page that supports custom HTML such as a website content page or a gallery you can generate a preview of a PDF or office document.

<div id="yourDiv">
window.Preview.generateDocumentPreview("#yourDiv", "", "500px", "100%");

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.onChange(function () {
    textBox.offChange(function () {
        //stop binding

Example 2: Add a Row to a Table Field

 var table = api.getField("table");
            alias: "firstNameTable",
            value: "ahmed"
            alias: "lastNameTable",
            value: "mohamed"

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");
        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" }

Did this answer your question?