Cells

CollectionView cells are fragment styles stored under top-level cells. A DynamicCell resolves the selected cells.* key, creates the fragment tree from views.base, and applies state updates such as normal, focused, and selected.

{
  "cells": {
    "poster": {
      "$supportsDataMap": true,
      "views": {
        "base": [
          {
            "id": "poster",
            "subType": "Poster",
            "uri": "${data.posterUrl}",
            "width": 384,
            "height": 216,
            "opacity": 1,
            "scale": [1, 1]
          },
          {
            "id": "title",
            "subType": "Label",
            "text": "${data.title}",
            "translation": [0, 232],
            "width": 384,
            "height": 28
          }
        ],
        "normal": {
          "poster": { "opacity": 1, "scale": [1, 1] }
        },
        "focused": {
          "poster": { "scale": [1.05, 1.05] }
        },
        "selected": {
          "poster": { "opacity": 0.85 }
        }
      }
    }
  }
}

Bindings belong on identified children in views.base, not in status maps. See Fragment Data Bindings for the exact binding syntax and current limitations. See View Fragments for the complete fragment guide map.

Selecting a Cell Style

Rows choose their default cell style with cellSettingsKey:

{
  "rows": {
    "regular": {
      "rowType": "HorizontalRow",
      "height": 260,
      "cellSize": [384, 216],
      "cellSettingsKey": "cells.poster"
    }
  }
}

The row controls the cell footprint. The cell style controls the view tree rendered inside that footprint.

Mixed Cell Styles

When a row enables useMixedCellStyleKeys, each item can provide a cellSettingsKey. Use this for editorial rows, featured cards, ad insertions, or any row where the first item is visually different from the rest.

{
  "rows": {
    "mixedRail": {
      "rowType": "HorizontalRow",
      "height": 430,
      "cellSize": [384, 216],
      "cellSettingsKey": "cells.posterSmall",
      "useMixedCellStyleKeys": true
    }
  }
}

{
  id: 'hero',
  title: 'Hero',
  cellSettingsKey: 'cells.posterLarge',
}

Data And Callbacks

Cell fragments can bind item data and invoke named lifecycle callbacks. Declare callback names in a root-level callbacks object, alongside views, and register their TypeScript handlers with ViewFragmentProvider before the first fragment is created.

{
  "$supportsDataMap": true,
  "callbacks": {
    "onMount": ["preparePoster"],
    "onUnmount": ["releasePoster"],
    "onDataChange": ["synchronizeBadge"]
  },
  "views": {
    "base": [
      {
        "id": "poster",
        "subType": "Poster",
        "uri": "${data.posterUrl}",
        "width": 384,
        "height": 216
      },
      {
        "id": "badge",
        "subType": "Label",
        "text": "${data.badgeText}",
        "width": 120
      }
    ],
    "normal": {
      "poster": { "opacity": 0.85 }
    },
    "focused": {
      "poster": { "opacity": 1 }
    }
  }
}

Fragment children are SceneGraph nodes; writing an application callback name into a child field does not register a fragment or selection callback. Handle item selection through CollectionView, and use fragment callbacks for pooled child-view lifecycle, data, status, or layout work.

Use Fragment Data Bindings for ${data.*} and ${fn.*}. Use Fragment Callbacks and Lifecycle for callback registration, handler signatures, ordering, and cleanup.

Row Runtime Data

Cell styles describe presentation. The CollectionView data source owns row data, dynamic loading, request triggers, tab metadata, and row callbacks. See CollectionView Data Source and Events for runtime row behavior.