Additional Employment Information

  • Updated

The set of employment fields is listed below. The fields can be hidden if they are not required in the account opening workflow or made visible if they are required within the client.webapp.stylesheet Type ID.

Mapping CSS Elements to User Interface Output

Using the table below, add the appropriate CSS snippet to the Type ID depending on whether the field will be hidden or visible.

Field Name

Description

To Show

To Hide

employmentStatusDivApp1

Employment Status Primary

#employmentStatusDivApp1 {display: block;}

#employmentStatusDivApp1

{display: none;}

employmentStatusDivApp2

Employment Status Joint

#employmentStatusDivApp1 {display: block;}

#employmentStatusDivApp2

{display: none;}

employmentDurationDivApp1

Employment Duration Primary

#employmentDurationDivApp1 {display: block;}

#employmentDurationDivApp1

{display: none;}

employmentDurationDivApp2

Employment Duration Joint

#employmentDurationDivApp2 {display: block;}

#employmentDurationDivApp2

{display: none;}

employmentMonthlyIncomeDivApp1

Employment Monthly Income Primary

#employmentMonthlyIncomeDivApp1 {display: block;}

#employmentMonthlyIncomeDivApp1 {display: none;}

employmentMonthlyIncomeDivApp2

Employment Monthly Income Joint

#employmentMonthlyIncomeDivApp2 {display: block;}

#employmentMonthlyIncomeDivApp1 {display: none;}

employmentNameDivApp1

Employer Name Primary

#employmentNameDivApp1 {display: block;}

#employmentNameDivApp1

{display: none;}

employmentNameDivApp2

Employer Name Joint

#employmentNameDivApp2 {display: block;}

#employmentNameDivApp2

{display: none;}

employmentPhoneDivApp1

Employer Phone Primary

#employmentPhoneDivApp1 {display: block;}

#employmentPhoneDivApp1

{display: none;}

employmentPhoneDivApp2

Employment Phone Joint

#employmentPhoneDivApp2 {display: block;}

#employmentPhoneDivApp2

{display: none;}

employmentJobTitleDivApp1

Employment Job Title Primary

#employmentJobTitleDivApp1 {display: block;}

#employmentJobTitleDivApp1

{display: none;}

employmentJobTitleDivApp2

Employment Job Title Joint

#employmentJobTitleDivApp2 {display: block;}

#employmentJobTitleDivApp2

{display: none;}

Employment Status Dropdown

In addition to showing the employment questions, the contents of the employment status dropdown can be changed. To change the contents of the dropdown, navigate to client.webapp.custom.properties and search for empStatus. Within this message key, configuration options are displayed that are shown in the dropdown on the Gro web application. The label represents a message referenced in client.custom.messages.en and isJob enables or disables the questions shown for a particular employment status.

This has a message attached that will display in the dropdown.

Code view of the array values for employment status

The dropdown options for employment can be changed in the client.custom.messages.en by searching for the message keys shown in the dropdown (for example: employed, retired, self-employed) and changing the keys and messages to your desired messages.

Configuration view for employment status

Page Field Elements

You can configure the order of the fields on the page using the pageFieldOrder attribute in the client.webapp.custom.properties Type ID. For example:

  "pageFieldOrder": {
        "employmentPageApp1": [
            "employmentStatusDivApp1",
            {
                "children": [
                    "employmentJobTitleDivApp1",
                    "employmentDurationDivApp1",
                    "employmentNameDivApp1",
                    "employmentMonthlyIncomeDivApp1"                ],
                "id": "EmploymentInfoFieldsApp1"            },
            "employmentStatusDivOtherApp1",
            "loanDiv"        ]
    },

This example uses a employmentPageApp1 array to contain the ID strings of the elements in the order in which they should be displayed. In this example, the order will be:

  1. employmentStatusDivApp1

  2. EmploymentInfoFieldsApp1

  3. employmentStatusDivOtherApp1

  4. loanDiv

In cases where an element has sub-elements which should be ordered in a particular way, an object should be used instead of a string. This object should contain the properties id and children. In the above example, the id element EmploymentInfoFieldsApp1 has some sub-elements defined in a particular order. This functionality can extend to as many sub-elements and sub-sub-elements as necessary.

Any elements excluded from this configuration will maintain their relative order and will be left at the end of the structure. For example, given the existence of elements 1, 2, 3, 4, 5, if we configured this property so that the array elements are: [2, 3, 4], the final display order will be 2, 3, 4, 1, 5.

This configuration is not affected by which elements are visible, only the order. Setting or removing this configuration will not affect whether or not an element is displayed.

Occupancy Questions

Occupancy questions can be configured to show or hide specific questions generally or based on product type.

Navigate to Type ID client.webapp.custom.properties and search for occupancyQuestions. By default, the occupancy questions are shown by product type as seen below, but you can add or remove product types within this configuration.

occupancyQuestions":{ 
   "occupancyDurationDivApp1":{ 
      "products":[  
         "creditCard",
         "businessLoan",
         "vehicleLoan"      ]
   },
   "occupancyStatusDivApp1":{  
      "products":[  
         "creditCard",
         "businessLoan",
         "vehicleLoan"      ]
   }
}

If you would like to ask occupancy questions for all products or remove them completely, delete the default configuration and insert the following configuration.

occupancyQuestions":{ 
   "occupancyDurationDivApp1":{ 
      "products":[  
         "all"      ]
   },
   "occupancyStatusDivApp1":{  
      "products":[  
         "all" 
      ]
   }
}

If you would like to not display any occupancy questions, delete the default configuration and insert the following configuration.

occupancyQuestions":{ 
   "occupancyDurationDivApp1":{ 
      "products":[  
         ""      ]
   },
   "occupancyStatusDivApp1":{  
      "products":[  
         "" 
      ]
   }
}

Below is an image of the Gro web application with and without the occupancy questions enabled.

With occupancy enabled:

Gro web app with occupancy questions enabled

Without occupancy questions:

Gro web app without occupancy questions enabled

To change the contents of the dropdown, navigate to client.webapp.custom.properties and search for occStatus. Under this key, message configurations are displayed with any options shown in the dropdown on the Gro web application. The label is a the message key whose corresponding message is referenced in client.custom.messages.en and will display in the dropdown.

Configuration view showing how to change the contents of the occupancy dropdown

The dropdown for occupancy can be changed in the client.custom.messages.en. Search for the message keys or messages as shown in the dropdown (for example: rent, own free and clear, live with parents) and change the keys and messages to your desired messages.

Configuration to change the occupancy dropdown text

IN THIS ARTICLE