Nova · Layouts

Nested conditionals

An if inside an if. The outer one asks whether anybody is signed in, the inner one what kind of member they are: three screens from one layout.

The action, as it is written

{
  id: 'nested-conditionals',
  data: { member: { name: 'Ada', staff: true } },
  layout: {
    if: '$.member',
    then: {
      if: '$.member.staff',
      then: {
        component: 'Text',
        children: '{{$.member.name}} works at the box office.',
      },
      else: {
        component: 'Text',
        children: '{{$.member.name}} is a member.',
      },
    },
    else: { component: 'Text', children: 'Nobody is signed in.' },
  },
}

Running herepress it

Ada works at the box office.

What is done to it

Nothing. It is only drawn.

What it then holds

{ member: { name: 'Ada', staff: true } }

What it then says

Ada works at the box office.

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.