Activity list

A List that iterates an array via a template, using @index for row numbers and per-item relative bindings.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "h",            "list"          ]        },        {          "id": "h",          "component": "Text",          "text": "Activity",          "variant": "title"        },        {          "id": "list",          "component": "List",          "children": {            "path": "/events",            "componentId": "row"          }        },        {          "id": "row",          "component": "Row",          "children": [            "idx",            "label",            "tag"          ],          "justify": "start"        },        {          "id": "idx",          "component": "Text",          "text": {            "call": "@index",            "args": {              "offset": 1            }          },          "tone": "tertiary"        },        {          "id": "label",          "component": "Text",          "text": {            "path": "title"          }        },        {          "id": "tag",          "component": "Badge",          "text": {            "path": "status"          },          "tone": "success"        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "events": [          {            "title": "Deployed release 1.4",            "status": "done"          },          {            "title": "Reviewed pull request",            "status": "done"          },          {            "title": "Closed incident",            "status": "done"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "h",
            "list"
          ]
        },
        {
          "id": "h",
          "component": "Text",
          "text": "Activity",
          "variant": "title"
        },
        {
          "id": "list",
          "component": "List",
          "children": {
            "path": "/events",
            "componentId": "row"
          }
        },
        {
          "id": "row",
          "component": "Row",
          "children": [
            "idx",
            "label",
            "tag"
          ],
          "justify": "start"
        },
        {
          "id": "idx",
          "component": "Text",
          "text": {
            "call": "@index",
            "args": {
              "offset": 1
            }
          },
          "tone": "tertiary"
        },
        {
          "id": "label",
          "component": "Text",
          "text": {
            "path": "title"
          }
        },
        {
          "id": "tag",
          "component": "Badge",
          "text": {
            "path": "status"
          },
          "tone": "success"
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "events": [
          {
            "title": "Deployed release 1.4",
            "status": "done"
          },
          {
            "title": "Reviewed pull request",
            "status": "done"
          },
          {
            "title": "Closed incident",
            "status": "done"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Activity

Deployed release 1.4

done

Reviewed pull request

done

Closed incident

done