Teams Toolkit makes creating Teams Tabs/Azure applications easier.
Add Teams Toolkit Extension to Visual Studio Code
Click the Teams Toolkit to open Wizard
Configure Quick Start items
Sign-in to M365 account
Sign-in to Azure
Click Create New Project link
Start from a sample
Select the Todo List with SPFx sample
Download the sample code from Github
Notice that the sample code is a work in progress
Navigate to {tenant).sharepoint.com
Create a blank list
Name list "To Do List"
esp8266
Add description column
esp8266
Add isCompleted column
To Do List
esp8266
Update list settings
Users can only see list items created by them
Open Visual Studio Code command palette
esp8266
Run "Teams: Deploy to the Cloud" command
Building SharePoint package
todo-list-sp-fx.sppkg file created
Upload todo-list-sp-fx.sppkg file to SharePoint App Catalog
Upload
Add a document
Ensure that "Make this solution available to all sites" is checked and Deploy
Select the app and click the "Sync to Teams" button in the SharePoint ribbon
App will be added to Teams
Navigate to Teams Admin pages
Select "Manage apps" (using a supported browser)
The TodoList SPFX app has been published.
Open Teams and select the Apps item from left hand menu
esp8266
App is a "Personal app" (and not a Tabs app)
Use Open button to open Personal App
Add a To Do List item
Item is added to SharePoint list
Update "isCompleted" status
The isCompleted status updated in SharePoint List item
Review TodoListWebPart.manifest.jsson
Add "TeamsTab" option
Use Teams: Deploy to the Cloud (to rebuild the sppkg file)
Build the SharePoint Package
Delete the SPFx App from Teams
Delete "TodoList" SPFx app
Notice that the SPFx app is gone
Delete the app from SharePoint App Catalog
After deleting the App from Teams and the SharePoint App Catalog... upload the new version
Again "Add a document"
Again select the "Make this solution available to all sites" checkbox
Again click the "Sync to Teams" button
New version of SPFx app is now published to Teams.
New version of SPFx app is available in the Teams client app
New version of SPFx app can be used as a "Personal app" or "Used in a tab"
Add as a tab in a Teams Channel
Looks good
Error. The app assumes that a "To Do List" has been added to the Teams SharePoint Site.
Navigate to the Team SharePoint Site and create a new list.
Create a blank list
Name the list "To Do List"
Add a "Single line of text" column
Name the column "description"
Add a "Yes/No" column
Name the column "isComplete"
Try adding the app as a tab again
Select the Team and Channel
Looks good
The new tab has been added
Add a To Do List item
To Do List item added
New SharePoint List Item has been created
Code in SharePointListManager.ts communicates with SharePoint using well known REST methods
.svg){kind=link}