MallaDocs
HomeQuickstartOpen Malla

Collection lists

Repeat a template once per item of a query or array, with an empty state and pagination.

User guide

A collection list repeats its first child once for every item of a source. Design one card; the list does the rest, with item and index in scope for every binding inside.

Set up a list

  1. Insert it

    Choose Collection list from the CMS group of the insert menu. It starts on your first CMS collection, or, if the site has none, on the page’s first query. The menu only offers it once the site has a CMS collection or a query. Style the list like any frame; a grid works well for cards.

  2. Pick a source

    CMS query lists items of a collection with filters, sorts and a limit (up to 100). Expression repeats any array, such as queries.products.data or vars.cart.

  3. Bind the template

    Bind text, images and links inside the first child to item.*. Use index for numbering and parent.item inside nested lists.

  4. Handle empty results

    Set the empty state text shown when there are no items.

json
"n_list": {
  "type": "collectionList",
  "children": ["n_card"],
  "props": {
    "query": {
      "collectionId": "col_posts",
      "filter": [{ "field": "featured", "op": "eq", "value": true }],
      "sort": [{ "field": "publishedAt", "dir": "desc" }],
      "limit": 6
    }
  }
}

Link each item to its page

To make every card open its own page, the collection needs a template page, such as /blog/:slug.

  1. Make the card a link

    Select the elements inside the first child, right-click and choose Wrap in link. Or insert a Link block in the first child and move the content into it. The first child itself cannot be wrapped.

  2. Bind the URL

    Select the link. In the Link section, press on the Bound URL row and pick the template page under Item page. Reference fields add their own pages, such as Author page.

The pick writes an ordinary expression built from the page path, so /blog/:slug becomes `/blog/${item.slug}`. Edit it by hand if you need to. A button inside the item can link the same way.

Filters and sorts

CMS filters compare a field with a value using eq, neq, gt, gte, lt, lte, contains, in and exists. Values can be bound, for example to a category variable, so the list updates as visitors filter.

Animate the items

Target the card in an interaction and every repeated item animates. Add a stagger for a cascade.