genericbuttonfetch

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.

When to use

• 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

When NOT to use

How it works

1. Renders a single button with no input field.
2. On click, POSTs { endpointCode, payload } to props.url.
3. On success, populates the fields listed in props.populates from the response.
4. The field label is always hidden internally — use props.buttonText for the visible button text.
5. If props.isClickRequired is true, the form control is invalid until the button has been clicked successfully.
6. If props.checkType: "FIELD_LISTENER" is also set, the clicked state resets when the payload source fields change, requiring the user to click again.

Props

Required

Button appearance

Payload configuration

Validation behaviour

Response handling

Examples

Minimal

{
  "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."
    }
  }
}

Common mistakes

• 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.

Checklist

• key is UPPER_SNAKE_CASE and unique across the entire form
• props.label is present (even though hidden) and unique
• buttonText is set with the visible button label
• Field is nested at the correct depth: sections > formly-group > block > genericbuttonfetch
• url and endpointCode are set
• useBaseUrl: true
• payloadKey or payloadKeyMappings is configured
• populates uses correct response key paths
• isClickRequired: true combined with checkType: "FIELD_LISTENER" when stale-click prevention is needed