Cancel button on microsoft adaptive cards for teams - botframework

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:
You -could- implement a "cancel" button as a submit action, which you could detect in the bot, and reply with an appropriate message
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.

Answer 4

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.

Answer 5

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.