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

Module-wide JavaScript

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.

Custom JavaScript functions

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

Init

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

Blur

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

Changed

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

Filter

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

Working Examples

Conditional statement to set a field(customString1) when a boolean field(customBool1) is true(checked)

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

Conditional statement setting a declared variable, checking if it has no value, and if so, sets the text value of the field.

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

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

Conditional statement setting declared variables and showing one button of three while hiding the other two based on the selection

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

Values able to be easily accessed throughout the system

%(LoggedInUsersEmailAddress)%

%(LoggedInUsersID)%

%(LoggedInUsersFirstName)%

%(LoggedInUsersLastName)%

%(ConfigTimeZoneAbbr)%

%(ConfigTimeZone)%

%(Now)%

%(SiteURL)%

%(SiteTitle)%

%(SiteHeader)%

%(SiteID)%

%(ModuleName)%

%(ModuleID)%

%(DirectLinkToRequest)%

Formatting for values

%(<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

Character	Formatting functionality
d	Represents the day of the month as a number from 1 through 31.
dd	Represents the day of the month as a number from 01 through 31.
ddd	Represents the abbreviated name of the day. (Mon, Tues, Wed etc).
dddd	Represents the full name of the day. (Monday, Tuesday etc).
h	12-hour clock hour. (e.g. 4).
hh	12-hour clock, with a leading 0. (e.g. 06)
H	24-hour clock hour. (e.g. 15)
HH	24-hour clock hour, with a leading 0. (e.g. 22)
m	Minutes.
mm	Minutes with a leading zero.
M	Month number. (eg.3)
MM	Month number with leading zero. (eg.04)
MMM	Abbreviated Month Name. (e.g. Dec)
MMMM	Full month name. (e.g. December)
s	Seconds.
ss	Seconds with leading zero.
t	Abbreviated AM / PM. (e.g. A or P)
tt	AM / PM. (e.g. AM or PM)
K	Represents the time zone information of a date and time value. (e.g. +05:00)

y	Year, no leading zero (e.g. 2015 would be 15)
yy	Year, leadin zero (e.g. 2015 would be 015)
yyy	Year, (e.g. 2015)
yyyy	Year, (e.g. 2015)
z	Represents the signed offset of the local operating system's time zone from
zz	As z, but with leading zero (e.g. +06)
zzz	With DateTime values, represents the signed offset of the local operating system's time zone from UTC,measured in hours and minutes. (e.g. +06:00)
f	Represents the most significant digit of the seconds fraction; that is, it represents the tenths of a second in a date and time value.
ff	Represents the two most significant digits of the seconds fraction in date and time
fff	Represents the three most significant digits of the seconds fraction; that is, it represents the milliseconds in a date and time value.
ffff	Represents the four most significant digits of the seconds fraction; that is, it represents the ten thousandths of a second in a date and time value. While it is possible to display the ten thousandths of a second component of a time value, that value may not be meaningful.
fffff	Represents the five most significant digits of the seconds fraction; that is, it represents the hundred thousandths of a second in a date and time value.
ffffff	Represents the six most significant digits of the seconds fraction; that is, it represents the millionths of a Second in a date and time value.
fffffff	Represents the seven most significant digits of the seconds fraction; that is, it represents the ten millionths of a second in a date and time value.

Support Center