Pass data to a Modal Dialog

Click a list item or table row to open a dialog pre-populated with that row's data.

Give ModalDialog an id and call dialogId.open(data) from any event handler. The value passed to open() becomes available inside the dialog as $param, so any attribute or expression in the dialog content can reference it directly.

<App>
  <DataSource
    id="team_members"
    url="/api/team_members"
  />

  <ModalDialog id="memberDetailsDialog" title="Team Member Details">
      <VStack>
      <!-- Avatar and Basic Info -->
      <HStack>
        <Avatar
          url="{$param.avatar}"
          size="$space-12"
          name="{$param.name}"
        />
        <VStack gap="0">
          <Text variant="strong">{$param.name}</Text>
          <Text variant="caption">{$param.role}</Text>
          <Text variant="caption" color="blue">{$param.email}</Text>
        </VStack>
      </HStack>

      <!-- Details Card -->
      <Card gap="0">
          <HStack>
            <Text variant="strong">Department:</Text>
            <Text>{$param.department}</Text>
          </HStack>
          <HStack>
            <Text variant="strong">Start Date:</Text>
            <Text>{$param.startDate}</Text>
          </HStack>
          <HStack>
            <Text variant="strong">Employee ID:</Text>
            <Text>#{$param.id}</Text>
          </HStack>
      </Card>

      <!-- Actions -->
      <HStack>
        <Button
          label="Send Email"
          size="sm"
          onClick="console.log('Email to:', $param.email)"
        />
        <Button
          label="View Calendar"
          size="sm"
          variant="secondary"
          onClick="console.log('Calendar for:', $param.name)"
        />
      </HStack>
    </VStack>
  </ModalDialog>

  <H3>Team Directory</H3>

  <VStack>
    <Items data="{team_members}">
      <Card
        orientation="horizontal"
        onClick="memberDetailsDialog.open($item)">
          <Avatar
            url="{$item.avatar}"
            size="sm"
            name="{$item.name}"
          />
          <VStack gap="0">
            <Text variant="strong">{$item.name}</Text>
            <Text variant="caption">{$item.role} - {$item.department}</Text>
          </VStack>
      </Card>
    </Items>
  </VStack>

</App>
Click on a team member to edit details
<App>
  <DataSource
    id="team_members"
    url="/api/team_members"
  />

  <ModalDialog id="memberDetailsDialog" title="Team Member Details">
      <VStack>
      <!-- Avatar and Basic Info -->
      <HStack>
        <Avatar
          url="{$param.avatar}"
          size="$space-12"
          name="{$param.name}"
        />
        <VStack gap="0">
          <Text variant="strong">{$param.name}</Text>
          <Text variant="caption">{$param.role}</Text>
          <Text variant="caption" color="blue">{$param.email}</Text>
        </VStack>
      </HStack>

      <!-- Details Card -->
      <Card gap="0">
          <HStack>
            <Text variant="strong">Department:</Text>
            <Text>{$param.department}</Text>
          </HStack>
          <HStack>
            <Text variant="strong">Start Date:</Text>
            <Text>{$param.startDate}</Text>
          </HStack>
          <HStack>
            <Text variant="strong">Employee ID:</Text>
            <Text>#{$param.id}</Text>
          </HStack>
      </Card>

      <!-- Actions -->
      <HStack>
        <Button
          label="Send Email"
          size="sm"
          onClick="console.log('Email to:', $param.email)"
        />
        <Button
          label="View Calendar"
          size="sm"
          variant="secondary"
          onClick="console.log('Calendar for:', $param.name)"
        />
      </HStack>
    </VStack>
  </ModalDialog>

  <H3>Team Directory</H3>

  <VStack>
    <Items data="{team_members}">
      <Card
        orientation="horizontal"
        onClick="memberDetailsDialog.open($item)">
          <Avatar
            url="{$item.avatar}"
            size="sm"
            name="{$item.name}"
          />
          <VStack gap="0">
            <Text variant="strong">{$item.name}</Text>
            <Text variant="caption">{$item.role} - {$item.department}</Text>
          </VStack>
      </Card>
    </Items>
  </VStack>

</App>

Key points

dialogId.open(data) passes any value into the dialog: Call it from an onClick or any other event handler, typically passing $item for the current list or table row. The dialog opens and the value becomes immediately available inside it.

$param holds the first argument: Inside the dialog, read any field with $param.fieldName — in expressions, attributes, or script blocks. For multiple arguments, use $params[0], $params[1], etc.

The dialog re-evaluates each time open() is called: Clicking a different card shows that card's data without resetting a shared variable. The dialog always reflects whatever was last passed to open().

title can be bound to $param for a context-aware header: Rather than a generic title like "Team Member Details", use title="{$param.name}" to display the selected item's name in the title bar. titleTemplate supports a fully custom layout.

The id attribute is the handle for the programmatic API: Every dialog you want to open imperatively needs a unique id. Without it there is no way to call open() on a specific instance.

See also