In this lab, you will learn:
- Creating a Microsoft Teams tab by using Microsoft Teams Toolkit
- Adding an authentication feature by using Microsoft Teams Toolkit
- Consuming Microsoft Graph Toolkit components and TeamsFX provider to enable Microsoft 365 data such as agenda, to-do tasks and files in a Teams tab
Final solution will be a Microsoft Teams tab for monitoring your agenda, to-do tasks and file list:
This repository contains the entire workshop, including source code, and step-by-step instructions.
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
- Part 0 - Environment Setup
- Part 1 - Create a new Teams custom tab
- Part 2 - Add Single Sign On feature in your tab
- Part 3 - Add Microsoft Graph Toolkit TeamsFX Provider and build consent permissions feature
- Part 4 - Design your One Productivity Hub by using Microsoft Graph Toolkit components
- Part 5 - Test One Productivity Hub app on Microsoft Teams
📌 NOTE 📌 : Informative notes about the workshop.
⚡ IMPORTANT! ⚡ : Critical points about the lab exercises.
Completed solution can be found under the tabs folder.
| Solution | Authors |
|---|---|
| One Productivity Hub | Ayca Bas, Senior Cloud Advocate @Microsoft, Twitter, Blog |
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 opencode@microsoft.com with any additional questions or comments.
- Build apps with the Microsoft Teams Toolkit and Visual Studio Code
- Build a Teams tab with the Microsoft Graph Toolkit TeamsFX Provider
This repo has been populated by an initial template to help get you started. Please make sure to update the content to build a great experience for community-building.
As the maintainer of this project, please make a few updates:
- Improving this README.MD file to provide a great experience
- Updating SUPPORT.MD with content about this project's support experience
- Understanding the security reporting process in SECURITY.MD
- Remove this section from the README
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 opencode@microsoft.com with any additional questions or comments.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.