Comment on page
List View

The List View response tells the Command Bar to display a list of options.
type: "list"
options: An array of ListOption objects.
groups: Optional. An array of Group objects (or strings). Can be used to define the order in which they appear and customize how they are displayed.
ranking: Optional. The default value is true, i.e the Command Bar's default ranking will be used. If you wish to return different options as the user types in the Command Bar, set ranking to false. Then Slapdash will run your command with a special parameter keywords that you can use to decide what options to return back.
Options to open, copy, paste a URL or show it in a toast
Grouped options
{
  "view": {
    "type": "list",
    "options": [
      {
        "title": "Open Google",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      },
      {
        "title": "Copy Google URL",
        "action": {
          "type": "copy",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Paste Google URL",
        "action": {
          "type": "paste",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Show Google URL",
        "action": {
          "type": "show-toast",
          "message": "https://www.google.com/"
        }
      }
    ]
  }
}
{
  "view": {
    "type": "list",
    "groups": ["Clipboard", "Browser", "Misc"],
    "options": [
      {
        "title": "Open Google",
        "group": "Browser",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      },
      {
        "title": "Copy Google URL",
        "group": "Clipboard",
        "action": {
          "type": "copy",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Paste Google URL",
        "group": "Clipboard",
        "action": {
          "type": "paste",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Show Google URL",
        "group": "Misc",
        "action": {
          "type": "show-toast",
          "message": "https://www.google.com/"
        }
      }
    ]
  }
}
ListOption
Property CommandResponse.view.options is the list of options that are displayed in the List View.
title: The title for the option.
action: Option's Main Action. This Action is executed when Enter is pressed on the Option (or when the option is clicked).
moveAction: Optional. Option's Move Action object. This Action is executed when Tab is pressed on the Option.
icon: Optional. The Icon for the option.
subtitle: Optional. The subtitle for the option. Can be provided as a string or a list of strings.
group: Optional. The Group this option belongs to.
List View: options with a custom icon and subtitle
{
  "view": {
    "type": "list",
    "options": [
      {
        "title": "Copy Home Number",
        "subtitle": [
          "Mobile",
          "Emergencies"
        ],
        "group": "Phone Numbers",
        "icon": "🏠",
        "action": {
          "type": "copy",
          "value": "+44123456789"
        }
      },
      {
        "title": "Copy Work Number",
        "subtitle": [
          "Stationary",
          "9-5"
        ],
        "group": "Phone Numbers",
        "icon": "💼",
        "action": {
          "type": "copy",
          "value": "+44987654321"
        }
      }
    ]
  }
}
Group
Property CommandResponse.view.groups allows to display options in the List View in groups. Each Group can be a string or an object. Provide Group as an object if you want to customize its appearance (e.g. change its title).
List View: custom order for groups
List View: custom title for a group
{
  "view": {
    "type": "list",
    "groups": [
      "misc",
      "browser",
      "clipboard"
    ],
    "options": [
      {
        "title": "Open Google",
        "group": "browser",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      },
      {
        "title": "Copy Google URL",
        "group": "clipboard",
        "action": {
          "type": "copy",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Paste Google URL",
        "group": "clipboard",
        "action": {
          "type": "paste",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Show Google URL",
        "group": "misc",
        "action": {
          "type": "show-toast",
          "message": "https://www.google.com/"
        }
      }
    ]
  }
}
{
  "view": {
    "type": "list",
    "groups": [
      {
        "id": "misc",
        "title": "Miscellaneous"
      },
      "browser",
      "clipboard"
    ],
    "options": [
      {
        "title": "Open Google",
        "group": "browser",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      },
      {
        "title": "Copy Google URL",
        "group": "clipboard",
        "action": {
          "type": "copy",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Paste Google URL",
        "group": "clipboard",
        "action": {
          "type": "paste",
          "value": "https://www.google.com/"
        }
      },
      {
        "title": "Show Google URL",
        "group": "misc",
        "action": {
          "type": "show-toast",
          "message": "https://www.google.com/"
        }
      }
    ]
  }
}
Option's Main Action
The Main Action for an Option can be provided as the plain Action object or as a special object that allows to customize how the action is visualised by the Command Bar.
type OptionMainAction =
  | Action
  | {
      /** The default Action object. */
      action: Action;
      /** The label for this action. By default it will be inferred
       * from the action property. */
      label?: string;
      /** The tooltip for this action. By default it will be inferred
       * from the action property. */
      tooltip?: string;
      /** The icon for this action. Either an emoji or an Image URL.
       * By default it will be inferred from the action property. */
      icon?: Icon;
    };
List View: custom affordances for the option
List View: default affordances for the option
{
  "view": {
    "type": "list",
    "options": [
      {
        "title": "Open Google",
        "action": {
          "label": "Open Browser",
          "icon": "🌎",
          "tooltip": "Open Google in the Browser",
          "action": {
            "type": "open-url",
            "url": "https://www.google.com/"
          }
        }
      }
    ]
  }
}
{
  "view": {
    "type": "list",
    "options": [
      {
        "title": "Open Google",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      }
    ]
  }
}
Option's Move Action
Property CommandResponse.view.options[].moveAction allows providing a Move Action to change the location of the Command Bar.
Masonry View: option with 
{
  "view": {
    "type": "masonry",
    "options": [
      {
        "imageURL": "https://images.unsplash.com/photo-1481819613568-3701cbc70156",
        "action": {
          "type": "open-url",
          "url": "https://images.unsplash.com/photo-1481819613568-3701cbc70156"
        },
        "moveAction": {
          "type": "add-param",
          "name": "image",
          "value": "moon"
        }
      }
    ]
  }
}
Reference - Previous
View
Next - Reference
Masonry View
Last modified 1yr ago