Connect database rows to lists and item pages

Prepare the table and route field #

Start with fields the card and detail page actually need: title, summary, image, body, category, published state and a stable slug. A slug should be unique, lowercase, readable, and independent from a database row ID.

Decide how empty optional values should render. A missing image should not leave a broken icon; a missing price should not render an unexplained zero; an unpublished row should not become a discoverable public item by accident.

Design the card and bind its fields #

1. Select the collection. Its toolbar exposes Edit data, Edit card design, and, until it has a table, Connect a database.
2. Connect the collection to the intended table, then choose Edit card design and design one complete card with realistic short, long, and missing values.
3. Select a text, title, image, button, icon, video, badge, or other supported element inside the card and choose Magic Bind Data. Pick a compatible column; the editor preserves the element's layout and styling.
4. Repeat for every dynamic value. Link columns fill link destinations, image columns fill image sources, icon columns fill icons, and ordinary text columns fill visible content. The picker filters out incompatible choices.
5. To change a binding, select another column. When the picker shows an existing connection, choose Disconnect data to turn the current result back into regular editable content.

A list placed inside another collection can use Connect this list to a column to render structured child rows. On an item page, an element outside the provider collection uses Connect this element to item data.

Filter, sort, and limit the visible items #

1. Open the collection's Edit data dialog and choose Filter items.
2. Under Show items where, select a field and choose is, is not, contains, greater than, or less than, then enter the value.
3. Optionally select a Sort field and A → Z or Z → A, then set a numeric Limit. The picker includes fields in the card design and, for connected collections, columns fetched from the table.
4. Choose Apply. Choose Clear to remove the filter, sort, and limit together; Cancel leaves them unchanged.

Create one page design for every row #

1. Select the collection and choose Page for each item. This cannot be configured inside a Shared Element; unlink that copy first.
2. In 1. Your items, choose Inline collection data or a table, the Column used in the web address, and the Column used as the item's name.
3. In 2. Their page, create a new page for these items or reuse an existing item page, enter a parameterized address such as /products/:slug, and choose a real Item to preview.
4. In 3. The way in, choose what a visitor clicks: an eligible whole card, an existing link, or Add a “Read more” button.
5. Resolve every validation message, then save and let Fronty open the shared page design. Use Magic Bind Data there for its title, body, images, links, and other row-specific values.

Every URL value must be non-empty and unique, using a short value such as hello-world: letters, numbers, and hyphens, without slashes. When a column mistakenly contains a full path or prefix, the dialog can offer Fix URL values to strip the prefix. Retry the preview or URL check instead of saving through a failed verification.

Two seed rows should produce two different stable URLs from the same design. The setup refuses ambiguous item URLs rather than risking the wrong row.

Bind item-specific title, description and primary image where the editor exposes those controls. The hosting layer can render dynamic item metadata, but discovery and rendering are different concerns: current customer-site sitemaps do not enumerate every parameterized item route.

Plan for slug changes and deleted rows #

Changing a published slug changes the public address. Update links and arrange a redirect outside Fronty if the old URL already has traffic or backlinks. Before deleting a related row, inspect pages that display it.

Route collisions must be resolved before publish: an item route cannot safely claim the same address as a normal page or another item. Prefer a collection prefix such as /products/slug rather than placing every item at the site root.

Verify list and detail behavior #

Test cards and item links with keyboard alone. Whole-card linking is offered only when the card has one eligible root and no conflicting nested clickable content; otherwise use a clearly named link or button. At phone width, verify long titles, missing images, nested lists, and the empty-result state without horizontal scrolling or hidden actions.