Personal

The Personal Screen component enables end-users to enter their details securely for verification against government data sources. This guide covers implementation, customization, and event handling.

Quick Start

1

Add HTML Container

1<div id="form"></div>
2

Initialize Component

1const personal = oneSdk.component("form", {
2  name: "PERSONAL",
3  type: "manual",
4});
5
6// Mount to your container
7personal.mount("#form");

Configuration Guide

General Settings

1const personal = oneSdk.component('form', {
2  name: "PERSONAL",
3  type: "manual",
4  title: {
5    label: "Your Personal Details",
6    style: { 'ff-title': {} }
7  },
8  descriptions: [
9    {label: 'We need to collect your data'}
10  ]
11});

For more detailed configuration options, please refer to the Field Configuration section below

You can customize fields based on country (using ISO 3166-1 alpha-3 codes) and state:

1const personal = oneSdk.component('form', {
2  name: "PERSONAL",
3  type: "manual",
4  personal: {
5    countries: {
6      AUS: {
7        NSW: { /* NSW specific config */ },
8        default: { /* Other AU states */ }
9      },
10      NZL: {
11        default: { /* NZ config */ }
12      },
13      default: {
14        default: { /* Default config */ }
15      }
16    }
17  }
18});

Field Configuration

Available Fields
  • givenName
  • middleName
  • familyName
Common Properties
  • fieldType: ‘input’
  • dataType: ‘text’
  • label: Custom label
  • hide: true/false
  • rules:
    • required: { value: ‘boolean’, message: ‘string’ }
    • pattern: { value: ‘regex string’, message: ‘string’ }
1fields: [
2  {
3    fieldType: "input",
4    name: "givenName",
5    label: "Given Name:",
6    dataType: 'text',
7    hide: false,
8    helperText: "As shown on your ID",
9    rules: {
10      required: {
11        value: true,
12        message: "Please enter your given name"
13      },
14      pattern: {
15        value: "^[a-zA-Z]+(\\s+[a-zA-Z]+)*$",
16        message: "Please use alphabetic characters only"
17      }
18    }
19  }
20]

Event Handling

form:personal:loaded

Emitted when the screen is successfully mounted

form:personal:ready

Emitted when form submission is complete and ready for next step

form:personal:failed

Emitted when an error occurs during form operation

Event Listener Example

1personal.on("form:personal:ready", (data) => {
2  // Handle successful form completion
3  console.log("Form completed:", data);
4});
Best Practice

Always implement error handling and loading states when working with Personal Screen events to provide a smooth user experience.

Built with