WIXLIB

Chapter 2Form Builder Code BasicsThere are two ways an administrator can add JavaScript code to the Form Builder: Use the Code Editor to add code from directly within the Form Builder. Upload an external JavaScript file and link it to the form.There are six components to the Code Editor: File Name: Select a JavaScript file from the dropdown to link to the form.Adding Code with the Code EditorWhen the JavaScript Code Editor is first accessed, it opens a blank JavaScriptfile that is automatically linked to the form. A default file name is assigned tothe JavaScript file, which means it cannot be modified. If the file name alreadyexists, you will be prompted to rename the file before saving.Administrators can use the Code Editor to create JavaScript code and save it asa JavaScript file from directly within the Form Builder. These newly createdJavaScript files are automatically linked to the current form.The file name adheres to the following format: form name default.js.For example, if the name of your form is Borrower Summary, the JavaScript filewill be named Borrower Summary default.js.To Open the Code Editor Find & Replace: Select to expand the Find & Replace section, then search forcode text, or search and replace code text.1 Log in to the Form Builder and select Input Forms, and then select CustomForms.2 Select an existing form, or select New to start a new form.3 On the Form Workspace toolbar, select the Code Editor icon ( / ) to open theJavaScript Code Editor. Content Editor: Create or insert code in this section. Cancel: Select to cancel any edits and exit the Code Editor without saving. Save: Select to save the JavaScript file and any edits made to it.The JavaScript file is saved to the central JavaScript repository, which isaccessed through Asset Management.NOTE: Libraries in the Asset Management are shared asset repositories. Anyedits made to files in the Asset Management section will impact the file in allproducts in which it appears. Changes made to file names could result in errorsin input forms.The JavaScript file is automatically linked to the current form. Linked JavaScriptfiles can be viewed through the form properties.NOTE: When saving a JavaScript file directly in the Code Editor, a default filename is given. If that file name already exists, you will be prompted to rename thefile before saving.Chapter 2: Form Builder Code Basics4

To View Scripts in Form Properties:To Link a JavaScript File to a Form:1 Click anywhere within the workspace, but do not click to select an element.1 Open the desired form.2 Click anywhere within the form workspace to display the form properties, butdo not click to select an element.2 Click anywhere within the form workspace to display the form properties, butdo not click to select an element.3 On the Properties panel, select the Scripts tab.3 On the Properties panel, select the Scripts tab.4 Linked displays the JavaScript files that are linked to the current form.4 Select a JavaScript file to link to the form, or press the CTRL key to selectmultiple JavaScript files.NOTE: The JavaScript files listed for selection are all the files in the AssetManagement’s JavaScript repository.JavaScript File Sharing Best PracticesThe following are the recommended best practices for sharing JavaScript filesacross multiple forms, and for editing existing JavaScript files linked to a form.Sharing JavaScript Files Across Multiple Forms JavaScript files should contain generic code across forms. When editing JavaScript files, keep in mind that these files exist in a sharedasset repository. Any edits made to these files will impact the file in all productsin which it appears. Please apply caution. To avoid unintended consequences to other forms when editing JavaScript files,create a unique JavaScript file for each form.Editing Existing Linked JavaScript FilesIt is recommended that these steps are followed when making changes,especially if on a large scale, to an existing JavaScript file.1 Before editing the JavaScript file, disable the form.Adding External JavaScript FilesAdministrators can upload external JavaScript files to the JavaScript repository inthe Asset Management.2 Make your edits.3 Test the code.4 Enable the form.To Upload a JavaScript File:1 From the Admin Settings, select Asset Management.2 Select Upload.3 Select Browse to browse to and select the external JavaScript file, or drag anddrop the file to the file drop area.4 The file is uploaded to the JavaScript files central repository.JavaScript files stored in the central repository can be linked to one or more formsin the form builder.Chapter 2: Form Builder Code Basics5

