Getting Started with Team Central Dashboard Sample

Note: We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

This warning will be removed when the samples are ready for production.

Important: Please be advised that access tokens are stored in sessionStorage for you by default. This can make it possible for malicious code in your app (or code pasted into a console on your page) to access APIs at the same privilege level as your client application. Please ensure you only request the minimum necessary scopes from your client application, and perform any sensitive operations from server side code that your client has to authenticate with. Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.

Team Central Dashboard shows you how to build a tab with data chats and content from Microsoft Graph to accelerate team collaboration and personal productivity.

Prerequisites

• NodeJS, fully tested on NodeJS 14, 16
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Teams Toolkit Visual Studio Code Extension or TeamsFx CLI

What you will learn in this sample:

• How to use TeamsFx to embed a canvas containing multiple cards that provide an overview of data or content in your tab app.
• How to use TeamsFx to build frontend hosting on Azure for your tab app.
• How to use TeamsFx to build backend hosting on Azure for your tab app.
• How to use MS graph client in TeamsFx to get access to M365 data.

Try the Sample with Visual Studio Code Extension:

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using TeamsFx CLI tool, refer to Try the Sample with TeamsFx CLI

1. Clone the repo to your local workspace or directly download the source code.
2. Download Visual Studio Code and install Teams Toolkit Visual Studio Code Extension.
3. Open the project in Visual Studio Code.
4. Start debugging the project by hitting the F5 key in Visual Studio Code.

The first time you run this sample, you need to login to consent some delegated permissions. If you don't see the consent page, please check if your browser blocks the pop-up window.

Consent "TeamsActivity.Send" permission:

To consent the "TeamsActivity.Send" permission, you should do the following steps after provision or run local debug twice.

Go to Azure portal > Click Azure Active Directory > Click App registrations in the side bar > Click your Dashboard app > Click API permissions in the side bar > Click +Add a permission > Choose Microsoft Graph > Choose Application permissions > Find the permission TeamsActivity.Send > Click Add permissions button in the bottom > Click ✔Grant admin consent for XXX and then click Yes button to finish the admin consent.

Implemented Features

Area Chart

This widget displays a chart and a table with dummy data. You can select a date range to filter the data.

Team Collaboration

This widget displays some collaboration cards with dummy data.

Your upcoming events

This widget displays the upcoming events on your calendar. You can click the Join button to join a meeting, and click the View calendar button to open your calendar app.

Your tasks

This widget displays your to-do tasks. Your can input a task name and click the Add button to add a new task and click the View all button to open your task app.

Your documents

This widget displays your content files in OneDrive. You can click one to open it and click the ... button on the right to choose the way to open the file, download the file or copy the file link.

Edit the manifest

You can find the Teams manifest in templates/appPackage folder. The templates contains:

• manifest.template.json: Manifest file for Teams app running locally and remotely.

Both file contains template arguments with {...} statements which will be replaced at build time. You may add any extra properties or permissions you require to this file. See the schema reference for more.

Deploy to Azure

Deploy your project to Azure by following these steps:

From Visual Studio Code

From TeamsFx CLI

Open Teams Toolkit, and sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar. After you signed in, select a subscription under your account. Open the Teams Toolkit and click Provision in the cloud from DEPLOYMENT section or open the command palette and select: Teams: Provision in the cloud. Open the Teams Toolkit and click Deploy to the cloud or open the command palette and select: Teams: Deploy to the cloud.

Run command teamsfx account login azure. Run command teamsfx account set --subscription <your-subscription-id>. Run command teamsfx provision. Run command: teamsfx deploy.

Note: Provisioning and deployment may incur charges to your Azure Subscription.

Package

• From Visual Studio Code: open the command palette and select Teams: Zip Teams metadata package.
• Alternatively, from the command line run teamsfx package in the project directory.

Publish to Teams

Once deployed, you may want to distribute your application to your organization's internal app store in Teams. Your app will be submitted for admin approval.

• From Visual Studio Code: open the Teams Toolkit and click Publish to Teams or open the command palette and select: Teams: Publish to Teams.
• From TeamsFx CLI: run command teamsfx publish in your project directory.

Architecture

• The frontend is a react tab app hosted on Azure Storage.
• The Backend server is hosted on Azure Function for managing posts in the tab app.

Code structure

• You can check app configuration and environment information in: .fx
• You will find frontend code in: tabs/src
• You will find backend code in: api/finishTaskNotification

Code of Conduct

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.