Search code examples
c#jsonbotframeworkmicrosoft-teamsadaptive-cards

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

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:

enter image description here

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.

Solution

  • 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