OCR Review

Description

The Review screen provides the user a chance to review (and rectify, if necessary) the information collected through the OCR module. This review screen automatically pre-fills the OCR extracted details. 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

📘
Default Screen
If you render the Review form without any configuration, it renders the default screen as shown above, and it will automatically show relevant ID fields depending on the extracted document type (Driver's Licence, Passport or Medicare).
const form_review = oneSdk.component("form", {
  name: "REVIEW",
  type: "ocr",
});
If you need to customise the default screen, please use the following section.

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

Attribute	Description	Usage
name	The name of the screen you want to load	`name: REVIEW`
type	The type of the flow to be used. In this use case, it needs to be "ocr"	`type:"ocr"`
title	Title of the page. - label: the title text - style: the title style	`title: {label: "<Your_TITLE>", style: {'ff-title': {}}}`
style	The global container for the whole page	`style ff-form-wrapper`

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.

Attribute	Description/ Note
fieldType	For name fields, has to be set to `'input'`
dataType	For name fields, has to be set to `'text'`
label	The label to be displayed for the field
style
name	The name of the field that has been pre-defined in our platform. For the name field, it has to be one of the following: `'givenName'` `'middleName`' `'familyName'`
hide	`true/false` To remove or show the field. If you remove the field, it doesn't get displayed and it won't be submitted to the platform.
helperText	The text to be displayed below the field to guide users. For example: 'As displayed on your ID'
rules:
required	Specifies whether the field is mandatory or not - value: true/false - message: error message if user doesn't enter name. Example: 'Please enter your given name'
pattern	regex validation pattern - value: regex value to set validation rules. Example: `^[a-zA-Z]+(\\s+[a-zA-Z]+)$` - message*: error message if user enters invalid. Example: 'Please enter alphabetic characters only'

DOB

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

Attribute	Description/ Note
fieldType	For DOB field, has to be set to `'date'`
dataType	For DOB field, has to be set to `'text'`
label	The label to be displayed for the field
style
name	The name of the field that has been pre-defined in our platform. For the DOB field, it has to be: `'dateOfBirth'`
calendarConfig:
type	The type of the calendar: `"gregory"`: Gregorian (More calendars will be coming soon)
locale	The locale for the calendar: `"en"`: English (More locale will be coming come soon)
day	Specify whether the day of birth is mandatory or not - required : true/false
month	Specify whether the month of birth is mandatory or not - required: true/false
year	Specify whether year of birth is mandatory or not - required: true/false

Address

The Address field by default is using 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:
const oneSdk = await OneSdk({
  session: sessionObjectFromBackend,
  mode: "development",
  recipe: {
    form: {
      provider: {
        name: 'react',
        googleApiKey: "<YOUR_API_KEY>>"
      },
    }
  }
});
If you don't provide a google API Key, auto-search cannot find results, and there will be a fallback in the UI for manual input.

Attribute	Description/ Note
fieldType	For name fields, has to be set to `'address'`
dataType	`'current_addr'` `'previous_addr'`
label	The label to be displayed for the field
style
name	The name of the field that has been pre-defined in our platform. For the address field, it has to be: `'address.fullAddress'`
hide	`true/false` To remove or show the field. If you remove the field, it doesn't get displayed and it won't be submitted to the platform.
helperText	The text to be displayed below the field to guide users. For example: 'Cannot be a PO Box'
manualFieldConfig	Explained below

manualFieldConfig:

Manual address config consists of a set of separate input fields.

manualFieldConfig: [
  {
    fieldType: 'select',
    dataType: 'text',
    hide: false,
    label: 'Country',
    name: 'address.country',
    options: [{label: , value:},{}],
    rules: {
      required: {
        value: true,
        message: `Please select your country`,
      },
      pattern: {
        ...,
      },
    },
  },
  {
    fieldType: 'input',
    dataType: 'text',
    hide: false,
    label: 'Unit Number (optional)',
    name: 'address.unitNumber',
    rules: {
      pattern: {
        ...,
      },
    },
  },
  {
    fieldType: 'input',
    dataType: 'text',
    hide: false,
    label: 'Street Address',
    name: 'address.streetAddress',
    rules: {
      required: {
        value: true,
        message: 'Please enter your street address',
      },
      pattern: {
        ...,
      },
    },
  },
  {
    fieldType: 'input',
    dataType: 'text',
    hide: false,
    label: 'Suburb / Town',
    name: 'address.town',
    rules: {
      required: {
        value: true,
        message: 'Please enter your suburb/town.',
      },
      pattern: {
        ...,
      },
    },
  },
  {
    fieldType: 'select',
    dataType: 'text',
    hide: false,
    label: 'State',
    name: 'address.state',
    placeholder: 'Select Your State',
    options: [{label: , value:},{}],
    rules: {
      required: {
        value: true,
        message: 'Please enter your state',
      },
      pattern: {
        ...,
      },
    },
  },
  {
    fieldType: 'input',
    dataType: 'text',
    hide: false,
    label: 'Postcode',
    name: 'address.postalCode',
    rules: {
      required: {
        value: true,
        message: 'Please enter your postal code',
      },
      pattern: {
        ...,
      },
    },
  },
],

Each manual address field follows the same data field structure, for the following field names:

country
unitNumber
postcode
state
streetNumber
streetName
town

Attribute	Description/ Note
label	label of the field
name	It has to be one of the following items, based on the field name: `'address.country' 'address.unitNumber' 'address.postalCode' 'address.state' 'address.streetNumber' 'address.streetName' 'address.town'`
fieldType	`'select'` for country and state `'input'` for the rest
dataType	`'text'`
options	List of items to be displayed for a drop-down menu. Only applicable to `country` and `state` An array of `[{label: "", value: ""}, {label: "", value: ""}]`
rules:
required	Specifies whether the field is mandatory or not - value: true/false - message: error message if user doesn't provide any input. Example: 'Please enter your suburb/ town'
pattern	regex validation pattern - value: regex value to set validation rules. Example: `^[a-zA-Z]+(\\s+[a-zA-Z]+)$` - message*: error message if user enters invalid. Example: 'Please enter alphabetic characters only'

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:

Attribute	Description/ Note
fieldType	For Driver's Licence state: `'select'` For Driver's Licence licence number: `'input'` For Driver's Licence card number: `'input'` For Medicare card colour: `'select'` For Medicare card number: `'input'` For Medicare position: `'input'` For Medicare expiry: `'date'` For Passport country: `'input'` For Passport number: `'input'`
dataType	'text'
label	The label to be displayed for the field
style
name	The name of the field that has been pre-defined in our platform: For Driver's Licence state: `'region'` For Driver's Licence licence number: `'idNumber'` For Driver's Licence card number: `'extraData.document_number'` For Medicare card colour: `'idSubType'` For Medicare card number: `'idNumber'` For Medicare position: `'extraData.reference'` For Medicare expiry: `'idExpiry'` For Passport country: `'country'` For Passport number: `'idNumber'`
hide	`true/false` To remove or show the field. If you remove the field, it doesn't get displayed and it won't be submitted to the platform.
helperText	The text to be displayed below the field to guide users. For example: 'As displayed on your ID'
placeholder	The text to be displayed inside the field. For example: 'Select DL State or Territory'
rules:
required	specifies whether the field is mandatory - value: true/ false - message: The error message if user doesn't enter name. Example: 'Please enter your given name'
minLength	minimum length of the field to be validated - value: integer - message: The error message if user enters less than minimum length
maxLength	maximum length of the field to be validated - value: integer - message: error message if user enters more than maximum length
pattern	regex validation pattern - value: regex value to set validation rules. Example: `^[a-zA-Z]+(\\s+[a-zA-Z]+)$` - message*: error message if user enters invalid value. Example: 'Please enter alphabetic characters only'

📘
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

Event name	Description	Arguments
form:review:loaded		`inputInfo: {type:'ocr'}`
form:review:ready	Upon clicking on the button, this event will be triggered, and you can listen to it to load another screen.	`inputInfo: {type:'ocr'}`
form:review:failed		`nputInfo: {type:'ocr'}, message?: string`

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
            }
          ]
        }
      }
    }
  }
});

📘
Multiple form instances
Even if you render 3 different instances of review form, only listen to one of them upon the form:review:ready event and mount Biometrics module:
form_review1.on("form:review:ready", async () => {
  biometrics.mount("<YOUR_CONTAINER>");
});

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.

Item	CSS Class
title	`ff-title`
button	`ff-button`
Page container	`ff-form-wrapper`
Input Fields	`ff-form-field`

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>

OCR Review

Description

Default Review screen

📘
Default Screen

Configuration

📘
Field configuration

1- General

2- Personal

📘
Google API Key

3- Documents

📘
Internationalisation

Events

UI Customisation

Removing the fields

📘
Multiple form instances

Styling customisation

Description

Default Review screen

📘Default Screen

Configuration

📘Field configuration

1- General

2- Personal

📘Google API Key

3- Documents

📘Internationalisation

Events

UI Customisation

Removing the fields

📘Multiple form instances

Styling customisation

📘
Default Screen

📘
Field configuration

📘
Google API Key

📘
Internationalisation

📘
Multiple form instances