> For the complete documentation index, see [llms.txt](https://platform.slapdash.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://platform.slapdash.com/reference/command-response-view-list.md).

# List View

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

* **type:** `"list"`
* **options:** An array of [ListOption](#listoption) objects.
* **groups:** Optional. An array of [Group](#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.

{% tabs %}
{% tab title="Options to open, copy, paste a URL or show it in a toast" %}

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

{% endtab %}

{% tab title="Grouped options" %}

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

{% endtab %}
{% endtabs %}

## 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](#options-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](#options-move-action) object. This Action is executed when Tab is pressed on the Option.
* **icon**: Optional. The [Icon](/reference/command-response-icon.md) 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](#group) this option belongs to.

{% tabs %}
{% tab title="List View: options with a custom icon and subtitle" %}

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

{% endtab %}
{% endtabs %}

## 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).

{% tabs %}
{% tab title="List View: custom order for groups" %}

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

{% endtab %}

{% tab title="List View: custom title for a group" %}

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

{% endtab %}
{% endtabs %}

## Option's Main Action

The Main Action for an Option can be provided as the plain [Action](/reference/command-response-action.md) object or as a special object that allows to customize how the action is visualised by the Command Bar.

```typescript
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;
    };
```

{% tabs %}
{% tab title="List View: custom affordances for the option" %}

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

{% endtab %}

{% tab title="List View: default affordances for the option" %}

```typescript
{
  "view": {
    "type": "list",
    "options": [
      {
        "title": "Open Google",
        "action": {
          "type": "open-url",
          "url": "https://www.google.com/"
        }
      }
    ]
  }
}
```

{% endtab %}
{% endtabs %}

## Option's Move Action

Property `CommandResponse.view.options[].moveAction` allows providing a [Move Action](/reference/command-response-action.md#actionmoveaddparam) to change the location of the Command Bar.

{% tabs %}
{% tab title="Masonry View: option with " %}

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

{% endtab %}
{% endtabs %}