Chapter 3Creating Custom Event HandlersFrom the time a form is first displayed to the user, to the time the user navigatesto another form or closes the loan, the system provides opportunities, called“events,” to execute custom code. For example, an event occurs whenever theuser clicks a button element or modifies the contents of a text box. By adding yourown custom functionality to these events, you can add significant functionality toyour form beyond the simple fill-in-the-blanks default behavior.Within the Form Builder, different elements provide different events. The buttonelement provides a click event while a text box element provides a change event.Types of EventsYou can create event handlers for the following events using the Editor: Change Event - Triggered whenever data within the element has changed. Itgenerally occurs when the user leaves the field after making a modification.When this event is called, the data in the element has already been committedto the underlying loan. Click Event - Triggered when the user clicks a element, typically a button.In order to add your custom code to any event you must author an “event handler.”An event handler is the code that the system will execute at the time theassociated event occurs. For example, you can create an event handler for abutton's click event that instructs the system to copy the value of one loan fieldinto another. FocusIn Event - Fired on a element any time the element gains the input focus.Custom code for event handlers are written in JavaScript programming language. Load Event - Fires on the Form object when all elements on the form areTo create a new custom event handler, you should first know the element on whichthe event will occur.To Write Code To Trigger an Event:1 Select the element for the desired event in the workspace.This can happen by virtue of the user clicking the element or by tabbing to theelement. FocusOut - Triggered any time the input focus leaves the field. The focusleaves a field when the user clicks another field or tabs out of the field.populated and the form is ready for user input. Unload Event - Raised to notify the form that it is about to be closed. The usermay have elected to open a new input form or may be closing the loan. Thisevent cannot be used to prevent the form from being unloaded and you shouldavoid using functionality that displays a user interface.2 On the Properties window, select the Events tab.3 Select the Code Editor icon ( / ) next to the event dropdown to add new codeor edit existing JavaScript code.4 When finished, select Save, and then select Close.NOTE: When saving event handler code directly from the Code Editor, a defaultfile name is given if no files are linked to the form. If a file name already exists, youwill be prompted to rename the JavaScript file before saving.Chapter 3: Creating Custom Event Handlers6

Ellie Mae – Secure Scripting FrameworkCustom Input Forms allows for injection of custom functionality by using Ellie Maetechnology framework known as the Secure Scripting Framework (SSF). The SSFisolates the third-party's customizations away from the host application (e.g., LOConnect) by loading the custom HTML/JavaScript into a "sandboxed" container.When custom code/UI is loaded in a sandbox, we refer to that as a guest of theapplication, and the terms host and guest will be used in this document.Besides isolation, the SSF provides a communication channel for all interactionsbetween the host and its guest. To enable communication, the host applicationpublishes a set of scripting objects that can be invoked by JavaScript within theguest: Functions: Each scripting object provides a set of functions that can be invokedby the guest to retrieve or modify the state or behavior of the host application.For example, a host may expose a function to retrieve the data of the loancurrently being edited by the logged-in user. Scripting Object Function Example:var loan await elli.script.getObject("loan");loan.setFields({ "1109": 200000 });EM—SSF also limits Custom Code access to the rest of the application in thesandboxed environment. When running inside the SSF sandbox, the guestscript/application cannot: Access or use sessionStorage or applicationStorage. Access or use cookies. Directly access any DOM elements or JavaScript objects from the parentwindow (indirect access may be gained via Scripting Objects published by thehost application). Access the Session ID/Access Token from the host application.Chapter 3: Creating Custom Event Handlers7

