Event Reference (for Custom Forms)

This section contains event references for Custom Forms and examples of use cases and sample code for event handlers.

Supported Events for Field Elements

Custom Form elements are used to display data from the underlying loan file, and
for the user to input or modify loan data. The following field elements and its
supported events are available in the Encompass Web Input Form Builder:

Elements	Supported Events
Button	- Click
Calendar	- Change
Checkbox	- Change
Contact Button	Change FocusIn - FocusOut
Dropdown	Change FocusIn - FocusOut
Hyperlink	- Click
Image	N/A
Label	N/A
Multi-line Text Box	Change FocusIn - FocusOut
Radio Button	- Change
Rolodex	Change FocusIn - FocusOut
Text Box	Change FocusIn - FocusOut

Custom Form Element Functions Supported

Element	API	Set Value
All	color visible	`elli.script.getObject("GroupBox2").then(function (gb) { gb.visible(false); });`	`elli.script.getObject("GroupBox2").then(function (gb) { if(gb.visible()) { // Post processing when GroupBox1 is visible };})`
All elements with data binding enabled	value	`elli.script.getObject("TextBox1").then(function (tb) {tb.value(‘First Name’);});`	`elli.script.getObject("TextBox1").then(function (tb) {if(tb.value() ==‘First Name’){// Post processing when TextBox1 is set to FirstName};})`	Will fire change event if value is changed
Text Box	text	Same as value	Same as value
Label	text	Same as value	Same as value
Label font	Color	`elli.script.getObject("Label1").then(function (lb) {if(lb.color() ==colorVal) {};});`	`elli.script.getObject("Label1").then(function (lb) {lb.color(colorVal);});`
Check Box Radio Button	checked	`elli.script.getObject("CheckBox1").then(function (cb) {cb.value(false)});`	`elli.script.getObject("CheckBox1").then(function (cb) {if(cb.value() ==true) {};});`
Check Box Group Radio Button Group	value	`elli.script.getObject("CheckBox1").then(function (cb) {cb.value(‘Conventional’);});`	`elli.script.getObject("CheckBox1").then(function (cb) {if(cb.value() ==‘Conventional’) {};});`

Event Handler Examples

The following are examples include event handler use cases, sample code, and any relevant screenshots.

Change Event
Example Use Case:

The administrator creates a form where, depending on if “Own” or “Rent” is selected on the dropdown, the “Rent Information” group box is either hidden or displayed. Selecting “Own” hides the group box and selecting “Rent” displays it.
Sample Code (in ES5 and ES6/ES2017 formats):

