M365Bootcamp-TeamsOneProductivityHub

Part 5 - Test your tab in Microsoft Teams App Studio

• 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 ( 📍 You are here )

---

🔥 CHALLENGE 🔥 : Pass the validation test!

Validate your app package manifest before the test run and make sure to pass it without an error or warning.

How 👀 : from Microsoft Teams App Studio, choose Validation tab and upload your manifest package for testing.

---

Test your tab

Build and run your application using the following commands:

npm start

📌 NOTE 📌 : npm install will only be needed once for the entire lab regardless of how many times you start your app.

Make sure ngrok is running in the background for tunneling.

To test your application, you need to upload your application to Teams. Open the Microsoft Teams client, select the … button on the left-hand menu and go to App Studio. Click the Manifest Editor tab and select Import an existing app.

Locate your project directory and upload the Development.zip file inside of the .publish folder.

After your app has loaded, scroll down on the left menu and select Test and Distribute. Click the Install button and then click Add. You will be redirected to the tab you created.

There you have your tab working on Microsoft Teams. Click on Sign in button to authenticate in your One Productivity Hub.

You should see the list of scopes we added in our provider earlier. Select Consent on behalf of your organization and click Accept button.

Finally, our One Productivity Hub tab is running successfully on Microsoft Teams.

📌 NOTE 📌 : Try to add some calendar events, tasks and e-mails in your M365 Developer tenant account. Your “One Productivity Hub” will look awesome that way! 🌟

References

• Microsoft Docs - Build a Microsoft Teams tab with the Microsoft Graph Toolkit

Completed Solution

▶️ Completed solution can be found under the Solution folder.

This site is open source. Improve this page.