Review

Description

The Review screen provides the user a chance to review (and rectify, if necessary) the information collected through the OCR module. It's a single-page screen that consists of two main sections: Personal details including name, dob and address, and Document details including ID number.

Default Review screen

Configuration

The configuration of the review screen includes three main items: General, Personal, and Documents.

Both Personal and Document sections follow a similar pattern for configuration and customisation which is explained below.

📘

Field configuration

We have a generic config structure for all the input fields across Personal and Document details. We have several pre-defined fields described in the following sections and if you want to configure and customise them, you need to specify the associated name, fieldType and dataType.

Also note, you don't need to pass all the config attributes, only pass the ones you want to customise.

To learn more about field object, please visit Internationalisation.

1- General

2- Personal

The personal section contains a set of fields for personal details, such as name and dob, that can be customised and configured with the following pattern:

• givenName
• middleName
• familyName
• dateOfBirth
• address

personal: {
  countries:{
    default:{
      default:{
        fields:[
          {
            fieldType: 'input',
            dataType: 'text',
            label: `Given Name`,
            name: 'givenName',
            rules: {
              required: {
                value: true,
                message: 'Please enter your given name',
              },
              pattern: {...},
            }
          },
          {
            fieldType: 'input',
            dataType: 'text',
            label: `Middle Name(s)`,
            name: 'middleName',
            ...
          },
          ...
        ]
      }
    }
  }
}

Name

There are three input fields for name, including given name, middle name, and family name, that you can customise the label and validation rules for them, and even remove/show them.

DOB

Date input field, including DOB, has a special configuration for calendar which will allow you to configure the type and locale.

Address

Address field by default uses auto search functionality for a better user experience. However, if there's no result found through the search, there's an option for manual address inputs.

📘

Google API Key

For the auto search address to work, you need to provide your own Google API Key (Google Map). You can do this when you initialise OneSDK:

JavaScript

const oneSdk = await OneSdk({
  session: sessionObjectFromBackend,
  mode: "development",
  recipe: {
    form: {
      provider: {
        name: 'react',
        googleApiKey: "<YOUR_API_KEY>>"
      },
    }
  }
});

If you don't provide google API Key, auto search cannot find results, and there will be a fallback in the UI for manual input.

manualAddressConfig:

Manual address config consists of a set of separate input fields

manualAddressConfig: {
  unitNumber: {
    label: 'Unit Number (optional)',
      name: 'address.unitNumber',
  },
   postcode: {
      label: 'Postcode',
        name: 'address.postalCode',
          rules: {
            required: {
              value: true,
                message: 'Please enter your postal code',
            },
          },
    },
    state: {
        label: 'State',
          name: 'address.state',
            options: getStates('AUS'),
              rules: {
                required: {
                  value: true,
                    message: 'Please enter your state',
                },
              },
    },
    <field_name>: {
      ...
    }   
},

Each manual address field follows the following format:

• unitNumber
• postcode
• state
• streetNumber
• streetName
• town

3- Documents

Document fields can be configured and customised in a similar way. As each document type has a different set of fields, you need to specify an array of fields for each document type, following the below pattern. In the array, only specify the fields you need to configure/customise and skip the rest.

 documents: [
    {
      type: 'DRIVERS_LICENCE',
      countries: {
        default: {
          default: {
            fields: [
              {
                fieldType: 'select',
                hide: false,
                dataType: 'text',
                label: `Driver's Licence State or Territory`,
                name: 'region',
                rules: {
                  required: {
                    value: true,
                    message: `Please enter your driver's licence number`,
                  },
                  minLength: {
                    value: 1,
                    message: `Licence number must be at least 1 digits`,
                  },
                  maxLength: {
                    value: 15,
                    message: `Licence number must not exceed 15 characters`,
                  },
                  pattern: { ... }
                }
                ...
              },
              {
                fieldType: 'input',
                hide: false,
                dataType: 'text',
                label: 'Licence Number',
                name: 'idNumber',
                rules: {
                  ...
                },
              },
              {
                fieldType: 'input',
                hide: false,
                dataType: 'text',
                label: 'Card Number',
                name: 'extraData.document_number',
                rules: {
                  ...
                },
              },
            ],
          },
        },
      },
    },
    {
      type: 'PASSPORT',
      countries: {
        default: {
          default: {
            fields: [
              ...
            ]
          },
        },
      },
    },
    ...
  ],

Each document type by default has a set of certain fields that you can configure and customise, following the below table:

📘

Internationalisation

The configuration explained above is a generic configuration applied to all countries and states, by default. The OneSDK modular form will also allow you to overwrite the configuration for any specific country to meet international requirements. To learn more, please visit Internationalisation.

Events

UI Customisation

Removing the fields

You can customise the review screen to remove the fields, based on your workflow.

As an example, if you want to remove Date of Birth (DOB) and address for Medicare card, or remove address for Passport, you can define different instances of the review screen and load them based on the document type.

Refer to the code below for examples of how to remove certain fields from the review screen:

const form_review1 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr"
});
const form_review2 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
  personal: {
    countries:{
      default:{
        default:{
          fields:[
            {
              fieldType: 'address',
              name: 'address.fullAddress',
              hide: true
            }
          ]
        }
      }
    }
  }
});
const form_review3 = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
  personal: {
    countries:{
      default:{
        default:{
          fields:[
            {
              fieldType: 'date',
              name: 'dateOfBirth',
              hide: true
            },
            {
              fieldType: 'address',
              name: 'address.fullAddress',
              hide: true
            }
          ]
        }
      }
    }
  }
});

Adding custom fields (coming soon)

This feature will be coming soon.

Styling customisation

You can use the following classes to customise the styling for different elements of the page. These CSS classes apply to the common elements across all the screens. If you want to customise a specific page, you can use the above configuration options to overwrite it.

The following code shows you how to style a specific element on the page, in this example the button's background color will be green, instead of the default blue.

<style> 
    #<you_div_container> .ff-button {
      background-color: green;
    }
 </style>