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.
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">
<script>
window.Preview.generateDocumentPreview("#yourDiv", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", "500px", "100%");
</script>
<div>
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.