Get started building a developer assist dashboard with Teams Toolkit<\/h2>\n
Let\u2019s get started building a developer assist dashboard using Teams Toolkit for Visual Studio Code v5.0 pre-release. To complete this project, we will follow the steps mentioned below:<\/p>\n
- \n
- Set up and install Teams Toolkit for Visual Studio Code v5.0 pre-release.<\/li>\n
- Create your first dashboard tab using dashboard template.<\/li>\n
- Enhance your dashboard by implementing new widgets.<\/li>\n
- Test and debug your dashboard on Teams, Outlook, and Microsoft 365 app.<\/li>\n
- Challenge yourself!<\/li>\n<\/ol>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/dash.png\")
<\/a><\/p>\nThis project is available as a part of the Samples on Teams Toolkit for Visual Studio Code. You can also access to the source code on TeamsFx Samples Repository.<\/a><\/p>\n
Step 1: Setup and install Teams Toolkit for Visual Studio Code v5.0 pre-release<\/h2>\n
Before starting to build apps with Teams Toolkit for Visual Studio Code, let\u2019s complete the setup and pre-requisites.<\/p>\n
Install Teams Toolkit for Visual Studio Code and enable v5.0 pre-release:<\/p>\n
- \n
- Open Visual Studio Code and select extensions, search for Teams Toolkit, and select the arrow on the right side of Install<\/strong> button and select Install Pre-Release Version<\/strong>.<\/li>\n<\/ul>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-2-1024x575.png\")
<\/a><\/p>\n- \n
- If you already have Teams Toolkit installed on Visual Studio Code, select Switch to Pre-Release Version<\/strong>.<\/li>\n<\/ul>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-3.png\")
<\/a><\/p>\nMake sure to have Node JS installed. It is recommended to install latest Node JS version 18<\/a>.<\/p>\n
Step 2: Create your first dashboard tab using dashboard tab template<\/h2>\n
Once the setup is complete, let\u2019s create a dashboard tab using Teams Toolkit for Visual Studio Code:<\/p>\n
- \n
- Select Teams Toolkit extension on Visual Studio Code, select Create a new app<\/strong> and then Create a new Teams app. <\/strong><\/li>\n
- In the capabilities section, select Dashboard tab<\/strong>, select TypeScript<\/strong> as the programming language.<\/li>\n
- Select a folder to scaffold your project, give a name for your project.<\/li>\n<\/ul>\n
![\"How](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-4-1024x575.png\")
<\/a><\/p>\nWhen your project is scaffolded, let\u2019s quickly run the dashboard tab and see the default dashboard template that Teams Toolkit provides. Press the F5<\/strong> key to run your project. When the dashboard tab is deployed to Teams, select Add<\/strong> to view your dashboard with sample widgets.<\/p>\n
![\"When](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-5-1024x574.png\")
<\/a><\/p>\nDashboard tab code structure<\/h3>\n
Let\u2019s go through the code structure of the dashboard tab that we\u2019ll include our widgets in the next steps.<\/p>\n
- \n
- App configuration: teamsapp.yml<\/strong> and teamsapp.local.yml<\/strong><\/li>\n
- App environment information: env<\/strong><\/li>\n
- Frontend code is available under src\/views <\/strong>inside dashboards, widgets, and styles folders.<\/li>\n
- Backend code is available under src <\/strong>inside services and models folders.<\/li>\n<\/ul>\n
Step 3: Enhance your dashboard by implementing new widgets<\/h2>\n
Our goal is to create a developer assist dashboard, so that we will bring the most popular developer tools in our dashboard! We will create three new widgets to implement Azure DevOps, GitHub, and Microsoft Graph. The widgets we are building are:<\/p>\n
- \n
- Azure DevOps Work Items widget<\/li>\n
- GitHub Issues widget<\/li>\n
- Planner Tasks widget<\/li>\n<\/ol>\n
To create each widget, we\u2019ll need a model<\/strong>, service, <\/strong>and widget <\/strong>file in our project.<\/p>\n
Azure DevOps work items widget<\/h3>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/devops-backlog-1.png\")
<\/a><\/p>\nLet\u2019s get started creating the first widget and integrate DevOps Work Items.<\/p>\n
Create DevOps model<\/h4>\n
Select src > models<\/strong> folder and create a new file with the name devOpsModel.ts<\/strong>. Copy the following code in the devOpsModel.ts file: devOpsModel.ts<\/a><\/p>\n
Create DevOps service<\/h4>\n
Select src > services<\/strong> folder and create a new file with the name devopsService.ts<\/strong>. In this file, we\u2019ll integrate DevOps API to get the work items from Azure DevOps. Copy the following code in the file to make an HTTP call to DevOps API:<\/p>\n
https:\/\/gist.github.com\/aycabas\/188a5b82cb0bd43976a0320b1fcced2b<\/p>\n
Replace ORGANIZATION_NAME<\/strong> and PROJECT_NAME <\/strong>with your DevOps organization and project names. Also, replace DEVOPS_PERSONAL_ACCESS_TOKEN <\/strong>with your DevOps personal access token for testing purposes.<\/p>\n
<\/i>Note<\/strong><\/p>We don\u2019t recommend using DevOps personal access token in production. Consuming personal access token in this sample is for testing purposes only.<\/div><\/p>\n
After getting the response from Azure DevOps, retrieve the response value by including the below code snippet inside try <\/strong>and return devopsItems<\/strong>:<\/p>\n
https:\/\/gist.github.com\/aycabas\/bb523bda4cded0b246a5cc70d9b9ca0d<\/p>\n
<\/code><\/pre>\nCreate DevOps widget<\/h4>\n
Select src > views > widgets<\/strong> folder and create a new file with the name DevOpsWidget.tsx<\/strong>. In this file, we\u2019ll build our widget using Fluent UI. Copy the following code in the DevOpsWidget.tsx<\/strong> file:<\/p>\n
https:\/\/gist.github.com\/aycabas\/af61ca9fd484693d1eb95cf1dd09bf0e<\/p>\n
In DevOpsWidget.tsx:<\/p>\n
- \n
- getData()<\/strong> method is used for getting the data from the DevOps service.<\/li>\n
- headerContent()<\/strong> is used for customizing the content of the widget header.<\/li>\n
- bodyContent()<\/strong> is used for customizing the content of the widget body.<\/li>\n<\/ul>\n
Finally, let\u2019s style the DevOps widget by creating a CSS file for DevOps. Create a new file with the name DevOps.css <\/strong> under src > views > styles <\/strong>folder in your project. Copy the css from the following file: DevOps.css<\/a><\/p>\n
GitHub issues widget<\/h3>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/github-issues-1.png\")
<\/a><\/p>\nLet\u2019s get started creating the second widget to show the GitHub issues. Open the terminal in Visual Studio Code and run the following script in project root:<\/p>\n
npm install octokit<\/code><\/pre>\n<\/p>\n
Create GitHub model<\/h4>\n
Select src > models<\/strong> folder and create a new file with the name githubIssuesModel.ts<\/strong>. Copy the following code in the githubIssuesModel.ts file: githubIssuesModel.ts<\/a><\/p>\n
Create GitHub service<\/h4>\n
Select src > services<\/strong> folder and create a new file with the name githubService.ts<\/strong>. In this file, we\u2019ll integrate GitHub API to get the issues from GitHub. Copy the following code in the file to make an HTTP call to GitHub API:<\/p>\n
https:\/\/gist.github.com\/aycabas\/67d3366f2ff7fd3857ca18e5bca25c68<\/p>\n
Replace GITHUB_PERSONAL_ACCESS_TOKEN <\/strong>with GitHub personal access token for testing purposes. Also replace OWNER_NAME<\/strong> with your GitHub handle and REPOSITORY_NAME<\/strong> with the repository you\u2019d like to read the issues.<\/p>\n
<\/i>Note<\/strong><\/p>We don\u2019t recommend using GitHub personal access token in production. Consuming personal access token in this sample is for testing purposes only.<\/div><\/p>\n
Create GitHub widget<\/h4>\n
Select src > views>widgets<\/strong> folder and create a new file with the name GitHubWidget.tsx<\/strong>. In this file, we\u2019ll build our widget using Fluent UI. Copy the following code in the GitHubWidget.tsx<\/strong> file:<\/p>\n
https:\/\/gist.github.com\/aycabas\/3b92a83b3cce74514bd64aa032048d62<\/p>\n
Finally, let\u2019s style the Github widget by creating a CSS file for GitHub. Create a new file with the name GitHub.css <\/strong>under src > views > styles <\/strong>folder in your project. Copy the css from the following file: GitHub.css<\/a><\/p>\n
Step 4: Test your dashboard on Teams, Outlook, and Microsoft 365 app<\/h2>\n
Before testing your dashboard tab, implement your widgets inside the dashboard. Select src > views > widgets > dashboards<\/strong> folder and open SampleDashboard.tsx <\/strong>file. Replace the code with the following code snippet:<\/p>\n
https:\/\/gist.github.com\/aycabas\/6d77b7f466ba4c58261eefd08a75c1e3<\/p>\n
Select F5<\/strong> to preview your app on Microsoft Teams. When the dashboard tab is deployed to Teams, select Add<\/strong> to view your dashboard with DevOps<\/strong> and GitHub<\/strong> widgets.
![\"Image](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/dash2-1.png\")
<\/a><\/p>\nTo debug your app locally on Outlook and Microsoft 365 app, select .vscode > launch.json <\/strong>file in your project, add the following code snippet under the configurations<\/strong>:<\/p>\n
https:\/\/gist.github.com\/aycabas\/01d785b7267595ed75698b3e70503497<\/p>\n
Also add the following code snippet under the compounds<\/strong>:<\/p>\n
https:\/\/gist.github.com\/aycabas\/e7c73115e7f1871d94af5bce3d32d9b9<\/p>\n
Select Run and Debug <\/strong>from the left side bar on Visual Studio Code and select the Debug <\/strong>button to view all available debugging options.<\/p>\n
![\"Debug](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-7.png\")
<\/a><\/p>\nTo test your app on Outlook or Microsoft 365 app, select Debug in Outlook <\/strong>or Debug in the Microsoft 365 app<\/strong>, Teams Toolkit will initiate your app on Outlook or Microsoft 365 app based on your selection:<\/p>\n
![\"Teams](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Dev-assist-dashboard_image-8.png\")
<\/a><\/p>\n<\/p>\n
Step 5: Challenge yourself!<\/h2>\n
Now that you know the basics of dashboard template and widgets, I challenge you to enhance the dashboard further to make it more interesting.<\/p>\n
Build a new widget to integrate Microsoft Planner tasks into your developer assist dashboard. You will need to create a new model<\/strong>, service<\/strong>, and widget<\/strong> files for Planner tasks. You will use Microsoft Graph API in the Planner service to retrieve tasks from the Planner:<\/p>\n
GET \/planner\/plans\/{plan-id}\/tasks<\/code><\/pre>\nGraph Explorer<\/a> and Microsoft Graph documentation<\/a> are the best places to get more information. Comment below if you need further assistance.<\/p>\n
- headerContent()<\/strong> is used for customizing the content of the widget header.<\/li>\n
- getData()<\/strong> method is used for getting the data from the DevOps service.<\/li>\n
- App environment information: env<\/strong><\/li>\n
- In the capabilities section, select Dashboard tab<\/strong>, select TypeScript<\/strong> as the programming language.<\/li>\n
- Select Teams Toolkit extension on Visual Studio Code, select Create a new app<\/strong> and then Create a new Teams app. <\/strong><\/li>\n
- If you already have Teams Toolkit installed on Visual Studio Code, select Switch to Pre-Release Version<\/strong>.<\/li>\n<\/ul>\n
- Open Visual Studio Code and select extensions, search for Teams Toolkit, and select the arrow on the right side of Install<\/strong> button and select Install Pre-Release Version<\/strong>.<\/li>\n<\/ul>\n