List Manager Tutorial

Three tabs of the Frontend Display screen control how rows are rendered.

Data Layout

The Data Layout screen is a drag-and-drop toolbar builder for the front-end list. The central box is the TABLE; around it are drop zones (Top, Left, Right, Bottom) where you place widgets from the Options list on the left:

• Search, Pager, Items per page
• the filters you defined (shown in the Filters list on the right), plus Apply Filter / Clear Filter buttons
• per-record actions: New, Edit, Bulk Update, Delete, Detail
• the export buttons: Export PDF / Excel / RTF and their Filtered variants

Each widget has an alignment and can be reordered by dragging. Click Add toolbar to create extra rows. The actual column cells still come from your Fields/Columns settings (label, type, prefix/suffix, CSS class); Data Layout only arranges the chrome around the table.

Detail Layout

• On row click — open a detail view when a visitor clicks a row.
• Detail in modal — show it in a pop-up instead of a separate page.
• HTML — the full-record template. This is where you put the big photo, the description, a specs list, a map, etc.:

<div class="row">
  <div class="col-md-6"><img src="##image_url##" class="img-fluid"></div>
  <div class="col-md-6">
    <h3>##title##</h3>
    <p class="fs-4 fw-bold">##price## €</p>
    <p>##description##</p>
  </div>
</div>

Card layout

Switch Frontend layout for list to Card and design a card here. Set how many cards per row on mobile / tablet / desktop, then write the card HTML with placeholders. A card is ideal for property listings, team members, a product catalogue or a gallery:

<div class="card h-100 shadow-sm">
  <img src="##image_url##" class="card-img-top">
  <div class="card-body">
    <h5>##title##</h5>
    <p class="text-muted">##city##</p>
    <p class="fw-bold">##price## €</p>
  </div>
</div>