io.display.metadata

Displays a series of label/value pairs in a variety of layout options.

Usage

TypeScript

await io.display.metadata("User info", {
  layout: "card",
  data: [
    {
      label: "Name",
      value: `${user.firstName} ${user.lastName}`,
    },
    {
      label: "Email",
      value: user.email,
      url: `mailto:${user.email}`,
    },
    {
      label: "Friends",
      value: user.friends.length,
    },
  ],
});

JavaScript

await io.display.metadata("User info", {
  layout: "card",
  data: [
    {
      label: "Name",
      value: `${user.firstName} ${user.lastName}`,
    },
    {
      label: "Email",
      value: user.email,
      url: `mailto:${user.email}`,
    },
    {
      label: "Friends",
      value: user.friends.length,
    },
  ],
});

interval.com

Props

TypeScript

data

Required

MetaItem[]

Array of label/value objects, with optional markup data.

type MetaItem = {
  // the item label
  label: string;
  // the item display text value
  value?: string | number | boolean | Date;
  // links the item to an external URL
  url?: string;
  // links the item to another action or page
  route?: string;
  // arbitrary key/value pairs to send to the linked route
  props?: Record<string, any>;
  // a visible image to be displayed in the cell
  // must contain either `url` or `buffer`
  image?: {
    // a URL to the image
    url?: string
    // a buffer containing the image contents
    buffer?: Buffer
    // the image alt tag
    alt?: string
    // the size of the image
    size?: "thumbnail" | "small" | "medium" | "large"
  }
}[]

layout

Optional

'card' | 'list' | 'grid'

Layout to display the metadata items, defaults to "grid"

Returns

null

JavaScript

data

Required

MetaItem[]

Array of label/value objects, with optional markup data.

type MetaItem = {
  // the item label
  label: string;
  // the item display text value
  value?: string | number | boolean | Date;
  // links the item to an external URL
  url?: string;
  // links the item to another action or page
  route?: string;
  // arbitrary key/value pairs to send to the linked route
  props?: Record<string, any>;
  // a visible image to be displayed in the cell
  // must contain either `url` or `buffer`
  image?: {
    // a URL to the image
    url?: string
    // a buffer containing the image contents
    buffer?: Buffer
    // the image alt tag
    alt?: string
    // the size of the image
    size?: "thumbnail" | "small" | "medium" | "large"
  }
}[]

layout

Optional

'card' | 'list' | 'grid'

Layout to display the metadata items, defaults to "grid"

Returns

null

Examples

Asynchronous data

info

New in version 1.2.0 of the SDK.

If desired for performance, all of the properties in the data value objects aside from label can be awaitable Eventual versions of their respective types above:

TypeScript

Eventual definition

type Eventual = T | Promise<T> | () => T | () => Promise<T>;

Action code snippet

await io.display.metadata({
  data: [
    {
      label: "Total users",
      value: async () => await db.users.count(),
    },
  ],
});

JavaScript

Eventual definition

type Eventual = T | Promise<T> | () => T | () => Promise<T>;

Action code snippet

await io.display.metadata({
  data: [
    {
      label: "Total users",
      value: async () => await db.users.count(),
    },
  ],
});

Did this section clearly explain what you wanted to learn?