Nova · Shells

List canvas

A canvas in list mode keeps every action pushed onto it on the screen. Its actionLayout loops over $.instances and gives each one a slot, so a feed is pushes and nothing else.

The shell, as it is written

{
  canvases: [
    { id: 'list-canvas.desk', initial: 'list-canvas.write' },
    {
      id: 'list-canvas.feed',
      mode: 'list',
      actionLayout: {
        component: 'Stack',
        children: [
          {
            for: '$.instances',
            as: 'instance',
            key: 'id',
            do: {
              component: 'ActionSlot',
              props: { instanceId: '$instance.id' },
            },
          },
        ],
      },
    },
  ],
  actions: {
    list-canvas.write: {
      id: 'list-canvas.write',
      layout: {
        component: 'Button',
        ref: 'note',
        children: 'Post a note',
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'note',
          do: [
            {
              push: {
                action: 'list-canvas.note',
                canvas: 'list-canvas.feed',
                input: { text: 'A seat was booked.' },
              },
            },
          ],
        },
      ],
    },
    list-canvas.note: {
      id: 'list-canvas.note',
      data: { text: '' },
      input: {
        type: 'object',
        properties: {
          text: { type: 'string', description: 'What the note says.' },
        },
      },
      layout: { component: 'Text', children: '$.text' },
    },
  },
}

Running herepress it

What is done to it

press note
press note

What then stands on each canvas

{
  list-canvas.desk: ['list-canvas.write'],
  list-canvas.feed: ['list-canvas.note', 'list-canvas.note'],
}

What it then says

Post a note
A seat was booked.
A seat was booked.

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.