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

Field Configuration

Available Fields
  • givenName
  • middleName
  • familyName
Common Properties
  • fieldType: ‘input’
  • dataType: ‘text’
  • label: Custom label
  • hide: true/false
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