The TIN Input component allows users to enter a Tax Identification Number (TIN) and automatically fetch supplier details from a backend endpoint. It can populate multiple fields within the same block or across sections.
{
"key": "key",
"type": "customtininput",
"defaultValue": null,
"props": {
"endpointCode": "FTINDETAILS",
"hint": "",
"label": "TIN",
"hidden": false,
"tooltip": "",
"disabled": false,
"required": true,
"populates": [
{
"valueKey": "SupplierName",
"targetKey": "SupplierName"
},
{
"valueKey": "DetailedAddress",
"targetKey": "DetailedAddress"
}
],
"placeholder": "Enter TIN",
"defaultRequired": true,
"internalDescription": ""
},
"fieldArray": null,
"validation": {
"messages": {
"required": "Please fill in this field",
"invalidTIN": "No details found for supplier",
"invalidInput": "TIN number must be 9 digits"
}
},
"validators": null
}
| Property | Type |
|---|---|
| Category | string |
| Cell | string |
| DetailedAddress | string |
| District | string |
| EmailAddress | string |
| Fax | string |
| ManagerNames | string |
| NationalId | string |
| PhoneNumber | string |
| Province | string |
| SupplierName | string |
| SupplierTin | string |
| Village | string |
| Sector | string |
These properties can be used in the
populatesarray to automatically fill other fields when a valid TIN is entered.
Endpoint-based fetching
endpointCode (FTINDETAILS) instead of a URL for fetching TIN details.valueKey → targetKey mapping.Field Population
Supports populating fields within the same block or across sections using:
"populateRelativeToRootForm": true
and specifying the full path for targetKey:
sectionKey.blockKey.fieldKey
Validation
UI Configuration
Conditional Validations
hat?