CODEWITHSUNDEEP
botframeworkbotsmicrosoft-teamsadaptive-cards
Moblize IT
Moblize IT

Reputation: 1328

Cancel button on microsoft adaptive cards for teams

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

Upvotes: 1

Views: 3412

Answers (5)

EsbenB
EsbenB

Reputation: 3406

another approach is to look for a cancel data object:

    new AdaptiveSubmitAction
    {
        Title = "Login",
        Style="positive",
        AssociatedInputs = AdaptiveAssociatedInputs.Auto,
        Id="ok",
    },
    new AdaptiveSubmitAction
    {
        Title = "Cancel",
        Style="negative",
        AssociatedInputs = AdaptiveAssociatedInputs.None,
        Data = CANCEL_VALUE,
        Id="cancel"
    }

You can then detect the cancel like:

    private async Task<DialogTurnResult> SignUserInStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
    {
        if (stepContext.Context.Activity.AsMessageActivity()?.Text == CANCEL_VALUE)
        {
            return new DialogTurnResult(DialogTurnStatus.Cancelled);
        }

NOTE:It's important to indicate that the cancel button is not associated with the rest of the card's fields, by setting AssociatedInputs = AdaptiveAssociatedInputs.None.

Upvotes: 0

Sandeepbhagoji
Sandeepbhagoji

Reputation: 11

  • From your code, the Cancel Button acts just like that of Submit. It's because the Submit button will be associated with all the fields and inputs that you are providing from your Bot and the same applies for Cancel as it is defaulted to all Inputs.

  • By adding the changes as that of below, once you hit the Cancel Button, you will come out of the form and navigate to whichever dialog/flow that follows.

     {
    "type": "Action.Submit",
    "title": "Cancel",
    "associatedInputs": "none"
 }

For more information please find this link: https://adaptivecards.io/explorer/Action.Submit.html.

I believe this might resolve the problem.

Upvotes: 1

Gousia Begum
Gousia Begum

Reputation: 2124

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.

Upvotes: 1

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22419

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.

Upvotes: 4

Hilton Giesenow
Hilton Giesenow

Reputation: 10804

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))

Upvotes: 1

Related Questions