Cancel button on microsoft adaptive cards for teams

Question

I am using the ms adaptive cards for teams using nodejs. I can see actions has button of type Action.Submit to pass form data. However, I want to understand how to handle cancel case.

Is there a way to simply close the form on clicking cancel button or I have to let it behave like save button and return nothing from server side when the cancel button is pressed.

my card is like below

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "{title}"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "style": "Person",
                            "url": "{creator.profileImage}",
                            "size": "Small"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "Bolder",
                            "text": "{creator.name}",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Created {{DATE({createdUtc},SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ],
                    "width": "stretch"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "Set due date",
            "card": {
                "type": "AdaptiveCard",
                "body": [

                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "placeholder": "Add a comment",
                        "isMultiline": true
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    },
                     {
                        "type": "Action.Submit",
                        "title": "Cancel"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

Answer 1

There is no exact defined way to handle Cancel functionality.

You have to manage it code behind additionally, Yes you are right like Save Action you also have to set functionality for Cancel

For example what I did is when my user choose sorry, not now (Think like Cancel) I took that response and under a Switch-Case reply as required.

//Check Each User Input
 switch (checkUserInput.ToLower())
                        {
       case "sorry, not now":
                                await turnContext.SendActivityAsync(MessageFactory.Text("Okay, Can I help with anything else?"), cancellationToken);
                                //Send Another Yes/No Card
                                var yesNoFlow = _customFlowRepository.YesNoFlow();
                                await turnContext.SendActivityAsync(yesNoFlow).ConfigureAwait(false);
                                break;
      default: //When nothing found in user intent
                                await turnContext.SendActivityAsync(MessageFactory.Text("What are you looking for?"), cancellationToken);
                                break;

                        }

You could have a look the screen shot below:

Hope this would help you to figure out your issue. Let me know if you have any more concern.

Answer 2

There's no way to "Cancel" a card per se, to make it go away - if the user doesn't want to continue, they can simply stop interacting with the card. However, here are some possible alternatives:

1. You -could- implement a "cancel" button as a submit action, which you could detect in the bot, and reply with an appropriate message
2. You could look at consider the "ShowCard" action? It basically lets you collapse part of your card, and only open it when a user clicks on a button. That way you could possibly group your card into sections and show each one at a time. See here for more.

Another option in future is the new ToggleVisibility action in AdaptiveCards 1.2, but it's only if your client supports 1.2. (e.g. it's only available in Developer Preview for Teams right now (so very likely/hopefully coming in future, but not available at the moment))

Answer 3

There is nothing such as a cancel button in Adaptive Cards. If you want to close the card/not show the card anymore you could try updating that card with another new card that you would like to show.