Warm tip: This article is reproduced from stackoverflow.com, please click
adaptive-cards botframework bots microsoft-teams

Cancel button on microsoft adaptive cards for teams

发布于 2020-04-13 09:56:01

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"
}
Questioner
Moblize IT
Viewed
82
Md Farid Uddin Kiron 2020-02-03 16:28

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:

enter image description here

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