How to: Understand the form field JavaScript Customizability

Within each field's properties, there is a Custom JavaScript tab with functions that can be used to tailor and extend the form.  There are also events related to workflow actions that permit customization of the form behavior when a user performs an action. In each of these cases, there are a few objects that can be referenced within the Custom JavaScript.

These objects which are passed into the function are:

formScope - attributes of the form as a whole - such as the data in the request currently displayed in the form

fieldScope - attributes of the field itself - such as flags that control if a field is currently visible and read-only

userInfo - attributes of the logged in user - such as their email address, name, and role

As one uses the events below, often the need to duplicate functionality between fields arises.  Rather than have duplicate code in multiple fields, one can package the code that would be duplicated as a function, and place that function in the module-wise JavaScript.  The module-wide JavaScript is accessible from a link at the top of the Field List and the form designer.  All data required by a module-wise JavaScript function should be passed into the function. 

The following functions are called by the system based on user interaction with the system.

The Custom JavaScript within this field will execute when the field is initialized (when the form is shown).

The Custom JavaScript within this field will execute when the user's focus leaves the field.

The Custom JavaScript within this field will execute when a fields state is changed.

When loading a field with values the filter field decides what values which are returned from the executed Custom JavaScript. 

if (formScope.formdata["customBool1"])
{
    formScope.formdata["customString1"] = '';
}

var province = formScope.formdata[fieldScope.fieldSchema.name];

if (!province || province.trim().length ===0)
{
    formScope.formdata[fieldScope.fieldSchema.name] = 'TextValue';
}

var approvalState = formScope.formdata["customSelectList1"];
var searchButtonElement = findElementByContent("button","Request Search Fee");
var approvedButtonElement = findElementByContent("button","Approved");
var rejectedButtonElement = findElementByContent("button","Reject");

if(approvalState === "Requested Search Fee")
{
    rejectedButtonElement.style.display = "none";
    searchButtonElement.style.display = "block";
    approvedButtonElement.style.display = "none";
}
if(approvalState === "Rejected")
{
    rejectedButtonElement.style.display = "block";
    searchButtonElement.style.display = "none";
    approvedButtonElement.style.display = "none";
}
if(approvalState === "Approved")
{
    rejectedButtonElement.style.display = "none";
    searchButtonElement.style.display = "none";
    approvedButtonElement.style.display = "block";
}

%(LoggedInUsersEmailAddress)%

%(LoggedInUsersID)%

%(LoggedInUsersFirstName)%

%(LoggedInUsersLastName)%

%(ConfigTimeZoneAbbr)%

%(ConfigTimeZone)%

%(Now)%

%(SiteURL)%

%(SiteTitle)%

%(SiteHeader)%

%(SiteID)%

%(ModuleName)%

%(ModuleID)%

%(DirectLinkToRequest)%

%(<VariableHere>:UrlEncode)% - 

Can be used to format a variable for use within a URL, for example this replaces spaces which are not valid in a URL with the proper "%20" value.

%(<DateTimeHere>:ToLocalTimeZone:Format"{0:MM/dd/yyyy}")% - 

This formatting suffix is used to decide which portions of the DateTime value are displayed and in what order. 

Example - ("MM/dd/yyyy hh:mm tt") = 05/29/2018 03:59 AM