A standalone action button with no input field. When clicked, it POSTs to the integration engine and maps the response into other form fields.
Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.
- The lookup should only happen when the user explicitly clicks — there is no input field to type into
- Example: "Verify Insurance Policy" button that checks a policy number already entered elsewhere in the form
Instead of genericbuttonfetch, use… |
For… |
customgenericdatafetch with triggerType: "INPUT_LENGTH" |
Auto-fetch as the user types into an input field |
customgenericdatafetch with triggerType: "TRIGGER_BUTTON" |
An input field alongside a search button (the user types a value, then clicks to search) |
customgenericdatafetch with triggerType: "FIELD_LISTENER" |
Auto-fetch when another field's value changes |
- Renders a single button with no input field.
- On click, POSTs
{ endpointCode, payload } to props.url.
- On success, populates the fields listed in
props.populates from the response.
- The field label is always hidden internally — use
props.buttonText for the visible button text.
- If
props.isClickRequired is true, the form control is invalid until the button has been clicked successfully.
- If
props.checkType: "FIELD_LISTENER" is also set, the clicked state resets when the payload source fields change, requiring the user to click again.
| Prop |
Type |
Description |
url |
string |
Integration engine URL (e.g. /integration/v1/data-fetch). Component throws if missing. |
endpointCode |
string |
Integration endpoint code sent in every request. Component throws if missing. |
buttonText |
string |
Text displayed on the button. (label is auto-hidden — do not rely on it.) |
| Prop |
Type |
Default |
Description |
buttonStyle |
'filled' \| 'outlined' \| 'text' |
'filled' |
Visual style of the button. |
alignment |
'left' \| 'center' \| 'right' |
'left' |
Horizontal alignment. |
width |
number |
100 |
Bootstrap column width: 25, 50, 75, or 100. Ignored when buttonStyle is 'text'. |
disabled |
boolean |
— |
Disables the button and suppresses click events. |
| Prop |
Type |
Description |
payloadKey |
string |
Form field key whose value is sent as { [payloadKey]: value }. Required unless using useMultiplePayloadKeys or staticPayload. |
useBaseUrl |
boolean |
When true, prepends the API gateway base URL to url. |
useMultiplePayloadKeys |
boolean |
When true, use payloadKeyMappings instead of payloadKey. |
payloadKeyMappings |
array |
[{ "key": "param", "sourceField": "FIELD_KEY" }] or [{ "key": "param", "isStatic": true, "staticValue": "VALUE" }]. |
staticPayload |
object |
Static object sent as the full payload. Takes priority over payloadKey and payloadKeyMappings. |
| Prop |
Type |
Description |
isClickRequired |
boolean |
When true, the form control is invalid until the button has been clicked successfully. |
checkType |
'FIELD_LISTENER' |
When 'FIELD_LISTENER' and isClickRequired is true, resets the clicked state when payload source fields change. |
¶ Response handling
| Prop |
Type |
Description |
populates |
array |
[{ "valueKey": "dotPath", "targetKey": "FIELD_KEY" }]. Auto-fills form fields from the response. |
populateRelativeToRootForm |
boolean |
When true, resolves populates target keys relative to the root form. |
errorMapping |
object |
Maps API error codes to form validation error names. |
showGlobalError |
boolean |
Shows a global error banner on fetch failure. |
successMessageAfterFetch |
string |
Message displayed below the button after a successful fetch. |
{
"key": "VERIFY_PLOT",
"type": "genericbuttonfetch",
"props": {
"label": "Verify Plot",
"buttonText": "Verify Plot",
"required": false,
"defaultRequired": false,
"url": "/integration/v1/data-fetch",
"endpointCode": "VERIFY_PLOT_NUMBER",
"useBaseUrl": true,
"payloadKey": "PLOT_NUMBER",
"populates": [
{ "valueKey": "ownerName", "targetKey": "PLOT_OWNER" },
{ "valueKey": "totalArea", "targetKey": "PLOT_AREA" }
]
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
}
}
¶ With mandatory click and multi-key payload
{
"key": "VERIFY_INSURANCE_POLICY",
"type": "genericbuttonfetch",
"props": {
"label": "Verify Insurance Policy",
"buttonText": "Verify Policy",
"buttonStyle": "filled",
"alignment": "left",
"width": 50,
"required": false,
"defaultRequired": true,
"url": "/integration/v1/data-fetch",
"endpointCode": "VERIFY_INSURANCE_POLICY",
"useBaseUrl": true,
"useMultiplePayloadKeys": true,
"payloadKeyMappings": [
{ "key": "policyNumber", "sourceField": "INSURANCE_POLICY_NUMBER" },
{ "key": "clientNid", "sourceField": "APPLICANT_NID" }
],
"isClickRequired": true,
"checkType": "FIELD_LISTENER",
"successMessageAfterFetch": "Policy verified successfully",
"showGlobalError": true,
"populates": [
{ "valueKey": "policyStatus", "targetKey": "POLICY_STATUS" },
{ "valueKey": "expiryDate", "targetKey": "POLICY_EXPIRY_DATE" },
{ "valueKey": "coverType", "targetKey": "COVER_TYPE" }
],
"errorMapping": {
"POLICY_NOT_RENEWABLE": "invalidGenericInput"
}
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Please verify the policy before submitting",
"invalidGenericInput": "Policy could not be verified. Check the policy number and try again."
}
}
}
- Omitting
props.url or props.endpointCode — the component throws a runtime error. Both are mandatory.
- Using
props.label expecting visible text — the label is auto-hidden. Use props.buttonText for the button text.
- Confusing this with
customgenericdatafetch + triggerType: "TRIGGER_BUTTON" — that renders an input field with a button; genericbuttonfetch renders only a button.
isClickRequired: true without checkType: "FIELD_LISTENER" when the payload field can change — the form appears valid with a stale fetch result after the source field is edited.- Setting
props.width when buttonStyle is 'text' — width is ignored for text-style buttons.
- Providing both
staticPayload and payloadKey — staticPayload takes priority; payloadKey is silently ignored.