Show a set of tile cards that the user can scroll horizontally or
vertically. Tiles are a great way to present rich data to the user and
optionally get button click responses.

Here is a basic example:

- tiles:
  - title: Super Nintendo Entertainment System
    description: 100,000 points
    image:
      url: https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/SNES-Mod1-Console-Set.jpg/800px-SNES-Mod1-Console-Set.jpg
    buttons:
      - text: Order
        result: nintendo
  - title: Sega Genesis
    description: 75,000 points
    image:
      url: https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Sega-Genesis-Mk2-6button.jpg/800px-Sega-Genesis-Mk2-6button.jpg
    buttons:
      - text: Order
        result: sega

Which produces the following in the Meya Orb Web SDK client:

The ask tiles component is also an interactive component which allows you to set
quick replies, configure the input composer
and set context data.

Here is a more advanced example:

- tiles:
    - image:
        url: https://cataas.com/cat/says/Tile%200
      title: Title 0
      rows:
        -   - cell: How
              value: harvesting
            - cell: A
              value: clouds
        -   - cell: Away
              value: far
            - cell: Harvesting
              value: ship
      buttons:
        - url: https://cataas.com/cat/says/Link%20button%203
          text: Link button 3
        - url: https://cataas.com/cat/says/Link%20button%204
          text: Link button 4
        - text: Button 5
          result: 5
        - text: Button 6
          result: 6
      description: |
        Circumnavigated how far away ship of the imagination star stuff
        harvesting **star light** great turbulent clouds a billion trillion
    - image:
        url: https://cataas.com/cat/says/Tile%201
      title: Title 1
      rows:
        -   - cell: Stuff
              value: trillion
            - cell: Light
              value: circumnavigated
        -   - cell: How
              value: of
            - cell: Harvesting
              value: billion
      buttons:
        - url: https://cataas.com/cat/says/Link%20button%207
          text: Link button 7
        - url: https://cataas.com/cat/says/Link%20button%208
          text: Link button 8
        - text: Button 9
          result: 9
        - text: Button 10
          result: 10
      description: |
        Circumnavigated how far away ship of the imagination star stuff
        harvesting **star light** great turbulent clouds a billion trillion
    - image:
        url: https://cataas.com/cat/says/Tile%202
      title: Title 2
      rows:
        -   - cell: Circumnavigated
              value: great
            - cell: Imagination
              value: ship
        -   - cell: Turbulent
              value: of
            - cell: Turbulent
              value: light
      buttons:
        - url: https://cataas.com/cat/says/Link%20button%2011
          text: Link button 11
          context: {}
        - url: https://cataas.com/cat/says/Link%20button%2012
          text: Link button 12
        - text: Button 13
          result: 13
        - text: Button 14
          result: 14
      description: |
        Circumnavigated how far away ship of the imagination star stuff
        harvesting **star light** great turbulent clouds a billion trillion

Which produces the following output:

Column layout

The tiles can also be displayed as a column of tiles instead of a row of
tiles.

Here is an example:

- layout: column
  tiles:
  - title: Super Nintendo Entertainment System
    description: 100,000 points
    image:
      url: https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/SNES-Mod1-Console-Set.jpg/800px-SNES-Mod1-Console-Set.jpg
    buttons:
      - text: Order
        result: nintendo
      - text: More into
  - title: Sega Genesis
    description: 75,000 points
    buttons:
      - text: Order
        result: sega
      - text: More into
  - title: Sony Playstation
    description: 200,000 points
    buttons:
      - text: Order
        result: sega
      - text: More into

Button tiles

The TileElementSpec also inherits from the
AbstractButtonElementSpec which means that each
file can also become a button in itself.

A tile will become a button when one of the AbstractButtonElementSpec fields
are set.

This can be useful if you would like the user to simply select the entire
tile instead of a button with in the tile. Here is an example of three tiles that behave as buttons:

- tiles:
  - title: Super Nintendo Entertainment System
    description: 100,000 points
    result: nintendo
  - title: Sega Genesis
    description: 75,000 points
    result: sega
  - title: Sony Playstation
    description: 200,000 points
    result: sony

These tile buttons can also be displayed as a set of radio buttons:

- button_style: radio
  tiles:
  - title: Super Nintendo Entertainment System
    description: 100,000 points
    result: nintendo
  - title: Sega Genesis
    description: 75,000 points
    result: sega
  - title: Sony Playstation
    description: 200,000 points
    result: sony

Element details

type: meya.tile.component.ask
class: TileAskComponent
path: /meya/tile/component/ask.py
signature: tiles

Fields

