bot-lab-2.md

Microsoft Teams - Bot Training

Lab 2 - Adaptive Cards

Adaptive Cards are an open framework for card-based UI that are designed to work cross platforms. Adaptive Cards are a great fit for Bots. They let you author cards and let it render beautifully inside of most the bot channels like for example in Microsoft Teams or Skype.

Because it is a good bot design principle that Bots introduce themselves and tell the users how they can help we will wcreate a Welcome Card in this lab.

• Setup the bot like described in Lab 1
• Install the AdaptiveCard Library

dotnet add package AdaptiveCards
dotnet restore

• Open the App Studio Teams App again and navigate to the Card Editor. The editor allows you to create and preview cards and to send you the cards as chat message.
• However in our lab we are going to use the Adaptive Card Designer (https://adaptivecards.io/designer/). This designer has a much richer experience. Play around with the designer and create your own welcome card.

• Optional: When you are done you can test the card in App Studio and send it to you as a test message.
• Now we add the card to the Bot project. Create a new folder named Cards and the create new file with name "WelcomeCard.json" there. Then copy & paste your JSON from the designer or the JSON snippet bellow into the file and save

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",
            "url": "https://raw.githubusercontent.com/ltwlf/microsoft-teams-training/master/docs/images/Microsoft365-bootcamp-2019-zurich.png",
            "size": "stretch"
        },
        {
            "type": "TextBlock",
            "spacing": "Medium",
            "weight": "Bolder",
            "text": "Welcome to Bot Framework!",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Now that you have successfully run your bot, follow the links in this Adaptive Card to expand your knowledge of Bot Framework.",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Get an overview",
            "url": "https://docs.microsoft.com/en-us/azure/bot-service/?view=azure-bot-service-4.0"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Ask a question",
            "url": "https://stackoverflow.com/questions/tagged/botframework"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Learn how to deploy",
            "url": "https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-howto-deploy-azure?view=azure-bot-service-4.0"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

• Open EchBot.cs and import the following namespaces

using AdaptiveCards;
using System.IO;
using System.Linq;

• Add the following method to the EchBot class

public async Task SendWelcomeCard(ITurnContext turnContext)
{
    var card = File.ReadAllText(@".\Cards\WelcomeCard.json");
    var parsedResult = AdaptiveCard.FromJson(card);
    var attachment = new Attachment
    {
        ContentType = AdaptiveCard.ContentType,
        Content = parsedResult.Card
    };

    var activity = turnContext.Activity.CreateReply();
    activity.Attachments.Add(attachment);

    await turnContext.SendActivityAsync(activity);
}

• Replace OnMembersAddedAsync with the following code snippet:

protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
{
    if (turnContext.Activity.MembersAdded.Any(m => m.Name != "Bot"))
    {
        await SendWelcomeCard(turnContext);
    }
}

• Start the debuger again and test the Bot in the emulator and in Teams. The Bot will now send the welcome card whenever a user joins a conversation.

There is much more to learn about Bot Framework. Especially the Dialog Framework and LUIS are quite important for great Bots.

Checkout the Basic Bot example / template to see the Dialog Framework and LUIS in action.

Official documentation https://docs.microsoft.com/de-de/azure/bot-service/