Trace data from database to page

Follow a product list across the database, server action and page binding.

Start with the record shape

Use products with id, name and price as the example. This is a map of the flow, not a completed database tutorial. For a working first API without a database, follow Create your first Server Connect action in the beginner course.

Query through a Server Connect action

Create an action that uses the project’s database connection and outputs a query named products. The action must include the required validation and access checks; returning JSON does not by itself make an endpoint secure.

Inspect the response

Call the action and inspect the returned JSON before adding a table binding. Confirm that products is an array and that each item contains the expected field names and values. Fix a failed request or wrong query here first.

Load the response on the page

Add an App Connect Server Connect component named sc_products and select the action. Its returned data is available under sc_products.data. The component is a page-side loader; it is not another server action.

Repeat the collection and bind the record

Bind the table-body repeat to sc_products.data.products. Inside that repeat, bind the name cell to the current item’s name. The outer expression chooses the collection; the inner expression chooses a field from each record.

Check all three layers

Compare database/query results, JSON output and visible rows. Correct JSON with wrong repeated text usually means the page binding uses the wrong scope. Correct query logic with an empty response may mean the output step was not enabled. Use the practical table guide for the complete UI procedure.

Check your result

You can locate where a missing or incorrect product value enters the data flow.