How to create App with integration of bot and tab

Question

I want to create an app that includes both a tab and a bot integration within a single project structure for Microsoft Teams. Currently, I am using the Teams Toolkit, but it generates separate projects for the tab and bot. Additionally, I want to enable interaction between the tab and bot. I have consulted the documentation, but it seems complicated, with variations in implementation details across documents. I encountered issues such as my app crashing, for example, when attempting to run the sample from this GitHub repository: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/nodejs. I used this sample for combining bot and tab functionalities. Can you provide guidance on the best approach for creating a tab in Microsoft Teams? Specifically, should I use React, HTML, or Teams Adaptive Cards?

Can someone help me out for this workflow?

I'm seeking to develop an app for Microsoft Teams with an integrated tab and bot. The tab includes various components, and when users interact with these components, I want the bot to receive notifications. Following this, the bot should send a card to the default Chat Tab. Users can then complete the card and share it in channels or through direct messages. Additionally, my backend includes APIs for actions such as app installation, inviting people to Teams, user joins, and departures from Teams. I aim to receive notifications for these events and perform corresponding database processes. How can I smoothly implement this comprehensive workflow?

Used technologies:

Nodejs with typescript

Used docs:

https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode#create-your-tab-project-workspace https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-bots-with-sso?tabs=ngrok&tutorial-step=4
https://learn.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-with-tabs

Answer 1

Hi Manav ,

For a comprehensive Teams app with integrated tab and bot functionalities, use the Teams Toolkit to scaffold projects, ensuring proper communication between them. Leverage React for the tab interface and Teams Adaptive Cards for user interactions. Implement event listeners in the bot for notifications and integrate backend APIs for actions like app installation, user joins, and departures. Ensure proper exception handling to avoid crashes. Utilize Node.js with TypeScript for backend services. Follow best practices in Microsoft Teams documentation, combining samples cautiously, and consider seeking help from the Teams developer community for specific issues. Regards, Saravanan Ganesan.

Answer 2

You can create an app that includes both a tab and a bot integration within a single project structure for Microsoft Teams. One way to enable interaction between the tab and bot is to use a single back-end service for both. You can use the Bot Framework SDK to create a bot and then add a tab to the bot project. This way, you can have both the bot and tab functionalities within the same project structure. Ref: https://learn.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-with-tabs

You can use the Bot Framework SDK to handle the bot's logic and use either React, HTML, or Teams Adaptive Cards to create the tab's user interface. https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs?tabs=desktop%2Cdesktop1%2Cpersonal

For the interaction between the tab and bot, you can use the Microsoft Teams JavaScript client SDK to send messages from the tab to the bot. The bot can then handle the received messages and send a response back to the tab or send a card to the default Chat Tab.

Regarding your backend, you can use the Bot Framework SDK to handle the bot's logic and use the Microsoft Teams Activity Feed API to send notifications for events such as app installation, inviting people to Teams, user joins, and departures from Teams. You can then perform the corresponding database processes based on the received notifications.

Thanks, 

Prasad Das

************************************************************************* 

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.