Data Detail: select one loaded record

Find one record in a client-side collection by a matching key value.

Before you begin

• An App Connect page with the matching extension included and a known array of record objects.

Select from data already in the page

Data Detail does not fetch a record from the server. Bind Data Source to an array already returned to the page and use Key/Value to select one member. If the record is not in that array, request it through a server action instead.

Configure identity and selection

Give the component ID productDetail.

Control or value	Meaning and use
Data Source	The loaded array, for example products.data.products. Prefer record objects with a stable unique key.
Key	The field name to compare, for example id. This is a property name, not the desired record id.
Value	The key value to select. Matching is strict: numeric 2 differs from string '2'. Convert a query-string value to the source key’s type before matching.
Select action: Key	Despite the action field label Key, this argument is the value to find, for example numeric 2. The component’s Key remains id.
data	The first matching record object, or null if nothing matches. Bind productDetail.data.name, not a Repeat collection.

Example: choose Pencil by id

Use [{id:1,name:‘Notebook’},{id:2,name:‘Pencil’}], Key id and numeric Value 2. A label bound to productDetail.data.name should show Pencil. Select 3 and show a no-selection message because data becomes null.

Account for selection changes in edit forms

When a bound Value changes, the installed component schedules resets for forms nested inside Data Detail. Calling Select uses a different update path and does not request that reset. Define whether switching records discards or preserves an unsaved draft; do not rely on the two paths being identical.

A selected record is not an authorization check

A client can change the selection and any submitted id. Validate the selected id and permission at the update/delete endpoint. Changing Key alone is not handled by the installed update hook; configure it before selection or reload the source.

Use a complete page example

Continue with the matching workflow to connect this component to the surrounding page.

Check your result

You can configure the component, use its exact output shape and verify selection, filtering or local editing with known example records.