Server Connect component: 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

This App Connect component calls a Server Connect action. It does not define the server workflow or open a direct database connection in the browser. Select an existing read action and give the page component a unique ID such as products.

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.
Select Server Action / Action / Url / Site	Use Select Server Action to choose the project action. Action displays its name; Url and Site are selector metadata, normally hidden. Input Parameters are populated from the selected action schema.
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.

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.
Abort / Reset	Abort stops the pending HTTP request; Reset also clears the component response data. Neither deletes server records.
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.

Live Refresh uses a separate request path

Live Refresh with Sockets requires the socket runtime and server support. It listens on /api and derives an event from the action URL. When connected, refresh uses socket parameters and an acknowledgement instead of HTTP. The installed socket response path maps status 200 to Success and other known statuses to their matching event; it does not apply the HTTP response cache. A room or refresh event does not authorize data access: keep authorization in the server action.

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.