Action Buttons

Those are the buttons in the Adaptive Cards

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.

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

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

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

env.get("FLOW_URL") - This enviorment contains link to your flow instance (e.g. https://instance-name.tekos.co)

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.

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

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

payload of function node connected to the http response node

We can define which card will be displayed based on need.

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.

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