Search code examples
node.jsbotframeworkmicrosoft-teamsadaptive-cards

Adaptive cards are not rendering on Bot Emulator v4.14.1


I have created a new Bot using VS code's Teams Toolkit extension, when I run the code in Bot Emulator for local testing, the cards are not visible. Even if I run the default code, the cards are not rendered. How do I resolve this and test the bot locally?

teamsBot.js

let txt = context.activity.text;
      const removedMentionText = TurnContext.removeRecipientMention(context.activity);
      if (removedMentionText) {
        // Remove the line break
        txt = removedMentionText.toLowerCase().replace(/\n|\r/g, "").trim();
      }

      // Trigger command by IM text
      switch (txt) {
        case "welcome": {
          const card = cardTools.AdaptiveCards.declareWithoutData(rawWelcomeCard).render();
          await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)] });
          break;
        }
        case "learn": {
          this.likeCountObj.likeCount = 0;
          const card = cardTools.AdaptiveCards.declare(rawLearnCard).render(this.likeCountObj);
          await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)] });
          break;
        }
        /**
         * case "yourCommand": {
         *   await context.sendActivity(`Add your response here!`);
         *   break;
         * }
         */
      }

learn.json

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Learn Adaptive Card and Commands"
    },
    {
      "type": "TextBlock",
      "text": "Now you have triggered a command that sends this card! Go to documentations to learn more about Adaptive Card and Commands in Teams Bot. Click on \"I like this\" below if you think this is helpful.",
      "wrap": true
    },
    {
      "type": "FactSet",
      "facts": [
        {
          "title": "Like Count:",
          "value": "${likeCount}"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Execute",
      "title": "I Like This!",
      "verb": "userlike",
      "fallback": "Action.Submit"
    },
    {
      "type": "Action.OpenUrl",
      "title": "Adaptive Card Docs",
      "url": "https://learn.microsoft.com/en-us/adaptive-cards/"
    },
    {
      "type": "Action.OpenUrl",
      "title": "Bot Command Docs",
      "url": "https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-commands-menu?tabs=desktop%2Cdotnet"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4"
}

Adaptive card preivew in VS code

Bot Emulator Output:

Adaptive card in Bot Emulator


Solution

  • Bot framework is supported Adaptive card version 1.3

    Change version 1.4 to 1.3

     "version": "1.3"
    

    enter image description here