The Application Number Widget is a custom input field designed to capture and validate an application number in services like Confirmation of Change of Name Request.
This widget allows users to enter an application number and fetch related data from the backend using a configured API (/application/v1/application/by-application-number/details).
It supports validation rules, conditional comparisons, and automatic population of other fields in the form based on the retrieved response.
Key capabilities:
required, invalidInput, invalidAppNo, compareStatus).applicationStatus, surname).populateRelativeToRootForm.{
"key": "applicationNumber",
"type": "customapplicationnumberinput",
"props": {
"label": "Application number",
"required": true,
"url": "/application/v1/application/by-application-number/details",
"useBaseUrl": true,
"placeholder": "Application number",
"appNoLength": 19,
"compareKey": "serviceId",
"compareOperator": "!==",
"compareValue": "591cee25-cc8e-45b3-940a-285e1b76b297",
"populates": [
{ "valueKey": "applicationStatus", "targetKey": "applicationStatusInput" },
{ "valueKey": "Surnameg6k6N", "targetKey": "surnameInput" }
]
},
"validation": {
"messages": {
"required": "Error message for `required`",
"invalidInput": "Error message for invalid input",
"invalidAppNo": "Error message for invalid ID",
"compareStatus": "Error message for invalid comparison"
}
}
}
label – Display name of the widgetrequired – Marks the field as mandatoryurl – API endpoint to fetch application detailsuseBaseUrl – Determines if the base URL is usedplaceholder – Placeholder text in the inputappNoLength – Expected application number lengthcompareKey / compareOperator / compareValue – Used for conditional validationpopulates – Maps API response values to other form fieldspopulateRelativeToRootForm (optional) – Populate across sections using full pathrequired – Field must not be emptyinvalidInput – Input doesn’t match expected formatinvalidAppNo – Invalid application number returned from APIcompareStatus – Comparison validation failsSupports Custom Generic Data Fetch Error Handling for robust API failure scenarios.