field	description	required	signature	default	type
spec	Override the original spec for this element.	○	○	null	Spec
context	Send context data with this component's event.	○	○	{}	dict
sensitive	Mark this component's event as sensitive. This will encrypt the event if the Sensitive Data integration has been enabled.	○	○	false	bool
triggers	Activate these dynamic triggers when the component runs. Check the component triggers guide for more info.	○	○	[]	list
quick_replies	List of buttons that the user can select for replies.	○	○	[]	list
composer	The composer spec that allows you to control the Orb's input composer. Check the Composer guide for more info.	○	○	focus: blur placeholder: collapse_placeholder: visibility: character_limit:	ComposerElementSpec
header	Override the header for this component.	○	○	buttons: title: progress: milestones: extra_buttons:	HeaderElementSpec
markdown	Override the bot Markdown mode for this component. Check the Markdown guide for more info.	○	○	null	list bool NoneType
ask	Question to send to the user.	○	○	null	str
tiles	The tile spec that allows you to control the how each tile shouldpresent data. Check the `TileElementSpec` Python class to see what each field does.	◉	◉		list
button_style	Define how the tile's buttons should work. It can be one of `action`, `radio`, or `text`. The default is `action`.	○	○	null	TileButtonStyle
layout	Define how the tiles should be rendered, either `column` or `row`. The default is `column`.	○	○	null	TileLayout

Usage reference

Basic

triggers:
  - keyword: meya.tile.component.ask
steps:
  - tiles:
      - value: ANY
        result: ANY

Full

triggers:
  - keyword: meya.tile.component.ask
steps:
  - spec:
      type: STRING
      data:
        STRING: ANY
      timeout: 123
      trigger_when: ANY
    context:
      STRING: ANY
    sensitive: false
    triggers:
      - type: STRING
        data:
          STRING: ANY
        timeout: 123
        trigger_when: ANY
    quick_replies:
      - url: STRING
        javascript: STRING
        button_id: STRING
        context:
          STRING: ANY
        default: false
        disabled: false
        divider: false
        icon:
          url: STRING
          color: STRING
          path: STRING
        action: COMPONENT
        value: ANY
        result: ANY
        data:
          STRING: ANY
        magic: false
        type: text|url|static|menu|divider|action|flow_next|component_next
        menu:
          - BUTTONELEMENTSPEC
        text: STRING
    composer:
      focus: file|image|text|blur
      placeholder: STRING
      collapse_placeholder: STRING
      visibility: collapse|hide|show
      character_limit:
        length: 123
        error_text: STRING
    header:
      buttons:
        - url: STRING
          javascript: STRING
          button_id: STRING
          context:
            STRING: ANY
          default: false
          disabled: false
          divider: false
          icon:
            url: STRING
            color: STRING
            path: STRING
          action: COMPONENT
          value: ANY
          result: ANY
          data:
            STRING: ANY
          magic: false
          type: text|url|static|menu|divider|action|flow_next|component_next
          menu:
            - BUTTONELEMENTSPEC
          text: STRING
      title:
        text: STRING
        icon:
          url: STRING
          color: STRING
          path: STRING
      progress:
        value: 123
        show_percent: false
      milestones:
        - text: STRING
          current: false
      extra_buttons:
        - url: STRING
          javascript: STRING
          button_id: STRING
          context:
            STRING: ANY
          default: false
          disabled: false
          divider: false
          icon:
            url: STRING
            color: STRING
            path: STRING
          action: COMPONENT
          value: ANY
          result: ANY
          data:
            STRING: ANY
          magic: false
          type: text|url|static|menu|divider|action|flow_next|component_next
          menu:
            - BUTTONELEMENTSPEC
          text: STRING
    markdown:
      - format|linkify|breaks|typographer
    ask: STRING
    tiles:
      - title: STRING
        description: STRING
        image:
          url: STRING
          alt: STRING
        rows:
          -   - cell: STRING
                value: ANY
        url: STRING
        javascript: STRING
        button_id: STRING
        context:
          STRING: ANY
        default: false
        disabled: false
        divider: false
        icon:
          url: STRING
          color: STRING
          path: STRING
        action: COMPONENT
        value: ANY
        result: ANY
        data:
          STRING: ANY
        magic: false
        type: text|url|static|menu|divider|action|flow_next|component_next
        menu:
          - url: STRING
            javascript: STRING
            button_id: STRING
            context:
              STRING: ANY
            default: false
            disabled: false
            divider: false
            icon:
              url: STRING
              color: STRING
              path: STRING
            action: COMPONENT
            value: ANY
            result: ANY
            data:
              STRING: ANY
            magic: false
            type: text|url|static|menu|divider|action|flow_next|component_next
            menu:
              - BUTTONELEMENTSPEC
            text: STRING
        buttons:
          - url: STRING
            javascript: STRING
            button_id: STRING
            context:
              STRING: ANY
            default: false
            disabled: false
            divider: false
            icon:
              url: STRING
              color: STRING
              path: STRING
            action: COMPONENT
            value: ANY
            result: ANY
            data:
              STRING: ANY
            magic: false
            type: text|url|static|menu|divider|action|flow_next|component_next
            menu:
              - BUTTONELEMENTSPEC
            text: STRING
    button_style: action|radio|text
    layout: column|row