In this topic

JavaScript in the Form Designer

The LFForm object provides a global interface for accessing Laserfiche form elements and events using JavaScript. Through simple functions, you can find a specific field, retrieve the field values, and update field contents. You also have access to many form events.

Note: JavaScript created for the Classic Designer based forms will not work in the Form Designer. JavaScript will need to be ported or rewritten to use the LFForms object to access elements of the form. Custom JavaScript code added to the form designer is executed in a sand-boxed iFrame for security and do not support pop ups.

Identification Objects

Identification objects are objects containing information identifying which fields the interface should act on. Identification objects can have the following properties:

Note: In all LFForm interfaces, you can specify an array of identification objects instead of just one object to target multiple fields.

Example: LFForm.getFieldValues([{fieldId: 2}, {fieldId: 3}]).

To the top

Table/Collection Row/Set Templates

For tables and collections, a form stores the definition for each row or set as a template. These templates are used to generate the row or set whenever they are added. Some of the interfaces in the LFForm object have the ability to affect the template of the field, with the ability to apply changes to future rows or sets.

For these interfaces, when your ID object specifies an index (for example {fieldId: 3, index: 1}), the change will only be applied to the field at the specified index. If your ID object does not specify an index (for example {fieldId: 3}), the change will be applied to the template, and will be applied to all existing and future rows or sets.

To the top

The LFForm Interfaces

To the top

getFieldValues

Gets the value of the specified fields.

Examples:

To the top

setFieldValues

Sets the value of the specified fields.

Examples:

To the top

showFields

Shows the specified fields. This function can affect table/collection row/set templates.

Examples:

To the top

hideFields

Hides the specified fields. This function can affect table/collection row/set templates.

Examples:

To the top

disableFields

Disables the specified fields. This function can affect table/collection row/set templates.

Examples:

To the top

enableFields

Enables the specified fields. This function can affect table/collection row/set templates.

Examples:

To the top

changeFieldSettings

Changes settings on the specified fields. This function can affect table/collection row/set templates.

Examples:

To the top

changeFieldOptions

Change Checkbox/Radio/Dropdown field options.

Examples:

To the top

changeFormSettings

Change the settings on the form.

Examples:

To the top

changeActionButton

Change the label of a single action button. Buttons include the Submit, Approve, and Reject submission actions, the Save as Draft button, and user defined custom submission action buttons on forms used by message start events and user tasks.

Example:

To the top

changeActionButtons

Change the label of a list of action buttons. Buttons include the Submit, Approve, and Reject submission actions, the Save as Draft button, and user defined custom submission action buttons on forms used by message start events and user tasks.

Example:

To the top

addRow, addSet

Adds new rows or sets to a table or collection.

Examples:

To the top

deleteRow, deleteSet

Deletes the specified rows or sets from a table or collection.

Examples:

To the top

addCSSClasses

Adds CSS classes to the specified fields. This function can affect table/collection row/set templates.

Examples:

Note: Adding CSS classes that were already on the field will not add duplicate classes.

To the top

removeCSSClasses

Removes the specified CSS classes from the specified fields. This function can affect table/collection row/set templates.

Examples:

Note: Attempting to remove CSS classes that were not on the field will be ignored.

To the top

findFields

Finds any fields that satisfy the specified arbitrary conditions.

Examples:

To the top

findFieldsByClassName

Finds fields with the specified CSS class.

Example:

LFForm.findFieldsByClassName("blue");

To the top

findFieldsByFieldId

Finds the fields with the specified field ID.

Example:

LFForm.findFieldsByFieldId(2);

To the top

findFieldsByVariableName

Finds the fields with the specified variable name.

Example:

LFForm.findFieldsByVariableName("Single_Line");

To the top

findFieldsByVariableId

Finds the fields with the specified variable ID.

Example:

LFForm.findFieldsByVariableId("2343");

To the top

subscribe

Subscribe to an event for a specific field.

Examples:

To the top

unsubscribe

Unsubscribe from events.

Examples:

To the top

onFormSubmission

Subscribe to the formSubmission event.

Example: 

LFForm.onFormSubmission(function () {
	if (LFForm.getFieldValues({fieldId: 3}) === "ERROR") {
		return {error: "Please fix the error before submitting."};
		}
	});

Note: If the handler returns an object with an "error" property (for example {error: "There is something wrong on the form. Cannot submit."}), the submission is stopped and the error will be displayed as a popup message on the page.

To the top

onFieldChange

Subscribe to the change event for the specified fields.

Example:

LFForm.onFieldChange(() => console.log("change"), {variableName: "Single_Line"});

To the top

onFieldBlur

Subscribe to the blur event for the specified fields.

Example:

LFForm.onFieldBlur(() => console.log("blur"), {variableName: "Single_Line"});

To the top

onLookupTrigger

Subscribe to a lookup trigger event.

Example: 

LFForm.onLookupTrigger(function () {
	if (LFForm.getFieldValues({variableName: "TriggerField"}) === "NoCall") {
		return {cancelLookup: true};
		}
	}, {lookupRuleId: 3}); // When lookup rule 3 is triggered, 
		// if field with variable name "TriggerField" has value of "NoCall", 
		// cancel the lookup call.

Note: if the handler returns an object with the "cancelLookup" property set to true, the lookup call will be canceled.

To the top

onLookupDone

Subscribe to the lookup done event.

Example: 

LFForm.onLookupDone(function () {
	if (LFForm.getFieldValues({variableName: "Lookup_Target"}) === "Hello") {
		LFForm.setFieldValues({variableName: "Lookup_Target_AutoComplete"}, "World!");
		}
	}, {lookupRuleId: 2}); // after lookup rule 2 is done, check for Lookup_Target value. 
	// If it is "Hello", set the Lookup_Target_AutoComplete to "World!"