List View

Display a list of items.

interface CommandJSONViewList {
  type: 'list';
  shouldFilter?: boolean;
  items: CommandJSONViewListItem[];
}

Property	Type	Description
`type`	`list`	The view type
`items`	`CommandJSONViewListItem[]`	The list items
`shouldFilter`	`?boolean`	Whether to filter the items when the Command Bar search panel value is changed

Example

console.log(JSON.stringify({
  view: {
    type: 'list',
    items: [
      {
        value: 'open-url',
        icon: 'icon:Link',
        title: 'Open an URL',
        actions: [
          { type: 'open-url', url: 'https://google.com', defaultAction: true }
        ],
      },
      {
        value: 'paste-emoji',
        icon: 'icon:Clipboard',
        title: 'Paste Emoji',
        actions: [
          { type: 'paste', content: '🤯', defaultAction: true }
        ],
      },
    ],
  }
}))

const emojis = ['🤯', '🎉', '✅', '🔃', '👏', '🟩', '🔴', '😅', '🤔', '❌', '🌿', '😍'];

console.log(JSON.stringify({
  view: {
    type: 'list',
    items: emojis.map((emoji, index) => ({
      value: `emoji-${index}`,
      title: emoji,
      actions: [
        { type: 'paste', content: emoji, defaultAction: true },
        { type: 'open-url', url: `https://emojipedia.org/${emoji}` },
      ],
    })),
  }
}))

console.log(JSON.stringify({
  view: {
    type: 'list',
    items: [
      {
        group: 'Emoji',
        title: '😍',
        value: 'emoji-1',
        actions: [
          { type: 'paste', content: '😍', defaultAction: true },
        ],
      },
      {
        title: '🌿',
        group: 'Emoji',
        value: 'emoji-2',
        actions: [
          { type: 'paste', content: '🌿', defaultAction: true },
        ],
      },
      {
        title: 'ヾ(≧▽≦*)o',
        group: 'Kaomoji',
        value: 'kaomoji-1',
        actions: [
          { type: 'paste', content: 'ヾ(≧▽≦*)o', defaultAction: true },
        ],
      },
    ],
  }
}))

List Item

Item for the list type view.

interface CommandJSONViewListItem {
  title: string;
  value: string;
  icon?: string;
  group?: string;
  subtitle?: string;
  description?: string;
  actions?: CommandJSONViewListItemAction[];
}

Property	Type	Description
`value`	`string`	The list item’s unique value
`title`	`string`	The list item’s title that will be displayed
`icon`	`?string`	The list item’s icon. This can be an image URL or use the `icon:ICON_NAME` format to use the built-in icon. Replace the `ICON_NAME` with the icon’s name you can find here.
`actions`	`?CommandJSONViewListItemAction[]`	The list item’s actions
`subtitle`	`?string`	Subtitle that will be displayed next to the title
`description`	`?string`	Shortcut description about the item

List Item Action

Action of the list item. it’s similar with the Action except it has additional properties.

interface CommandJSONViewListItemAction extends CommandJSONAction {
  defaultAction?: boolean;
}

Property	Type	Description
`defaultAction`	`?boolean`	Whether to perform the current action when the user selects the item
`...rest`	`CommandJSONAction`