Slapdash Platform
GitHub
  • Ahoy, world!
  • Command Bar 101
    • How it Works
    • Core Terminology
    • Commands
    • Local Commands
    • Cloud Commands
    • Build Your First Command
    • Publish Command
    • Hooks
  • Command Tutorials
    • Toggle Dark Mode
    • Emoji Paster
    • Copy Special Character
    • Send Slack Message
  • Reference
    • Command Response
    • Action
    • View
    • List View
    • Masonry View
    • Form View
    • Tokens
    • Icon
    • Config
Powered by GitBook
On this page
  • ListOption
  • Group
  • Option's Main Action
  • Option's Move Action
  1. Reference

List View

PreviousViewNextMasonry View

Last updated 3 years ago

The List View response tells the Command Bar to display a list of options.

  • type: "list"

  • options: An array of objects.

  • groups: Optional. An array of 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.

{
  "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.

  • subtitle: Optional. The subtitle for the option. Can be provided as a string or a list of strings.

{
  "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).

{
  "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

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;
    };
{
  "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

{
  "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"
        }
      }
    ]
  }
}

action: Option's . This Action is executed when Enter is pressed on the Option (or when the option is clicked).

moveAction: Optional. Option's object. This Action is executed when Tab is pressed on the Option.

icon: Optional. The for the option.

group: Optional. The this option belongs to.

The Main Action for an Option can be provided as the plain object or as a special object that allows to customize how the action is visualised by the Command Bar.

Property CommandResponse.view.options[].moveAction allows providing a to change the location of the Command Bar.

Icon
Action
ListOption
Group
Main Action
Move Action
Group
Move Action