• In this tutorial, you will learn
• Create a new dashboard project
• In Visual Studio Code
• In TeamsFx CLI
• Take a tour of your app source code
• Widget abstraction
• Dashboard Abstraction
• How to add a new widget
• Step 1: Define a data model
• Step 2: Create a data retrive service
• Step 3: Create a widget file
• Step 4: Add the widget to the dashboard
• How to add a new dashboard
• Step 1: Create a dashboard class
• Step 2: Override methods to customize dashboard layout
• Step 3: Add a route for the new dashboard
• Step 4: Modify manifest to add a new dashboard tab
• Customize the Widget
• How to include a data loader
• How to handle empty state
• How to refresh data as scheduled
• How to use Microsoft Graph Toolkit as widget content
• Step 1: Add SSO functionality to your Teams app
• Step 2: Install required npm packages
• Step 3: Add a new Graph Toolkit widget
• Step 4: Incorporate the widget into the dashboard layout
• How to embed Power BI to Dashboard
• Customize the Dashboard Layout
• How to add a new Graph API call
• Add SSO First
• Call Graph API from the front-end (use delegated permissions)
• Step 1: Consent delegated permissions first
• Step 2: Create a graph client by adding the scope related to the Graph API you want to call
• Step 3: Call the Graph API, and parse the response into a certain model, which will be used by front-end
• Call graph api from the back-end(use application permissions)
• Step 1: Consent application permissions first
• Step 2: Add an Azure Function
• Step 3: Add your logic in Azure Function
• Step 4: Call the Azure Function from the front-end