Connect data to an animated ranking

Repeat a row design, share a dataset and animate score changes.

Design one row

  1. Add a Collection in Edit and open Edit row design in its inspector.
  2. Build the row with text, rectangles and images.
  3. Bind objects to record fields, such as {{country}} and {{points}}. Use {{rank}} for the calculated position.
  4. Return to the collection and configure layout, spacing, sorting and animation.

Continue a ranking in the next column

Choose Grid → Down each column and set Rows per column. A value of 3 puts ranks 1–3 in the first column, 4–6 in the second, and so on. The container fits its rows automatically; change the row dimensions and spacing instead of stretching the outer box.

Connect different designs to the same data

In Collection Data Source, create a named source. Choose the same source on a collection in another template. Records are shared, while row designs, layouts and sorting remain independent. Create another source for an unrelated dataset.

Prepare and publish a score change

With Auto update off, edits appear in Preview first. Update publishes the prepared data. For a shared source, it also updates that source in linked on-air collections while retaining their published designs.

Update linked data publishes the source's prepared data across its on-air views. Check every linked view before using it.

Know the current limits

The current implementation supports up to 128 records per collection. Row designs support text, rectangles and images, not nested collections, video or timers. Rehearse representative data and hardware before a live event.

Back to all guides