function Dropdown1_OnChange(ctrl) {
    elli.script.getObject("Dropdown1").then(function(ctrl1) {
                ctrl1.value().then(function(DDvalue) {
                    if (DDvalue === "Rent") {
                        elli.script.getObject("GroupBox1").then(function(ctrlDP) {
                            ctrlDP.visible(true);
                        }) //end get object function
                    } // end if
                    else if (DDvalue === "Own") {
                        elli.script.getObject("GroupBox1").then(function(ctrlDP) {
                            ctrlDP.visible(false);
                        }) //end get object function
                    } //end else if
                    else {
                        elli.script.getObject("GroupBox1").then(function(ctrlDP) {
                            ctrlDP.visible(true);
                        }) //end script object
                    } //end else
                }) // end elli function

async function Dropdown1_change(ctrl) {
    var loan = await elli.script.getObject("loan");
    var RentOwn = await loan.getField('FR0115');
    var RentGroupBox = await
    elli.script.getObject("GroupBox1");
    var OwnGroupBox = await
    elli.script.getObject("GroupBox2");
    if (RentOwn == "Rent") {
        RentGroupBox.visible(true);
        OwnGroupBox.visible(false);
    } else if (RentOwn == "Own") {
        RentGroupBox.visible(false);
        OwnGroupBox.visible(true);
    }
}

Screenshots:

The administrator’s view of the form

The user’s view of the form when “Rent” is selected on the dropdown

The user’s view of the form when “Own” is selected on the dropdown

Code Example:

Subscribing to change event:
elli.script.subscribe('loan', 'change', functionNameYouWantToCallOnChange);

elli.script.subscribe('loan', 'change', loanChanged);

function loanChanged(obj, loanData) {
 console.log('Change event was fired. Here'
  s the info:
  ', obj, loanData);
 }

Click Event

Example Use Case:
The admin creates a Custom Form where the admin would like to use JavaScript logic on a Copy from Borrower button to copy over a specific field from Borrower information to a custom field.
Sample Code (in ES5 and ES6/ES2017 formats):

function copyFromBorrower_click(ctrl) {
    return elli.script.getObject('loan').then(function(loanObj) {
        return loanObj.getField('4000').then(function(val) {
            return loanObj.setFields(\{
                'cust01fv': val
            });
        });
    }).catch(function(error) {
        console.error('Error copying field:', error);
    });
}

async function copyFromBorrower_click(ctrl) {
    try {
        const loanObj = await elli.script.getObject('loan');
        const val = await loanObj.getField('4000');
        await loanObj.setFields(\{
            'cust01fv': val
        });
    } catch (error) {
        console.error('Error copying field:', error);
    }
}

FocusIn Event

Example Use Case:
The administrator creates a form where, if both the “FHA” radio button is selected and the “Loan Amount” text box is “focused in” (the user has selected inside the text box), the “Down Payment” text box automatically populates with a value of “3.500.”
Sample Code (in ES5 and ES6/ES2017 formats):

function LoanAmount_focusin(ctrl) {
    return elli.script.getObject('loan').then(function(loanObj) {
        return loanObj.getField('1172').then(function(loanType) {
            if (loanType === 'FHA') {
                return loanObj.setFields(\{
                    '1771': '3.5'
                });
            }
        });
    }).catch(function(error) {
        console.error('Error in focusin event:', error);
    });
}

async function LoanAmount_focusin(ctrl) {
    try {
        const loan = await elli.script.getObject('loan');
        const loanType = await loan.getField('1172');
        if (loanType === 'FHA') {
            await loan.setFields(\{
                '1771': '3.5'
            });
        }
    } catch (error) {
        console.error('Error in focusin event:', error);
    }
}

Screenshots:

The administrator’s view of the form

The user’s view of the form

FocusOut Event

Example Use Case:
The administrator creates a form where, if both the “FHA” radio button is not selected and the “Loan Amount” text box is “focused out” (the user has not selected inside the text box), the “Down Payment” text box automatically populates with a value of “0.000.”
Sample Code (in ES5 and ES6/ES2017 formats):

function LoanAmount_focusout(ctrl) {
    return elli.script.getObject('loan').then(function(loanObj) {
        return loanObj.getField('1172').then(function(loanType) {
            if (loanType !== 'FHA') {
                return loanObj.setFields(\{
                    '1771': '0'
                });
            }
        });
    }).catch(function(error) {
        console.error('Error in focusout event:', error);
    });
}

async function LoanAmount_focusout(ctrl) {
    try {
        const loan = await elli.script.getObject('loan');
        const loanType = await loan.getField('1172');
        if (loanType !== 'FHA') {
            await loan.setFields(\{
                '1771': '0'
            });
        }
    } catch (error) {
        console.error('Error in focusout event:', error);
    }
}

Screenshots:

The administrator’s view of the form

The user’s view of the form

Load Event

Example Use Case:
The administrator creates a form with three group boxes: “VA Data,” “Conventional Data,” and “FHA Data.” Upon loading the form, the group boxes will be hidden or displayed depending on the value in the “Loan Type” text box. If the value in the “Loan Type” text box is “VA,” then the “Conventional Data” and “FHA Data” group boxes are hidden and the “VA Data” group box is displayed.
Sample Code (in ES5 and ES6/ES2017 formats):

function form_load(ctrl) {
    return elli.script.getObject('loan').then(function(loanObj) {
        return loanObj.getField('1172').then(function(loanType) {
            if (loanType === 'FHA') {
                return Promise.all([
                    elli.script.getObject('GroupBox1').then(function(gb) {
                        return gb.visible(false);
                    }),
                    elli.script.getObject('GroupBox2').then(function(gb) {
                        return gb.visible(false);
                    }),
                    elli.script.getObject('GroupBox3').then(function(gb) {
                        return gb.visible(true);
                    })
                ]);
            } else if (loanType === 'VA') {
                return Promise.all([
                    elli.script.getObject('GroupBox1').then(function(gb) {
                        return gb.visible(true);
                    }),
                    elli.script.getObject('GroupBox2').then(function(gb) {
                        return gb.visible(false);
                    }),
                    elli.script.getObject('GroupBox3').then(function(gb) {
                        return gb.visible(false);
                    })
                ]);
            } else if (loanType === 'Conventional') {
                return Promise.all([
                    elli.script.getObject('GroupBox1').then(function(gb) {
                        return gb.visible(false);
                    }),
                    elli.script.getObject('GroupBox2').then(function(gb) {
                        return gb.visible(true);
                    }),
                    elli.script.getObject('GroupBox3').then(function(gb) {
                        return gb.visible(false);
                    })
                ]);
            }
        });
    }).catch(function(error) {
        console.error('Error in form load:', error);
    });
}

async function form_load(ctrl) {
    try {
        const loan = await elli.script.getObject('loan');
        const loanType = await loan.getField('1172');
        const vaGroupBox = await elli.script.getObject('GroupBox1');
        const convGroupBox = await elli.script.getObject('GroupBox2');
        const fhaGroupBox = await elli.script.getObject('GroupBox3');
        if (loanType === 'VA') {
            await Promise.all([vaGroupBox.visible(true), convGroupBox.visible(false), fhaGroupBox.visible(false)]);
        } else if (loanType === 'Conventional') {
            await Promise.all([vaGroupBox.visible(false), convGroupBox.visible(true), fhaGroupBox.visible(false)]);
        } else if (loanType === 'FHA') {
            await Promise.all([vaGroupBox.visible(false), convGroupBox.visible(false), fhaGroupBox.visible(true)]);
        }
    } catch (error) {
        console.error('Error in form load:', error);
    }
}

Screenshots:

The administrator’s view of the form

The user’s view of the form

Unload Event

Example Use Case:
The administrator creates a form where, upon closing the form, the text boxes “field ID 4000” and “field ID 52” are populated with the values “Test Borrower” and “Married,” respectively.
Sample Code (in ES5 and ES6/ES2017 formats):

function form_unload(ctrl) {
    return elli.script.getObject('loan').then(function(loanObj) {
        return loanObj.setFields({
            '4000': 'TestBorrower',
            '52': 'Married'
        });
    }).catch(function(error) {
        console.error('Error in form unload:', error);
    });
}

async function form_unload(ctrl) {
    try {
        const loanObj = await elli.script.getObject('loan');
        await loanObj.setFields({
            '4000': 'TestBorrower',
            '52': 'Married'
        });
    } catch (error) {
        console.error('Error in form unload:', error);
    }
}