API Data Source: load and bind JSON data

Load JSON into the page and bind the returned data without navigating away.

Before you begin

• An App Connect page and an endpoint whose request fields and JSON response shape you know. Use a development endpoint for write examples.

Use a page data source for a read workflow

API Data Source sends a browser GET request to a JSON endpoint. It uses the same fetch runtime as API Action, with controls focused on reading and caching data. For APIs that require a private service key, use a server-side API Connector action and expose only the required result to the page.

Configure the endpoint and its inputs

Select the component in App Structure to edit its Properties.

Control or value	Meaning and use
ID	The binding/action name in this page, for example products.
Url / Define API Schema	Url is the endpoint to call. Define API Schema supplies request/response metadata for the editor pickers; declaring a schema does not change the remote service or validate its response at runtime.
Input / Query Parameters	Bind each declared input to the intended value. Values are URL-encoded; null/undefined values are omitted. Changing bound parameters can reload the source when auto loading is enabled.
No Auto Load	Enable when an explicit Load action should trigger the request. With it disabled, a nonempty URL loads at initialization and changes to URL or parameters reload it. Turning No Auto Load off by itself does not trigger a fetch in the installed update handler.
Credentials	Sets the browser request withCredentials flag. The remote service must permit the origin and credentialed requests; this does not bypass CORS or supply a private API key.
Prefix / dynamic Url	Prefix is joined before the URL. A URL binding chooses the endpoint at runtime. Bind only intended destinations; query values belong in parameters.
API Headers	Supply public browser request headers as name/value pairs. Header changes alone do not automatically reload the source.

Load and read the result

Load accepts input parameters and a Reload option. A newer HTTP load aborts a pending one. In the data picker, expand the component’s data node; the remainder of the path follows the actual response.

Control or value	Meaning and use
Example response	{"products":[{"id":1,"name":"Notebook"}]}
Repeat binding	For component ID products, repeat products.data.products and bind name inside the repeat. An API returning a root array instead uses products.data.
Loading or failure	A new request resets request state and errors but preserves previous data. An error can leave the old list visible; show its stale/error state deliberately.
Timeout	The runtime timeout attribute is in seconds; zero means no configured request timeout. It is not a response-cache duration.

Cache by URL with an explicit lifetime

Select a Local or Session Manager already on the page, then set Cache for in seconds. The runtime default is 86400 seconds when ttl is omitted. Load with Reload bypasses the stored response for that request.

Control or value	Meaning and use
Cache key	The resolved URL, including query parameters. Headers and user identity are not part of the key. Clear account-specific cached data on account changes; do not cache private responses in shared browser storage by default.
Cache result	Restores data, headers, links and paging and emits Success then Done. The component status is not set to a network 200 on this path; do not require status == 200 to display a valid cached result.
After writes	Reload affected lists deliberately. Changing server data does not automatically invalidate a response stored in a page State Manager.

Distinguish completion from success

Use Success for work that depends on a successful JSON response. Done also runs after errors and aborts, so it is suitable for cleanup rather than a saved-successfully message.

Control or value	Meaning and use
Start / state.executing	A request starts; disable repeated submission or show a loading indicator while executing is true.
Success / data	The HTTP path accepts status below 400 only when the response parses as JSON. Empty 204 responses and HTML login pages produce a JSON error.
Invalid / Unauthorized / Forbidden / Rate Limit	HTTP 400 / 401 / 403 / 429 have distinct event branches. Handle the applicable branch; these do not also trigger the generic Error event.
Error / lastError	Other HTTP failures, transport failures, timeouts or invalid successful JSON. Inspect status, message and response; do not expose private server details in a public error label.
Abort / Done	Abort ends the browser request. It does not undo work already accepted by the server. Done means the attempt ended.
Upload / Download	Progress events expose loaded, total and lengthComputable. Progress objects provide position, total and percent. Upload at 100% means bytes were sent; server processing can still fail.

Use API pagination only when the response describes it

The HTTP runtime reads Link response headers into links and derives paging from first/prev/next/last links with page parameters. Total counts may come from X-Total, X-Count or X-Total-Count. It does not infer page links from an arbitrary JSON array. Bind the API’s own paging fields if it uses a different response contract.

Continue with the matching workflow

Use the related guide to build and check the surrounding page workflow.

Check your result

You can configure the request, bind its real output and distinguish a successful result from loading, validation and error states.