---
description: Leopard can show buttons and per line option lists in the Chat response.
---

# Buttons and Lists

## Introduction

Buttons that present options to the user are typically only shown for the current turn in conversation for which they were meant to be shown. Once the user clicks a button or moves the conversation forward through text or voice, the button options in the response are removed from the UI.

{% hint style="info" %}
Under certain scenarios you can make some buttons or options remain permanently - regardless of the turn of conversation.&#x20;
{% endhint %}

## Buttons

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-M7TulMLqsDc0f4-AL7m%2F-M7Tuphw-yv6RNypKKh-%2Fleopard-16.png?alt=media&#x26;token=f869a8a4-54f5-4898-9c94-820c9076bdec" alt=""></div>

### Output Parameter

```groovy
extensions = ${ExtensionHelper.displayClickableList(yesNoMaybeOptions,channel)}
```

If you wanted the **buttons to persist and remain active** for any reason then specify this output parameter:

```groovy
extensions = ${ExtensionHelper.displayPermanentClickableList(yesNoMaybeOptions, channel)}
```

If you wanted the **buttons to persist and automatically disable after the conversation moves on.**&#x20;

```groovy
extensions = ${ExtensionHelper.displayPermanentDisabledClickableList(yesNoMaybeOptions, channel)}
```



Where `yesNoMaybeOptions` is a groovy map stored either as a flow or global variable

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No"],
                            ["name": "Maybe"]
                        ]]
```

{% hint style="info" %}
You can configure the map such that some custom request parameters are sent back to Teneo when a specific button is clicked. This might be useful for metadata reporting in Teneo Data or you might just want to trigger a flow based on the existence of a certain request parameter.&#x20;
{% endhint %}

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No"],
                            ["name": "Maybe", "params": "paramname=this-will-be-sent-back-in-url-when-maybe-option-clicked-optional"]
                        ]]
```

### JSON

```javascript
{
  "name"           : "displayCollection",
  "hasLongOptions" : false,
  "permanent"      : false,
  "parameters"     : {
    "content" : {
      "title" : "Please confirm",
      "items" : [
        { "name":"Yes" },
        { "name":"No" }
      ]
    }
  }
}
```

## Buttons with Icons

As before you can display buttons but you can optionally define custom icons shown in the buttons and you can optionally control what is sent back to Teneo as user input text. Therefore the button says one thing but the text that is sent back after a click could be something different.

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-M3IQe1qsOEJIZmmXtcv%2F-M3IR_4GblqCVgl4Z_F3%2Fbutton-icons.png?alt=media&#x26;token=33ce27eb-759c-42a3-905f-fa4c92b0441a" alt=""></div>

### Variable

```java
def buttonIconOptions = 

["title": "Some UI Elements",
    "items": [
     ["name": "Form Button Text", "text": "This is sent as user input", "icon": "book-information-variant"],
		 ["name": "Map Button Text", "text": "Where are you located", "icon": "google-maps"],
		 ["name": "Youtube Button Text", "text": "Tell me about your company", "icon": "youtube"],
    ]
]
```

### Output Parameter

```groovy
extensions = ${ExtensionHelper.displayClickableList(buttonIconOptions, channel)}
```

If you wanted the **buttons to persist** for any reason then specify this output parameter:

```groovy
extensions = ${ExtensionHelper.displayPermanentClickableList(buttonIconOptions, channel)
```

### JSON

```javascript
{
  "name"           : "displayCollection",
  "hasLongOptions" : false,
  "permanent"      : false,
  "parameters"     : {
    "content" : {
      "title" : "Please confirm",
      "items" : [
        { "name":"Yes" },
        { "name":"No" }
      ]
    }
  }
}
```

## Buttons with Colors

The default color for buttons comes from the success theme color configured for the solution. If you want to change the color of a specific button you can define a `color` property in the json.

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No", "color": "#FF4C5B"],
                            ["name": "Maybe", "params": "paramname=this-will-be-sent-back-in-url-when-maybe-option-clicked-optional"]
                        ]]
```

## Line Based Options

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-M7TulMLqsDc0f4-AL7m%2F-M7TuvfemWbsVmL4kpOO%2Fleopard-05.png?alt=media&#x26;token=aa2b6db7-df2b-45bd-b1b8-6546a91c8b47" alt=""></div>

### Output Parameter



```groovy
extensions = ${ExtensionHelper.displayClickableList(yesNoMaybeOptions,channel, true)}
```

If you wanted the **buttons to persist and remain active** for any reason then specify this output parameter:

```groovy
extensions = ${ExtensionHelper.displayPermanentClickableList(yesNoMaybeOptions, channel, true)}
```

If you wanted the **buttons to persist and automatically disable after the conversation moves on.**&#x20;

```groovy
extensions = ${ExtensionHelper.displayPermanentDisabledClickableList(yesNoMaybeOptions, channel, true)}
```

Where `yesNoMaybeOptions` is a groovy map stored either as a flow or global variable

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No"],
                            ["name": "Maybe"]
                        ]]
```

{% hint style="info" %}
You can configure the map such that some custom request parameters are sent back to Teneo when a specific button is clicked. This might be useful for metadata reporting in Teneo Data or you might just want to trigger a flow based on the existence of a certain request parameter.&#x20;
{% endhint %}

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No"],
                            ["name": "Maybe", "params": "paramname=this-will-be-sent-back-in-url-when-maybe-option-clicked-optional"]
                        ]]
```

### JSON

```javascript
{
  "name"           : "displayCollection",
  "hasLongOptions" : true,
  "permanent"      : false,
  "parameters"     : {
    "content" : {
      "title" : "Please confirm",
      "items" : [
        { "name":"Yes" },
        { "name":"No" }
      ]
    }
  }
}
```



## Line Based Options - Background Color

If you want to change the background color of all the line based option then you can define a `color` property in the json.

```groovy
def yesNoMaybeOptions = ["title": "Please confirm",
                        "color": "#C9C3FF",
                        "items": [
                            ["name": "Yes"],
                            ["name": "No", "color": "#FF4C5B"],
                            ["name": "Maybe", "params": "paramname=this-will-be-sent-back-in-url-when-maybe-option-clicked-optional"]
                        ]]
```

## Quick Button Format

If you just want to quickly produce some buttons then it might be easier to call `simpleDisplayClickableList`&#x20;

### Output Parameter

```groovy
extensions = ${ExtensionHelper.simpleDisplayClickableList(
        "Please Choose; Yes; No; Maybe", "webview")}
```