Chapter 4Object and Event ReferenceThis chapter contains object references and examples of use cases and samplecode for event handlers.Accessing Scripting Objects in a GuestIn order for a guest application or script to interact with a scripting object providedby the host, it must first retrieve a reference to the object through the SSF scriptingutilities:var loan await elli.script.getObject("loan");Each Scripting Object available to the guest has a unique Object ID: a string valuethat uniquely identifies the object being retrieved based on the current context.For example, in the case above, the identifier "loan" is used to retrieve the currentLoan object from the host application. Note that, as with all Scripting Object calls,the elli.script.getObject() call is asynchronous and requires that we“await” the result (or use the Promise.then() function).The elli.script object is the core, global scripting object available to all SSFguest scripts.elli.script.getObject(" objectId ")Returns the Scripting Object with the specified Object ID from the host applicationThe next sections go through the details of how to invoke the functions of aScripting Object retrieved thru the getObject() function.Invoking Scripting Object FunctionsOnce you have a reference to a Scripting Object via theelli.script.getObject() call, you are ready to invoke functions on theobject to interact with it. Functions may be used to retrieve or modify the state ofthe Scripting Object, depending on the use case. All function calls on ScriptingObjects are asynchronous; thus, you must either "await" the result of the functioncall or use the Promise.then() function to invoke a callback when the functionis completed.Scripting Object Function Call Exampleasync function setTextboxColor(textBox) {// Sync the text color with the button colorvar button await (await button.color());}The SSF has one further optimization that can be leveraged to simplify your code:the framework will automatically await on any Promise-valued parameter to afunction exposed by a ScriptingObject. As a result, the function call:textBox.fontColor(await button.color());can be shortened to:textBox.fontColor(button.color());Chapter 4: Object and Event Reference8

Loan Object MethodsThe Loan object provides methods for interacting with an open loan in theapplication's editor screen(s).MethodDescriptionall()Returns the entire Loan object in the v3 LoanObject model.getField(" fieldId ")Returns the value of a single field using its fieldID.setFields( fieldMap )Sets the values of one or more fields on the Loan.The fieldMap is a JSON object with Field IDsas the object's proeprties, e.g.{"1109": 400000,"1172": "FHA","762": "2018-03-04"}Supported Events for Field ElementsThe following field elements and its supported events are available in the FormBuilder:ElementsSupported EventsCategory BoxN/AGroup BoxN/AText Box Change FocusIn FocusOutMulti-line Text Box Change FocusIn FocusOutDropdown Change FocusInCustom Form elements are used to display data from the underlying loan file, andfor the user to input or modify loan data. FocusOutRadio Button ChangeThe Form Builder supports the following two events on the form object:Button Click Load - This event fires on the form object when all elements on the form areCheckbox ChangeHyperlink ClickCalendar ChangeContact Button ChangeForm Objectpopulated, and the form is ready for user input. Unload - This event is raised to notify the form that it is about to be closed, e.g.the user could be opening a new input form, or could be closing the loan itself. FocusIn FocusOutRolodex Change FocusIn FocusOutImageChapter 4: Object and Event Reference N/A9

Event Handler ExamplesThe following are examples include event handler use cases, sample code, andany relevant screenshots.Change Event Example Use Case:The administrator creates a form where, depending on if “Own” or “Rent” isselected on the dropdown, the “Rent Information” group box is either hidden ordisplayed. Selecting “Own” hides the group box and selecting “Rent” displays it.ES6/ES2017async function Dropdown1 change(ctrl) {var loan await elli.script.getObject("loan");var RentOwn await loan.getField('FR0115');var RentGroupBox awaitelli.script.getObject("GroupBox1");var OwnGroupBox awaitelli.script.getObject("GroupBox2"); Sample Code (in ES5 and ES6/ES2017 formats):if(RentOwn ible(false);}else if(RentOwn ible(true);}ES5function 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 ifelse if (DDvalue "Own") {elli.script.getObject("GroupBox1").then(function (ctrlDP) {ctrlDP.visible(false);})//end get object function}//end else ifelse {elli.script.getObject("GroupBox1").then(function (ctrlDP) {ctrlDP.visible(true);})//end script object}//end else}})// end elli functionChapter 4: Object and Event Reference10

Screenshots:Click EventThe administrator’s view of the form Example Use Case:The admin creates a custom form where he would like to use JavaScript logicon a “Copy from Borrower” button to copy over some borrower specific fieldsfrom Borrower group box to Co-borrower specific group box elements. Sample Code (in ES6/ES2017 format):ES6/ES2017The user’s view of the form when “Rent” is selected on the dropdownasync function Dropdown1 change(ctrl) {var loan await elli.script.getObject("loan");var RentOwn await loan.getField('FR0115');var RentGroupBox awaitelli.script.getObject("GroupBox1");var OwnGroupBox awaitelli.script.getObject("GroupBox2");if(RentOwn ible(false);}else if(RentOwn ible(true);}}The user’s view of the form when “Own” is selected on the dropdownChapter 4: Object and Event Reference11

FocusIn Event Screenshots: Example Use Case:The administrator’s view of the formThe administrator creates a form where, if both the “FHA” radio button isselected and the “Loan Amount” text box is “focused in” (the user has selectedinside the text box), the “Down Payment” text box automatically populates witha value of “3.500.” Sample Code (in ES5 and ES6/ES2017 formats):ES5function TextBox2 focusin(ctrl) bj) {loanObj.getField('1172').then(function (value1) {if (value1 'FHA'){The user’s view of the ion(loanObj) {loanObj.setFields({ '1771': '3.5'}) });}})})}ES6/ES2017async function LoanAmount focusin(ctrl){var loan await elli.script.getObject("loan");var LoanType await loan.getField('1172');if (LoanType 'FHA'){loan.setFields({ '1771': '3.5' });}}Chapter 4: Object and Event Reference12

FocusOut Event Screenshots: Example Use Case:The administrator’s view of the formThe administrator creates a form where, if both the “FHA” radio button is notselected and the “Loan Amount” text box is “focused out” (the user has notselected inside the text box), the “Down Payment” text box automaticallypopulates with a value of “0.000.” Sample Code (in ES5 and ES6/ES2017 formats):ES5function TextBox1 focusout(ctrl) bj) {loanObj.getField('1172').then(function (value1) {The user’s view of the formif (value1 ! 'FHA') (loanObj) {loanObj.setFields({ '1771': '0'}) });}})})}ES6/ES2017async function LoanAmount focusout(ctrl){var loan await elli.script.getObject("loan");var LoanType await loan.getField('1172');if (LoanType ! 'FHA'){loan.setFields({ '1771': '0' });}}Chapter 4: Object and Event Reference13

Load EventES6/ES2017 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 boxeswill be hidden

This chapter provides an overview of the Form Builder and discusses the resources available if you need assistance with JavaScript. Chapter 2, "Form Builder Code Basics" on page 4 describes how to add code to the Form Builder and the best practices in sharing JavaScript files.