Search code examples
azurebotframeworkazure-bot-serviceadaptive-cards

How to use Adaptive Cards on Teams Messaging Extension with thumbnail card preview?


I want to send a card to a teams channel using messaging extension. On messaging extension i need to show a preview thumbnail card and onclick of that thumbnail a adaptive card will be displayed.

I have tried the below code and while trying to use "MessagingExtensionResult" its giving error. Also i'm unable to add the dll for "MessagingExtensionResult" its giving incompatible version error. I'm using .Net framework 4.6.

 var results = new ComposeExtensionResult()
                {
                    AttachmentLayout = "list",
                    Type = "result",
                    Attachments = new List<ComposeExtensionAttachment>(),
                };

   var card = CardHelper.CreateCardForExperties(pos, true);
   var composeExtensionAttachment = card.ToAttachment().ToComposeExtensionAttachment();
results.Attachments.Add(new ComposeExtensionAttachment
                        {
                            ContentType = "application/vnd.microsoft.teams.card.adaptive",
                            Content = JsonConvert.DeserializeObject(updatedJsonString),
                            Preview = composeExtensionAttachment
                        });

Solution

  • Using below code we can invoke adaptive card from thumbnail card preview.

    ComposeExtensionResponse response = null;

     1.  var results = new ComposeExtensionResult()
                {
                    AttachmentLayout = "list",
                    Type = "result",
                    Attachments = new List<ComposeExtensionAttachment>(),
                };
    
    1. Create a function that returns thumbnail card (preview card)

      var previewThumbnailCard = CreateThumbnailCard();

    2. Create a function that returns Adaptive card in form of attachment. var adaptivecardattachment = CreateAdaptiveCardAsAttachment();

    3. Cast that attachment card to composeextensionattachment and pass thumbnail card to it as attachment. var composeExtensionAttachmentAdaptive = adaptivecardattachment .ToComposeExtensionAttachment(previewThumbnailCard.ToAttachment());

      1. Return the response
                    {
                        ComposeExtension = results
                    };
        return response;