In Adaptive Card, how can I ToggleVisibility when user submit?

Question

In Adaptive Card, it's easy to create a submit button:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Present a form and submit it back to the originator"
    },
    {
      "type": "Input.Text",
      "id": "firstName",
      "placeholder": "What is your first name?"
    },
    {
      "type": "Input.Text",
      "id": "lastName",
      "placeholder": "What is your last name?"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Action.Submit",
      "data": {
        "x": 13
      }
    }
  ]
}

Which look like this:

Is it possible to also use Toggle Visibility as defined here?

https://adaptivecardsci.z5.web.core.windows.net/pr/3261/explorer/Action.ToggleVisibility.html

So what I owuld like to achieve is when the user click the button, it will both submit the form and also make the form element invisible.

Hey Bill, that's sadly not gonna work. An action button can only be of one type and only do one thing at a time. Where do you show your card? MS Teams, Webchat? Maybe theres other options for you to achieve what you want. — Tim Cadenbach, Mar 03 '20 at 00:13
In MS Teams you have the option to update a card after you sent it. You could just send a blank card (or whatever you want it to look like) after the user clicked the button. — Tim Cadenbach, Mar 03 '20 at 21:12
@BillSoftwareEngineer - Are you sending the card from a bot? If so, what language is the bot written in? (Since there are multiple people in this thread, you will need to @ mention me if you want me to see your reply.) — Kyle Delaney, Mar 05 '20 at 03:01
@KyleDelaney I am sending the card from bot, using C#. The option to update the card only work in MS Team and doesn't work in Emulator. — Bill Software Engineer, Mar 05 '20 at 19:20
@BillSoftwareEngineer - Are you expecting your customers to interact with your bot in Emulator? Why are you concerned with what works in Emulator? — Kyle Delaney, Mar 05 '20 at 19:32
@KyleDelaney You are correct I am not, I can use it but I would of course prefer if I can also debug in emulator. — Bill Software Engineer, Mar 05 '20 at 19:36

score 1 · Accepted Answer · answered Mar 06 '20 at 01:11

Emulator does not support message updates or deletions, so you will not be able to test this functionality in Emulator. However, you can still debug your bot locally on a channel like Teams using a tunneling service like ngrok: https://blog.botframework.com/2017/10/19/debug-channel-locally-using-ngrok/

You can find examples of how to update an acitivity in the following answers:

You can see that it involves bot state. If you just want to delete the whole activity then your job may be easier because you won't need to save any information about the activities except for the activity ID. Your state accessor could look like this:

public IStatePropertyAccessor<Dictionary<string, string>> CardStateAccessor { get; internal set; }

And you can initialize it like this:

CardStateAccessor = _conversationState.CreateProperty<Dictionary<string, string>>("cardState");

Since your card is in JSON form, you may want to deserialize it before adding a unique card ID to the submit action:

var card = JObject.Parse(json);
var data = card.SelectToken("actions[0].data");
var cardId = Guid.NewGuid();

data[KEYCARDID] = cardId;

var cardActivity = MessageFactory.Attachment(new Attachment("application/vnd.microsoft.card.adaptive", content: card));
var response = await turnContext.SendActivityAsync(cardActivity, cancellationToken);
var dict = await CardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, string>(), cancellationToken);

dict[cardId] = response.Id;

Then you can delete the activity like this:

var value = JObject.FromObject(turnContext.Activity.Value);
var cardId = Convert.ToString(value[KEYCARDID]);
var dict = await CardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, string>(), cancellationToken);

if (dict.TryGetValue(cardId, out var activityId))
{
    await turnContext.DeleteActivityAsync(activityId, cancellationToken);

    dict.Remove(cardId);
}

If you would like this process to be made easier then you may voice your support for my cards library proposal: https://github.com/BotBuilderCommunity/botbuilder-community-dotnet/issues/137

In Adaptive Card, how can I ToggleVisibility when user submit?

1 Answers1