⚠️ NOTE ⚠️ : This repository is deprecated. Please visit https://aka.ms/OneProductivityHub for the new version of One Productivity Hub solution for Microsoft Teams.

Build a “One Productivity Hub” solution using Microsoft Teams and Microsoft Graph Toolkit

Summary

Welcome to M365 Developer Bootcamp, Workshop 2 - One Productivity Hub session. In this lab, you will learn all about consuming Microsoft Graph Toolkit in a Microsoft Teams tab to enable easy authentication and get Microsoft 365 data such as calendar, tasks and e-mails.

Here is the flow for the steps you will follow to complete this lab:

Final solution will be a Microsoft Teams tab for monitoring your tasks, e-mails and calendar events:

This repository contains the entire workshop, including presentation material, source code, and step-by-step instructions.

Prerequisites

Before you start this lab, you will need an environment setup. Review the Environment Setup guidlines for the following prerequisites or click the related link of each prerequisite to be directed to the official documentation:

• Prepare your Office 365 tenant
• Install Visual Studio Code
• Install Node.js Long Term Support
• Download Microsoft Teams Toolkit extension for Visual Studio Code
• Setup Ngrok

The Workshop

• Presentation
• Part 0 - Environment Setup
• Part 1 - Create a new Teams custom tab
• Part 2 - Register your application in Azure Active Directory
• Part 3 - Add Microsoft Graph Toolkit and build the auth pop-up page
• Part 4 - Design your One Productivity Hub using Microsoft Graph Toolkit components
• Part 5 - Test your tab in Microsoft Teams App Studio

The workshop instructions may include the following signs:

📌 NOTE 📌 : Informative notes about the workshop.

⚡ IMPORTANT! ⚡ : Critical points about the lab exercises.

🔥 CHALLENGE 🔥 : Be aware! There will be some challenges in the lab exercises to learn more on your own.

Solution

Completed solution can be found under the Solution folder.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

References

• Build apps with the Microsoft Teams Toolkit and Visual Studio Code
• Register an application with the Microsoft identity platform
• Build a Microsoft Teams tab with the Microsoft Graph Toolkit

Next Step

▶️ Part 0 - Environment Setup