This is a series of blog posts that will walk through the following:
- Part 1 – Getting your tenant ready
- Part 2 – Building a basic Q&A Bot for Microsoft Teams
- Part 3 – Sideload the Bot and add tabs – You are Here !
These posts are based on the Preview Microsoft Teams Developer Platform.
Create a manifest for the bot
The first key part of a manifest is the main mainfest.json file. The elements of this are shown below:
The majority of these elements are quite straight forward hence I won’t detail each one, if you would like more detail please view the manifest specification.
Some quick tips
- Make sure you add the schema at the start as most code editors will them give you IntelliSense or similar assistance.
- If you have forgotten your app ID you can look it up at https://dev.botframework.com/bots
- Make sure the file name is all lowercase Manifest.json will not work.
- There is no validation on the Url’s but given how fast things can go from dev to production it is worth making sure they are set to something decent at the start
- The urls should also be https given teams is https.
As we have no tabs in our package yet , we don’t need to add anything else just zip the mainifest.json up into a zip file with any name you like.
To side load it click on teams and the … next to the team that you want to use it in. From the menu displayed click view team.
From the tabbed area displayed select bots. Way down the bottom of the screen you will see the option to sideload a bot. Select that and upload the zip.
The bot will now be shown as in the image above with (Sideloaded) next it. This same screen can be used to delete the bot as well.
You can now have a conversation in the channel by using the @ and the name of your bot. Not however a sideloaded bot does not appear in the add a bot menu of the conversation.
Add a pinned tab
A pinned tab appears next to the conversation element of the bot. The T-Bot is a good example of this , you will see it has a number of pinned tabs such as Help and FAQ.
To add some pinned tabs all we need to do is edit our manifest to point to tabs on a website. In order for it to be shown as a pinned tab , other than https and to render nicely in the area provided there are not any other specific requirements.
All we need to do is add the pinnedTabs element in the format shownbelow beneath the “mri” element.
The ID’s used just need to be unique GUIDS so any way you prefer to generate them should be fine. More information on these elements are detailed here.
The urls must be https , otherwise you will see an error stating the URL for this tab isn’t valid when you try to navigate to the tab from the bot.
Create a Configurable Tab
In Part 3 we pointed a pinned tab at a website. In order to be able to use functions such as deep linking we now need to create a Microsoft Teams Tab. This is still a basic website but with some additional requirements which this post will walk through.
You can speed up these steps and jump straight to a project with all the right elements generated for you using yo teams-tab: A Microsoft Teams Tabs Yeoman generator
If you have a need to convert an existing web app to a tab then the Todo sample app would be a good place to start. For a the first time you are developing a tab the Maps sample is the best place to start in my opinion. If you choose to create your own from scratch ensure you read the prerequisites carefully along with the other documentation available.
Grab the map sample and follow the steps in the Readme for the maps sample to create your own copy and host it on your own https endpoint. Make sure you include the optional steps so that you are sure that you can tell the difference between your copy and the sample. When editing the images it is important that they stay the same size.
Once your tab is hosted sideload it buy uploading the manifest package, this time it should contain the manifest.json and the image files and is uploaded via the same screens as for bots (see here for more instructions)
Add the added tab to the channel of your choice and the sample is now ready to test and modify to suit your needs !