Transcription
Encompass Web Input Form BuilderUser’s GuideFor use with Encompass Loan Officer ConnectLast Revised On November 9th, 2018
Copyright Statement 2018 Ellie Mae, Inc. Ellie Mae , Encompass , AllRegs , DataTrac , Ellie Mae Network , Mavent , Millennial Tracker , Mortgage Returns , ProspectManager , Total Quality Loan , True CRM , TQL and the Ellie Mae logo are trademarks of Ellie Mae, Inc. or its subsidiaries. All rights reserved. Other companyand product names may be trademarks or copyrights of their respective owners.Encompass Web Input Form Builder User’s GuideRev. 11/9/18
Table of ContentsChapter 1: Introduction . 1Intended Audience . 1What is the Form Builder? . 1System Requirements . 1How This Guide is Organized . 1Getting Help . 2User’s Guide . 2. 2Online Help . 2Guided Walk-Thrus . 2Logging in to the Form Builder . 2Asset Management . 3Custom Input Forms . 3Creating a New Form . 3Refreshing Custom Forms . 3Importing a Form . 3Exporting a Form . 4Deleting a Form . 4Searching Custom Forms . 4Form Builder Components . 4The Form Builder Interface . 4Elements . 5The Form Workspace . 5Properties . 5Developer’s GuideChapter 2: Creating a Form . 7Starting a New Form . 7Form Properties . 7Understanding Form Elements . 7Element Properties . 7. 7. 8Adding Elements to a FormResponsive FormsAdjust the offset of the form element using the Offset property. 8Resizing Elements. 8. 8Working with Multiple Device Types . 8Mobile Device Compatibility . 8Previewing a Form . 9Saving and Enabling a Form . 9Alignment OptionsChapter 3: Field Elements . 10. 10. 10Calendar . 11Calendar Events . 11Check Box . 11Check Box Events . 11Dropdown Box . 12Dropdown Events . 12Multi-Line Text Box . 13Multi-Line Text Box Events . 13Radio . 13Radio Button Events . 13Text Box . 14Text Box Events . 14The Field PropertyField-level HelpChapter 4: Action Elements. 15Button. 15Button Events . 15Contact Button. 16Contact Button Events . 16Hyperlink . 16Hyperlink Events . 16Rolodex . 17Rolodex Events . 17Chapter 5: Container Elements . 18Working With Container Elements. 18i
Category Box . 19Group Box . 19Chapter 6: User Interface Elements . 20Image . 20Label . 20Appendix A: Element Properties Reference . 21Appendix B: Button Actions . 37Index . 38ii
Chapter 1IntroductionWelcome to the Web Input Form Builder User’s Guide. This guide containsinformation you need to understand the Web Input Form Builder environment andquickly begin to create input forms to meet your company’s requirements.What is the Form Builder?Important! Create forms to meet your company’s specific requirements.The new Web Input Form Builder being introduced with this release does notreplace the Encompass Input Form Builder that is provided with Encompass.Please review these important factors to consider: Create new input forms for use in Encompass LO Connect and the Connect The Web Input Form Builder is a brand new feature for use with Encompass LOConnect only. (Future releases will enable you to use the Web Input FormBuilder with additional Connect products.) You must still use the Encompass Input Form Builder to create forms within yourcurrent Encompass system. (The new Web Input Form Builder is not compatiblewith Encompass.) Forms created using the new Web Input Form Builder will only be accessible inEncompass LO Connect. Forms created in the Encompass Input Form Builder cannot be imported orcopied over into the new Web Input Form Builder. Nor can new forms created inthe Web Input Form Builder be imported or copied over into the EncompassInput Form Builder for use with Encompass. If you have additional questions about the Web Input Form Builder, pleasecontact your Ellie Mae account manager.The Form Builder allows you to design and create new input forms. With the FormBuilder you can:family of products.* Build forms using different elements, including text boxes, dropdown lists,check boxes, images, hyperlinks, and responsive form layouts. Build forms compatible for use on multiple devices, including desktop, tablet,and mobile. Add custom forms to your Encompass LO Connect forms list.*The ability to copy and modify standard Encompass forms like the 1003 and RegZ-LE willbe available in a future Form Builder release.How This Guide is Organized This chapter provides an overview of the Form Builder and discusses theresources available if you need assistance using it. Chapter 2, “Creating a Form” on page 7 describes how to create, preview, save,and enable a basic form. It also discusses the form elements and its compatibility with certain device types. Chapter 3, “Field Elements” on page 10 describes the Field elements whichIntended AudienceThis guide is intended for users responsible for customizing Encompass LoanOfficer (LO) Connect input forms. A basic knowledge of form design and familiaritywith an HTML editing application such as Microsoft Front Page is recommended.For information on how to design forms featuring elements that trigger events andsimilar types of actions, refer to the Web Input Form Builder Developer’s Guidedocument. To reference this document, you should be an experienced JavaScriptdeveloper.NOTE: For the purposes of this guide, from this point on, the Web Input FormBuilder will be referred to as Form Builder.Chapter 1: Introductioninclude text boxes, check boxes, and radio buttons. Chapter 4, “Action Elements” on page 15 describes the Action elements whichincludes buttons and a Rolodex. Chapter 5, “Container Elements” on page 18 describes the Container elementswhich are used to form logical groups of elements. Chapter 6, “User Interface Elements” on page 20 describes the User Interfaceelements which include labels and images. Appendix A, “Element Properties Reference” on page 21 provides detaileddescriptions of each Form Builder element and its properties. Appendix B, “Button Actions” on page 37 lists the actions available to assign tobutton elements.1
System RequirementsLogging in to the Form BuilderBefore using the Form Builder, verify the following system requirements:The Form Builder is accessed through the Encompass Web Admin Portal. To login, enter your Encompass LO Connect administrator credentials. Recommended monitor resolution: 1680x1050 Supported browsers: Chrome (desktop and mobile) Safari (desktop and mobile) Edge (desktop only) IE (desktop only) Firefox (desktop only)Getting HelpTo Access the Encompass Web Admin Portal:If you need assistance using the Form Builder, several resources are available.1 Using your web browser, navigate to Encompass LO Connect.User’s GuideYou can download the Encompass Web Input Form Builder User's Guide as a .pdffile from the Encompass LO Connect Guides & Documents per’s Guide The URL for Encompass LO Connect will be provided to you as part of yourinitial set up and kick off of Encompass LO Connect.2 On the login window, enter your assigned Encompass LO Connectadministrator credentials in the Client ID, User ID, and Password fields.3 Select Log In.The Encompass Web Admin Portal opens.You can download the Encompass Web Input Form Builder Developer’s Guide asa .pdf file from the Encompass LO Connect Guides & Documents nect/Content/loconnect/library/documents.htmOnline HelpThe online help contains complete documentation for all Form Builder features.To Access the Online Help: Select the Help button (question mark) located on the right side of theEncompass LO Connect site.Guided Walk-ThrusStep-by-step guidance that walks you through specific features within theEncompass Web Input Form Builder.To Access a Walk-Thru: Select the Need Help? widget located on the right side of the Form Builder.A Note About Two Factor AuthenticationAs an added security measure, Encompass LO Connect utilizes a processknown as two-factor authentication. When logging into Encompass LO Connectyou are prompted to install the Ping Identity app from the Apple App Store or theGoogle Play store. Once you pair a device with PingID, Encompass willauthenticate your device automatically and you can then proceed to the nextstep to access the Form Builder.For instructions to pair your device with PingID, refer to the Logging Into and Outof Encompass LO Connect help topic.Chapter 1: Introduction2
Asset ManagementCustom Input FormsThe Asset Management is where you can access a central repository of uploadedassets that can be used to help create custom input forms, e.g., Image Libraryand JavaScript Files.The Custom Input Forms page is where you can access a list of the forms thathave been created in Form Builder and ways to manage them. You can create,refresh, import, export, and delete any custom forms. If this is your first timelogging in, no forms will be listed here.These asset repositories are shared, meaning any change made to a file isuniversal and will impact the file across all products in which it appears. Changesmade to file names could result in errors in input forms.NOTE: Currently, files uploaded to the Asset Management cannot be deleted.This will be addressed in a future release.To Access Custom Input Forms: Log in to the Form Builder and select Input Forms, and then select CustomForms.Creating a New FormSelect the New button to start a new blank form that opens in a new browserwindow or tab. If you have another form currently open, you will be prompted tosave that form before the new form loads.Refreshing Custom FormsSelect the Refresh button to refresh the list of custom forms displayed. Use thisfunction if your form is not in the list, or for any stale information to refreshImporting a FormYou can import a form from your local system’s hard drive and save it to yourEncompass LO Connect platform. Alternatively, you could modify the importedform and then export it without ever saving it to Encompass LO Connect.To Access the Asset Management: Log in to the Form Builder, and then select Asset Management. To upload a JavaScript or image file, select JavaScript Files or ImageLibrary, and then select Upload. Select Browse to browse to and select the file to upload. Or, drag and drop the file in the file drop area. To edit a JavaScript file, select the JavaScript filename to open the editor.For more information on working with JavaScript files, refer to the Web Input FormBuilder Developer’s Guide document.Chapter 1: IntroductionNOTE: Importing a form imports only the form itself. Any custom field definitionsused by the form are not included.To Import a Form From Outside of Your Encompass LO Connect Platform:1 Log in to the Form Builder.2 In the left panel, select Input Forms, and then select Custom Forms.3 Select the Import button.NOTE: If your custom form has the same name of an existing form, you willhave the option to change the name of the imported form and save.4 Locate and select the desired .json file, and then select Open.3
Exporting a FormIndividual forms can be directly exported to your local system’s hard drive as asingle file (with the extension .json). These forms can then be copied, emailed, orotherwise transferred to any user of the Form Builder for them to import.The Form Builder InterfaceNOTE: Exporting a form exports only the form itself. Any custom field definitionsused by the form are not included.To Export a Form Outside of Your Encompass LO Connect Platform:1 Log in to the Form Builder.2 In the left panel, select Input Forms, and then select Custom Forms.3 Select the check box next to the name of the form, and then select Export.4 Find the desired location for the file, type a new File Name for the form, andthen select Save.The form is saved as a .json file.NOTE: You can only export forms that are not enabled.Deleting a FormAfter logging in and navigating to the Form Builder, a list of the custom formscreated in Form Builder is displayed. You can delete any of these forms from yourEncompass LO Connect system.ElementForm WorkspacePropertiesTo Delete a Form:1 Select the check box next to the name of the form, and then select Delete.2 Select Yes on the confirmation to delete the form.Form Builder ComponentsNOTE: You can only delete forms that are not enabled.There are three main components on the Form Builder interface: elements, theform workspace, and the properties panel.Searching Custom FormsYou can also search the list of custom forms and filter your search results.To Access the Form Builder: Log in to the Form Builder and select Input Forms, and then select CustomForms. Select - Whether the form is currently checked or unchecked. By default, all Select an existing form or select New to start a new form.checked and unchecked forms are included in the search results. Name - The name given to the form. Description - The description given to the form. Enabled - Whether the form is currently enabled or disabled. By default, allenabled and disabled forms are included in the search results. Created By - The user who created the form. Created Date - The date and time the form was initially createdChapter 1: Introduction4
ElementsPropertiesAll of the elements used to build a form appear at the top of the Form Builderworkspace. There are many elements and types to choose from: field, action,container, and user interface. Add an element to a form by using a simple dragand-drop operation.The Properties panel displays on the right side of the Form Builder workspace.When you add an element to the workspace, you define its appearance andbehavior by setting values in the Properties panel. These values are automaticallysaved. The available properties are based on the selected elements.The Form WorkspaceThe Properties panel is also where you assign event handlers to elements. Eventsare triggered when a user performs an action on a form. For example, the usercan select a button to trigger a click event or select a text box to trigger a changeevent. For information on how to create a new custom event handler, refer to theWeb Input Form Builder Developer’s Guide document.The Form Workspace is in the center of the Form Builder interface. Add elementsto the workspace and then arrange them on the form.NOTE: You can have only one form open at a time within the same browser.The Form Workspace also provides a toolbar that enables you to manage theelements on the form. To remove one or more elements from the form, select the element(s), and thenselect the Cut icon. To copy one or more elements, select the element(s), and then select the Copyicon. To paste one or more elements that you have copied, select the container whereyou want to paste the elements, and then select the Paste icon. If you want tocopy and paste a category box, along with all of the elements within it, to adifferent location on the form, then select the category box, select the Copyicon, select anywhere in the form workspace, and then select the Paste icon. To edit JavaScript code, select the Code Editor icon. From the File Namedropdown, select the JavaScript file to edit, make your changes to the code, andthen select Save. To display grid lines on the form workspace to help with alignment of elements,select the Grid icon. To delete one or more elements from the workspace, select the element(s), andTo View an Element's Properties: Select an element in the workspace. The Properties panel automaticallydisplays the element’s properties.To View the Form Properties: Select outside the workspace so that no elements are selected. The Propertiespanel automatically displays the form’s properties.then select the Trash icon. Select the New Form button to start a new blank form. The form will open in anew browser window/tab and close the current browser window/tab containingyour current form. You will be prompted to save your current form beforeopening the new form Select the Preview button to preview the form. Select the Save button to save the latest changes to the form.Chapter 1: Introduction5
Common PropertiesIf multiple elements with properties in common are selected, the Properties panelwill show the Common Properties on the right. Use Common Properties to viewand manage shared properties for multiple elements at the same time.If a selected element does not share properties in common with other selectedelements, the properties will not be displayed. Only the shared properties of allselected elements can be viewed and managed at the same time.If the Enabled toggle is set to No on any element, the common properties will notbe affected. In order to manage common properties, all elements must beselected and the Enabled toggle set to Yes.NOTE: Currently, Width is the only common property. More properties willbecome common in future releases.To View Multiple Elements' Common Properties: Select an element in the workspace, and then hold the Shift key and selectadditional elements.Chapter 1: Introduction6
Chapter 2Creating a FormThis chapter describes how to start a new custom form and how to save it to yourEncompass LO Connect system. It also discusses form elements, which definehow your form appears and behaves.Starting a New FormTo Start a New (Blank) Form:1 After logging in and navigating to the Form Builder, select the New button.2 In the Layout Elements section at the top, select Form Layout.3 Select the number of sections you want to provide on the form, and then selectBuild. These sections are essentially category boxes that will representdifferent sections of the form.The new form is displayed in the Form Workspace. Each section of the formcontains a category box. For example, if you selected three sections in step 3,the form will contain three category boxes.4 At the top of the Form Workspace, type the name of the form.5 Select the blue arrow (down) to expand the panel and enter a description of theform. Select the blue arrow (up) again to collapse the panel.To change the name or description later, select the Edit icon (pencil) and makeyour changes.To Open an Existing Custom Form: After logging in and navigating to the Form Builder, a list of the custom formscreated in Form Builder is displayed. Select the name of the form to open it in anew tab on your browser.Form PropertiesTo access the Form Properties, select anywhere within the workspace, but do notselect an element. The Properties Panel shows the Form Properties on the right.Understanding Form ElementsAn Encompass LO Connect input form is simply a collection of elements arrangedon a blank palette called the Form. Whether you want to add a text box into whicha user can enter data, a simple snippet of text such as a field description, or yourcompany's logo, everything you add to the form is part of an element.Choose from many different element types to create both the behavior and thelook and feel you want for your form. These elements are broken down intoseveral categories which are described in upcoming chapters.Element PropertiesJust as a form is made up of elements, each element is defined by its set ofproperties. Properties are used to customize the appearance and behavior of theelement on the form. For example, you can set the Action property of a buttonelement to determine what will happen when the user selects the button.Properties automatically save as changes are made.The Control ID PropertyWhile some elements have more properties than others, all elements have theControl ID property, used to identify the element. The Control ID is assignedautomatically when the element is added to the form. For example, the first inputfield element placed on the form is assigned the Control ID TextBox1, the secondtext box element is assigned TextBox2, and so on.NOTE: You can change the Control IDs of the elements. They must be unique,begin with a letter, and contain only the characters A-Z, 0-9, and the underscorecharacter.To Assign a Control ID:1 Select an element on the workspace.2 On the Properties panel, type a new control ID in the field. The ID can containnumerals, letters, or the underscore character, but must start with a letter.Adding Elements to a FormEvery element can be added to the form using a simple drag-and-drop operation.Chapter 2: Creating a Form7
Responsive FormsThe forms created using the Form Builder are responsive, meaning its elementsrespond and adapt to the screen size of the device it is viewed on. Responsiveforms are extremely flexible, making forms usable on an array of devices. Formelements are auto-positioned as they are dragged and dropped into the formworkspace, and their width and offset can be adjusted using the property panel.To Adjust a Form Element’s Responsive Parameters:1 Select a form element on the workspace.Working with Multiple Device TypesForms created in the Form Builder can be viewed on different device types:desktop, tablet, and mobile. The view of the Form Builder adjusts based on thedevice type for the form. A desktop or tablet device uses a multi-column layoutwhile a mobile device uses a single-column layout. You can switch betweendevice types when building the form.To Select a Device Type: Adjust the width of the form element using the Width by Columns property.1 In the Form Builder workspace, select anywhere within the workspace, but donot select an element. The Properties Panel shows the Form Properties on theright. Adjust the offset of the form element using the Offset property.2 On the Properties Panel, select a Device Type:2 In the element’s Properties panel:Resizing ElementsYou can resize individual elements or select multiple elements to make them thesame width.To Resize an Element:1 Select an element in the Form Builder workspace.2 In the Properties panel, adjust the Width by Columns property to expand orreduce the width of the element.To Make Multiple Elements the Same Size:1 Select an element, and then select additional elements as needed.2 In the Properties panel, adjust the Width by Columns property to expand orreduce the width all of the elements together.NOTE: If you select more than one element that does not share commonproperties with the other selected elements, the Width by Columns property willnot be displayed. Only elements that share the same properties can be resized atthe same time. Desktop/Tablet: Build the form for a desktop or tablet device. Mobile: Build the form for a mobile device using a single column view. All: Build the form for all devices.Mobile Device CompatibilityThe Label property for all elements is limited to 26 characters for mobile devices.Three elements and seven button actions are not compatible with mobile devices.The incompatible elements are: Contact Button, Image, Rolodex; and theincompatible button actions are: Hazard Insurance, Manage Borrowers, MIP/PMICalculation, Mortgage Insurance Payment, Mortgage Insurance Premium, OtherHousing Expense, View Credit.These elements and button actions are not available for selection when buildinga form using the single-column mobile view. If switching from the desktop/tabletview to the mobile view, any Contact Button, Image, Rolodex, or Button (ifassigned an incompatible action) will be automatically disabled from mobile view,and their respective Enabled toggle property on the Properties Panel will be setto No. Disabled elements also appear dimmed on the Form Builder workspace.Alignment OptionsForm elements are automatically positioned based on their width and offsetposition due to the responsive layout of forms created in the Form Builder. Whenadding elements to the form, they will automatically left align. In addition, youcannot manually resize container elements since they will automatically beresized based on the size of the browser window and/or device the published formis displayed on.Chapter 2: Creating a Form8
Previewing a FormSaving and Enabling a FormBefore enabling a form and making it available in your Encompass LO Connectsystem, use the Preview button to preview the form. You can preview how theform will look depending on the device type.As you build a form, you can easily view and test it in Encompass LO Connect.When you save and enable your custom form, it is automatically available in thesame Encompass LO Connect system you logged in to use the Form Builder.Note that in order to access the Form Builder you must log in using administratorcredentials. In order to log into Encompass LO Connect and view the form, youmust log in using non-administrator credentials (i.e., as a loan officer).To Preview a Form for a Specific Device Type:To Save a Form to Your Encompass LO Connect System:1 In the Form Builder workspace, select anywhere within the workspace, but donot select an element. The Properties panel shows the Form Properties on theright.1 Near the top of the Form Workspace, select the Save button. This saves thelatest version of the form in Form Builder.2 On the Properties Panel, select a Device Type: Desktop/Tablet: Preview how the form will look on a desktop or tabletdevice. Mobile: Preview how the form will look on a mobile device. All: Preview how the form will look on all device types.3 In the Form Builder workspace, select the Preview button. The device type isdisplayed above the preview form. If you selected to preview All device types,select the name of the device type to switch between previewing types.2 To make the form accessible in Encompass LO Connect, close the form, andthen return to the Custom Forms section where all of the custom forms arelisted. Select the Enable check box associated with the form. Alternatively, you can enable a form by using the Enable Form toggle switchthat is provided at the top of the workspace. Select the blue arrow next to theform title fiel
Encompass Web Input Form Builder. To Access a Walk-Thru: Select the Need Help? widget located on the right side of the Form Builder. Logging in to the Form Builder The Form Builder is accessed through the Encompass Web Admin Portal. To log in, enter your Encompass LO Connect administrator credentials. To Access the Encompass Web Admin Portal:
