API Response Viewer — Layout Controls

Minimal Example

{
  "id": "account-summary",
  "type": "api-response-viewer",
  "label": "Account Summary",
  "width": "full",
  "settings": {
    "url": "/api/v1/accounts/{{context.accountId}}/summary",
    "method": "GET",
    "display": "json",
    "height": "300px"
  }
}

Settings Reference

Setting	Type	Default	Description
`url`	string	—	API endpoint URL. Supports template expressions.
`method`	`GET` \| `POST`	`GET`	HTTP method
`headers`	Record<string,string>	—	Additional HTTP request headers
`params`	Record<string,string>	—	Query parameters (supports template expressions)
`display`	`json` \| `table` \| `text`	`json`	How to render the response
`height`	string (CSS)	`"300px"`	Viewer height
`autoFetch`	boolean	true	Fetch on load. If false, show a Refresh button.
`refreshOnChange`	string[]	—	Field ids — re-fetch when any of these change
`showRefreshButton`	boolean	false	Show a manual refresh button
`errorMessage`	string	—	Custom message shown when the API call fails
`loadingMessage`	string	`"Loading..."`	Message shown while fetching
`tablePath`	string	—	JSONPath to the array within the response for table display

JSON Display Mode

In json mode, the response is rendered as a syntax-highlighted, collapsible JSON tree — similar to the JSON editor in read-only mode:

{
  "id": "policy-viewer",
  "type": "api-response-viewer",
  "label": "Current Policy",
  "settings": {
    "url": "/api/v1/policies/{{context.policyId}}",
    "display": "json",
    "height": "400px",
    "showRefreshButton": true
  }
}

Table Display Mode

In table mode, the response is rendered as a read-only data grid. Use tablePath to point to the array within the response:

{
  "id": "transaction-history",
  "type": "api-response-viewer",
  "label": "Recent Transactions",
  "settings": {
    "url": "/api/v1/accounts/{{context.accountId}}/transactions",
    "params": { "limit": "10", "sort": "date_desc" },
    "display": "table",
    "tablePath": "$.data.transactions",
    "height": "350px"
  }
}

// API response shape:
// { "data": { "transactions": [{ "date": "...", "amount": 100, "type": "credit" }] } }

Refresh on Field Change

Automatically re-fetch when a related form field changes. This is useful for live previews that depend on form inputs:

{
  "id": "loan-calculator",
  "type": "api-response-viewer",
  "label": "Repayment Estimate",
  "settings": {
    "url": "/api/v1/loans/estimate",
    "method": "POST",
    "params": {
      "amount": "{{values.loan-amount}}",
      "term": "{{values.loan-term}}",
      "rate": "{{values.interest-rate}}"
    },
    "display": "json",
    "autoFetch": false,
    "refreshOnChange": ["loan-amount", "loan-term", "interest-rate"],
    "height": "200px"
  }
}

Error Handling

Scenario	Default Behaviour
API returns 4xx/5xx	Shows `errorMessage` or default error panel
Network failure	Shows retry button and error message
Empty response / null array	Shows "No data" in table mode, empty JSON in json mode
Invalid JSON response	Shows raw text in text mode, error in json/table mode

Authentication The API Response Viewer uses the same getAuthToken function configured on AtlasFormsClient. The token is automatically injected into the Authorization header. You do not need to manually add auth headers.

← Data Table Next: Data Table Patterns →