How can I turn my bot into a MS Teams app

Question

I made a normal bot by using Microsoft Bot Framework and has deployed it to the Azure portal.

How can I possibly make it a Teams app other than channeling to Teams, for example, make it a Teams app package. I checked some sample code on Github and noticed that general bots are a bit different from Teams bots, for example, general bots extend ActivityHandler but Teams bots extend TeamsActivityHandler. May I ask how can I turn my bot into a Teams app? Do I need to alter the code of the bot I made a lot?

Thanks

billoverton billoverton · Accepted Answer · 2021-02-23T13:52:10

With a few exceptions, you don't really need to make changes to your bot code to deploy to Teams channel. However, I do think there are a few things you should be aware of and consider in your development. First of all, I'm going to assume you have or know how to turn on the channel from the Bot Service. Once you have done that, you can test your bot in Teams without even creating a Teams app by pasting the Microsoft App ID into the chat To: field (obviously it's not recommended to share this ID for general testing).

The main change you probably need is to remove mentions. These will mess with QnA Maker and/or LUIS as they are included in the query string. I have been doing this as the first step in the onMessage handler. My current bots use regex for this, e.g.

if (context._activity.text) ( // Make sure there is activity text before trying to replace
    context._activity.text = context._activity.text.replace(/(@|<at>)((Bot Name)|(Teams App Manifest Name))(<\/at>)? ?/g, '');
}

However, I have also seen that the TurnContext object can do this via TurnContext.removeRecipientMention(context.activity); I've not actually tried that myself, though. If it works it would be very helpful in case you find yourself changing bot names as I have done in the past...

The other main change I made to my bots was creating Teams-specific adaptive cards with menu buttons. By default, Action.Submit will work for web channels but NOT Teams channel. A typical action would look like

{
    "type": "ActionSet",
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Get Order Status",
            "data": "Get Order Status"
        }
    ]
}

But Teams can't handle this and will error out on button click (at least when using standard Activity handler, not sure if it is the same if using TeamsActivityHandler.) Instead, you should check the channel before displaying cards with Action.Submit actions and display an alternative card instead. For example

if (context.activity.channelId == 'msteams') {
    var welcomeCard = CardHelper.GetMenuCardTeams(welcomeMessage,'Y','Y');
} else {
    var welcomeCard = CardHelper.GetMenuCard(welcomeMessage,'Y','Y');
}

And then your actions for Teams instead look like

{
    "type": "ActionSet",
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Get Order Status",
            "data": {
                "msteams": {
                    "type": "imBack",
                    "value": "Get Order Status"
                }
            }
        }
    ]
}

I've tried combining these and it doesn't work well. You can add something to your handler to make Teams cards work in web, but the text will not be inserted into the chat like a typical button and it will instead be essentially like a backchannel event. I like this method much better.

Other than that you should be able to run your bot as-is, except for attachments as noted in your separate question. I have not gotten that to work and I believe it may be related to not using TeamsActivityHandler but I'm not sure.

Hopefully this helps. Go ahead and give it a try and you can create a new issue with any specific problems you face once the bot is operating in Teams.

How can I turn my bot into a MS Teams app

1 Answers