# Action Buttons

Adaptive Cards recognize four default actions.

* Action.OpenUrl
* Action.ShowCard
* Action.Submit
* Action.ToggleVisibility

We are going to Overview only 3 actions and variation of **Action.Submit** that we have extended with a **response\_action** option.

## **Action.ShowCard** 

This action allows us to extend ACard content with new elements that are hidden by default.

```javascript
{
    "type": "ActionSet",
    "actions": [
        {
    "type": "Action.ShowCard",
     "title": "Show card",
    "card": {
        "type": "AdaptiveCard",
        "body": [
            {
                "type": "Input.Date",
                "id": "dueDate"
            },
            {
                "type": "Input.Text",
                "id": "comment",
                "placeholder": "Add a comment",
                "isMultiline": true
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Submit payload to endpoint",
                "data": {
                    "url": "https://hg1dxk.tekos.co/message/acard/endpoint"
                }
            }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
    }
}
    ]
}

```

## **Action.OpenUrl**

As you might already suspect what it does. I think we don't need to write on this topic**.**

```javascript
{
 "type": "Action.OpenUrl",
 "title": "Open URL",
 "url": "https://adaptivecards.io" //Opens page from url in new tab
 },
```

## **Action.Submit - HTTP Request**

As action open url was a really easy topic, with action submit we have much more possibilities that we can use. \
\
Most important action of submit is that it sends an http request to the defined url. That’s how we can use adaptive cards as an interactive menu or form.

```javascript
{
    "type": "Action.Submit",
    "title": "Submit Form",
    "data": {
        "url": env.get("FLOW_URL")+ "/message/acard/new",
    }
},
```

{% hint style="info" %}
env.get("FLOW\_URL") - This enviorment contains link to your flow instance (e.g. <https://instance-name.tekos.co>)
{% endhint %}

This example action can be received by the flow **HTTP IN** node with method set as **POST** and URL set as “**/message/acard/new**”

And in the payload we will find all objects of elements in the card containing ID. If we are going to create some type of Input.Text we need to add a unique Id to it so the flow can then catch it’s value on action submit. Then you can do whatever you want with those values. Remember to hook up **HTTP RESPONSE** node with status code.

### **Submit - Response action: modal**

Response action modal is used to display popup with adaptive card over the chat.\
With action submit clicked the payload is sent to the defined endpoint, but if there is also a response action in the action data we can display a new adaptive card over the interface.&#x20;

To get this working you need to add additional variable to the data in the action.submit

```javascript
{
    "type": "Action.Submit",
    "title": "Open Modal",
    "data": {
        "url": env.get("FLOW_URL") +"/message/acard/new",
        "response_action":"modal" 
    }
},
```

And to display a new adaptive card over the interface you need to hook up the endpoint catcher (http in) to the function or payload node containing the adaptive card code. But in this case we are not sending  the card to the room so we don’t need any msg.url or msgtype to be included into the function<br>

![payload of function node connected to the http response node](https://lh6.googleusercontent.com/Yl5YXzyDJX4MtJvs9kZhXeehZq-yn8CzzMm95Y4gHKq4I6g_BExiRtvCWXdBe3C1cUEsftZ4ojbcnMA1PlKNE6r6k8nzhpvfHuCCJ8XbhrLc3G2EyuPq4jmAJl9REcC-erV0UrSW)

{% hint style="info" %}
We can define which card will be displayed based on need.
{% endhint %}

![](https://lh4.googleusercontent.com/uoymKo6ylDplqSJmI1epRaloBYdZTBpm5NnFwW7cx7uj0Ym6sWPjxYESdst7Z4gJ6gFQfsPe2v2PUbpXtQ_tqQgeen4Nu7g93X2jLEUJAFgb9NF9dlR4FmSAv-Fg5oOACBHCvqyc)

As you can see this is the content of the woocommerce app, that displays different modal depending on the search result.

### **Submit - Response action: new view**

Last one is very similar to the previous example. Action.Submit with "response\_action": "new view". Only difference between this use case is that you change the current ACard content with a new one, but also sends payload to an endpoint. (useful for multi step form).

Instead of displaying a popup modal with acard you can temporarily change the content of the adaptive card posted in the room.

```javascript
{
     "type": "Action.Submit",
     "title": "Change View",
     "data":{
         "url": env.get("FLOW_URL") +"/message/acard/new",
         "response_action":"new_view" 
     }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tekos.gitbook.io/doc/building-apps-1/chat-surfaces/modals-adaptive-cards/action-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.