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