Data Detail (select one record)

Single-record selection from an array source by key, exposing a stable detail.data object for bindings.

Data Detail

Data Detail selects a single record from an array (or array-like source) so you can bind UI to one “current item”.

What it solves

This tour explains the selection pattern behind Data Detail, not just the component itself. You will follow how a list chooses a record key, how Data Detail resolves that key to one current item, and why that makes detail panels easier to bind and maintain than copying data by hand.

Master → detail

Pick an item from a list; show details elsewhere.

Selection state

Store the selected key, not a full object copy.

Declarative bindings

Bind UI to detail.data.* fields.

Select a record by key

Bind UI to the selected record

Switch selection via actions

Using the Data Detail

You’ll work mainly in two places:

App Structure: select the Data Detail component.
Properties: configure the Data Detail-specific fields (ID, Data Source, Key).

Then you’ll select a master list item and inspect its Repeat + Click event, which drives the Data Detail selection.

Using the Data Detail

First select the Data Detail component in App Structure and verify its ID, Data Source, and Key. Then inspect the master list item’s Repeat + Click event that calls select(id).

Data Detail component (App Structure)

The tour selects the Data Detail wrapper in App Structure. This is the component that will hold the selected record and expose it as detailColumn.data.

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Data Detail ID and see how it fits into this area.

Data Detail ID

This ID becomes the component name you use in expressions and actions (for example: detailColumn.data.name and detailColumn.select(id)).

Data Source (records array)

The Data Source is the array of records that Data Detail can select from. On this demo page it’s bound to users.value.

Use the picker to choose a dataset (Data View result, Data Store, API output, or a simple array).

tip: When you pass values from inputs or query params into select(), remember they are strings unless you convert them (use toNumber() for numeric ids).

Key (field name)

Key is the field name in the Data Source used to identify each record (for example: id).

Important: this is not a dynamic expression like {{id}} — it’s the literal field name that Data Detail uses to match the value you pass to detailColumn.select(...).

important: Query parameters are strings. Convert numeric keys with toNumber() when needed (for example: query.id.toNumber()).

Master list (repeater)

The master list uses a Repeat over users.value on the list container. Select the repeater so we can highlight its Repeat expression in Properties.

Selection click event

The click event calls Data Detail’s select(id) action. Data Detail keeps its own selected state and exposes the selected record as detailColumn.data.

tip: In Wappler, attach this via Events → Click → Actions picker → Data Detail → Select (and pass the item id).

Modifiers (Click)

The tour highlights the Click event modifiers. Here it uses prevent (because the item is an <a href="#">). Modifiers like prevent/stop/once are configured next to the event in Properties.

Using the selected record

Once selected, Data Detail exposes one object in a stable shape you can bind to.

Data schema: detail.data

The selected record is available as detailId.data. Use it in bindings like detailId.data.title or detailId.data.price.formatCurrency(’$’).

For empty/selected UI inside Data Detail, prefer dmx-show/dmx-hide so your detail form stays in the DOM and doesn’t reset state.

Single object

detail.data is one record, not an array.

Works with bindings

Use dmx-text / dmx-bind:* via Properties pickers.

Null-safe thinking

Handle “no selection” states with conditional display.

Bind headline fields (name/title)

Bind images/links (src/href)

Conditionally show empty states

Selected record for inspection

The tour selects a record so the detail fields are visible for inspection.

Detail input bindings

The form fields bind to the selected record (detailColumn.data.*), so the UI always reflects the current selection.

Selecting a record (actions)

Use events/actions (click/submit/change) to call detailId.select(key). This updates the selection and the UI reacts. This step matters because Selecting a record (actions) is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.

tip: A common pattern is: click a card → select(record.id) → navigate (optional) or reveal the details panel.

Common pattern: master/detail + URL

For shareable pages, store the selected key in Query Manager. Then let Data Detail select based on that query param.

List uses Data View (search/sort/page)

Selection key stored in Query Manager

Detail panel binds to Data Detail

Preview mode: see it in action

Switch to Preview mode and interact with the master list. The detail form updates because it’s bound to detailColumn.data.*.

Preview mode

Switch the page to Preview mode so you can interact with it like a real app.

Wait for Preview mode

Wait for the page to finish switching modes.

User selection

We’ll click a user in the master list. This runs a click event that calls detailColumn.select(id).

Detail form updates

The fields and preview badges update because they’re bound to detailColumn.data.*.

Try editing a field

Edit the Name or Email field and watch the preview badges update. This demonstrates that inputs are reactive value sources.

Return to Edit mode

Switch back to Edit mode to continue inspecting components.

Wrap-up

Next, connect selection to navigation and interactions.

Next steps

Pick a related tour to continue.