Before starting this tutorial.

You should already know how to create an ACard and how to view them using the shortcuts.


IMG: Full flow example with ACards Actions.


Adaptive Cards recognize 4 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



Let's start with the Action.ShowCard It allows to extend ACard content.

"actions": [
        {
            "type": "Action.ShowCard", //Allow to extend ACard content
             "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"
            }
        },
        

As you can see bellow in the default card we have displayed a new content with Action.Submit button that sends the form payload to the endpoint. In this case to the flow "/message/acard/endpoint" and display the result in the chat inbox.








Next we have Action.OpenUrl That opens new page from url in new tab

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










Action.Submit with "response_action": "modal".  It Displays the ACard, also sends payload to an endpoint. Remember that you need to have "Http in" node with that accepts the POST request to dispaly the ACard. In this case "/message/acard/new"


{
            "type": "Action.Submit",
            "title": "Open Modal",
            "data": {
                "url": "https://hg1dxk.tekos.co/message/acard/new",
                "response_action":"modal" 
            }
        },












Last one is very similar to previous example. Action.Submit with "response_action": "new view". Only diffrence between this use case is that you change the current ACard content with a new one,but also sends payload to and endpoint. (usefull for multistep form).


{
             "type": "Action.Submit",
             "title": "Change View",
             "data":{
                 "url":"https://hg1dxk.tekos.co/message/acard/new",
                 "response_action":"new_view" 
             }
        }


 







Next step

Follow to the tutorial with full tekos bot framework with shortcuts.