Microsoft Teams Todo List

Microsoft Teams Todo List
Microsoft Teams To Do List
Microsoft To Do With Teams
Microsoft Teams Task List Template

2020 has proven to be a big year for new tools and features rolling out in Microsoft 365, including the introduction of Microsoft Lists—basically a major update to the SharePoint lists experience, presented as a separate app—the new Tasks app in Microsoft Teams, and various upgrades to the two major task apps, Microsoft Planner and Microsoft To Do.

This is bringing up a lot of questions of which tool to use when, and that includes confusion of overlap among these four apps. Good task management across your life is a nirvana that app makers the world over have tried to solve the best way possible; there’s a reason there are thousands of results among the Google Play and Apple App stores for task apps.

But where do Lists, Planner, To Do, and Tasks in Teams fall along the spectrum? There’s some overlap and there’s some aspects of these apps that aren’t actually just about tasks. So let’s dive in. For a video version of this post, see below.

Let’s talk about what these tools actually are meant for.That doesn’t mean they can’t do more than what I cover, just that they aren’t necessarily intended to:

Microsoft Planner is an easy-to-use, team-based project management tool. It’s built into Microsoft 365 Groups, so each Outlook Group, Teams Team, and Yammer Community can track its open tasks in a way that doesn’t require a formal project manager. It uses Kanban boards to track tasks and provide rich information about each task. There is also a personal view of Planner so each individual can see all their Planner tasks across Groups and Plans. Planner competes with tools like Trello, Wrike, andAsana.

Microsoft To Do is a to do list maker and task manager that lets you manage your to do list online and share lists with friends, family and colleagues. Microsoft To Do. To Do gives you focus, from work to play.

Microsoft Lists is a major feature and interface upgrade to SharePoint lists, separated out into its own app. WhileLists can be really useful for task tracking and project management, that’s not the only thing it’s good for. You can use Lists to create custom tables and columns that make the most sense for your need, perhaps to track inventory, build event schedules, manage travel plans, and more. This announcement blog post provides a good overview of what Lists can do, but you might prefer our view on Lists. Lists competes with tools like monday.com, Asana, and Wrike.

Dear ggwells, Thanks for participating in the Microsoft Community. I'm an Independent Advisor and I'll help you. Yes, you totally right, I had the same question some time ago, we need this feature, we need notifications for incoming tasks when we are part of a Shared task list group, but unfortunately is not available at this moment, Microsoft has to improve notifications for a 'shared task.
Microsoft To Do is a to do list maker and task manager that lets you manage your to do list online and share lists with friends, family and colleagues.

Microsoft To Do replaced Wunderlist—an app that Microsoft acquired—and has worked its way in to replacing the tasks section of Outlook, which is notable considering that “app” has been around for decades. To Do tracks personal tasks in lists and groups managed by you, the user. But the big connection To Do has with the other apps is it will show you your Planner tasks and any flagged emails from Outlook right in the app(instructions below). Given its Power Automate connector, you can also add tasks from other apps, like Microsoft OneNote. To Do can centralize your tasks across your Microsoft account.

Tasks in Teams is a recent addition to Microsoft Teams and central listing of your tasks in a Teams-friendly way. It’s essentially a combination of Planner and To Do within Teams. It doesn’t really do any work; it simply centralizes your tasks in Teams, which is the app that Microsoft is putting the most emphasis on for their modern workplace vision. This recent announcement blog post provides a good overview of Tasks in Teams.

This basically comes down to whether the app storesand manages your tasks or presents your tasks into a single frame.

Planner and Lists are great for adding and managing team-based tasks and task lists. To Do is great for adding and managing personal tasks and task lists. Tasks in Teams is essentially a view port to see all of your tasks in Planner and To Do. At this time, there is no integration to view any List tasks that are assigned to you through To Do and Tasks in Teams; that said, Lists is easy to add as a tab to any Team using its connector, so you have easy access to the list and your other tasks via Teams.

Now that we’ve covered the separation between storing tasksand viewing them, the real question of “Planner, To Do, Tasks in Teams, orLists” breaks up into two questions:

• Planner or Lists?

• To Do or Tasks in Teams?

As with most tech solutions, the answer is: it depends.

While it might look like there’s a lot of overlap betweenPlanner and Lists, it’s not as much as you might think. Yes, you can essentially recreate a Planner experience with a List, but why would you if you don’t need the customizability?

Use Planner: If you want quick, easy, and simple-to-understand project management, use Planner. It works. It provides a bunch of fields for your tasks, it integrates with To Do and Tasks in Teams, and it works great for both agile and waterfall project management, especially for small teams(i.e., not enterprise portfolio management). You can view tasks in a board or calendar view and there is a nice dashboard overview included. Planner is available as a web app, Teams tab, and mobile app.

Use Lists: If you want a customized experience where you can control the task fields, their options, their layout, their views, and more, you want a List. You also want a list if you’re trying to manage things that aren’t really tasks. That brings us to examples like inventory tracking, asset management, event itineraries, and travel planning. You can view tasks (and other list items) in a list or calendar view. Lists is available as a web app, Teams tab, and mobile app.

But remember, if you’re really banking on having ToDo and Task in Teams integration, you need to use Planner for team-based tasks.

The choice between To Do and Tasks in Teams is a bit harder to make. It’s really a judgment call. Tasks in Teams is simply a way of viewing your existing tasks in To Do and Planner. Which is to say, it’s really only showing your existing tasks in To Do (since Planner tasks can be viewed in ToDo). But the way you view them is different.

Use To Do: If you want a listing of your tasks in a central spot, especially one that has a great mobile app and is easy to set due dates and reminders (those push notifications really help!), you want to use ToDo. To Do is great for managing your tasks on a day-to-day basis, to help you build your personal schedule. To Do is good for granular task management. ToDo is available as a web app, desktop app, and mobile app.

Use Tasks in Teams: If you prefer a larger view of your tasks, perhaps in a list with columns, you’ll probably prefer Tasks inTeams. Tasks in Teams also separates your tasks out by Plan and Team, which means you can home in on tasks by project and deliverable, not just an endless list of tasks that were assigned to you to be done today (some of those days are simply impossible to complete, amirite?). Also, if you never leaveMicrosoft Teams and it’s your central hub for work, use Tasks in Teams. Tasks in Teams is good for big-picture task management. Tasks in Teams is available via the Teams web app, desktop app, and mobile app.

I’ve mentioned a few times that To Do integrates withPlanner and Outlook, but I didn’t really explain how. These integrations aren’t turned on by default, so you have to set it up yourself. But once you’ve got the apps connected, you’re good to go on all versions of To Do (desktop app, web version, mobile app).

It’s probably easiest to do it from the web version of ToDo. Here’s how to do it:

1. Browse to office.com and click To Do. If you don’t see To Do, click the waffle in the top-left of the page > All Apps> To Do.

2. In the top-right corner of To Do, click the Gear> To Do Settings.

3. In the Settings pane, scroll down to the Connected apps section.

4. Toggle Planner and Flagged email to On.

5. Click the X in the top-right corner of the pane to close it. Your settings were saved automatically.

One thing you won’t see in any of these tools is Gantt chart functionality. This is likely because Microsoft Project—Microsoft’s premium project management tool—promotes this as a core functionality and they don’t want to cannibalize their own premium app.

You can find Gantt chart functionality in the “legacy” tasks lists in SharePoint Online. They’re not great, but they do work. And you can sync one Project file to a SharePoint task list to save on license cost and permission-protect various tasks. More details here.

The point is, if you’re hoping one of these apps will fill this need, you need to start looking at other tools because it’s unlikelyMicrosoft will provide fully featured Gantt charts into Planner or Lists. This is a major separation point from many of the competing list and task apps out there, especially Asana, Wrike, and monday.com, which all include Gantt views as part of their product offering (though, like Project, these apps come at an added cost).

All of that said, I haven’t even mentioned Microsoft Projectnor Azure DevOPs and their use cases for managing tasks. And frankly, these two apps are on a completely different level from the ones we’re covering in this post.

Project is really meant for large-scale projects that have professional project managers involved. And Azure DevOps—while this may annoy some of the more techy folks out there—is still a niche app for developers and the IT crowd. The question of when to use them really comes down to: are you looking at things from a portfolio management position that needs professional support or are you just a team that needs to get stuff done without the bureaucracy of project managers getting involved?

You’re getting a lot of choices. And that’s because there are a lot of tools out there that offer some or all of these functions, all within those apps. And then you have various apps in the Microsoft 365ecosystem that do some of them. Microsoft is doing its best to offer similar functionality so you get the most bang for your buck all while keeping your task and list information protected by world-class data protection and security.

On top of that, many of these new apps are evolutions of others and need to please the longtime users of those apps(Wunderlist, Outlook tasks, SharePoint lists). So when it comes to deciding what you want to use, consider the thoughts above and remember that if what you choose doesn’t seem to be working, it’s smart to sit down with your team, discuss what you want to see, and play with each app to see which one can get you closest to your goal.

-->

This is an example tab app for Microsoft Teams. The point of this sample to illustrate how simple it is to convert an existing web app into a Microsoft Teams tab app. The existing web app, TodoMVC for React, provides a basic task manager which integrates with your personal Outlook Tasks. With only a few minor modifications, this web view can be added to a channel as a tab app. Take a look at the code diff between the 'before' and 'after' branches to see what changes were made.

Note: This is not a realistic example of a team collaboration app. The tasks shown belong to the user's individual account and not to a shared team account.

For more information on developing experiences for Microsoft Teams, please review the Microsoft Teams developer documentation.

Prerequisites

An Office 365 account with access to Microsoft Teams.
This sample is built using Node.js. Download and install the recommended version if you don't already have it.

Run the app

Host the tab apps 'configuration page' and 'content page'

As the tab configuration and content pages are web apps, they must be hosted.

First, we'll prepare the project:

Clone the repo.
Open a command line in the repo subdirectory.
Run npm install (included as part of Node.js) from the command line.

To host the app locally:

In the repo subdirectory, run npm start to start the webpack-dev-server to enable the dev app to function.
Note that the dev manifest is set up to use localhost, so no additional configuration would be needed.

Optionally, to build a deployable app, which you can host in your own environment:

In the repo subdirectory, run npm run build to generate a deployable build.
Modify the config.url in the prod manifest to point to your hosting location. See below

Add the tab to Microsoft Teams

Download the tab app dev package zip file for this sample.
Create a new team for testing, if necessary. Click Create team at the bottom of the left-hand panel.
Select the team from the left-hand panel, select ... (more options) and then select View Team.
Select the Developer (Preview) tab, and then select Upload.
Navigate to the downloaded zip file from step 1 above and select it.
Go to any channel in the team. Click the '+' to the right of the existing tabs.
Select your tab from the gallery that appears.
Accept the consent prompt.
If needed, sign in using your Office 365 work/school account. Note that the code will try to do silent authentication if possible.
Validate authentication information.
Hit Save to add the tab to channel.

Note: To re-upload an updated package, with the same id, click the 'Replace' icon at the end of the tab's table row. Don't click 'Upload' again: Microsoft Teams will say the tab already exists.

It is advisable to have multiple configs, one per environment. The names of the zip files can be anything such as todo.dev.zip, todo.prod.zip etc. but the zip must contain a manifest.json with a unique id. See Creating a manifest for your tab.

Code walk through

While the master branch shows the latest state of the sample, take a look at the following code diff between:

before: the initial app
after: the app after integration with Microsoft Teams.

Going through this step by step:

We have added a new config.html and config.tsx page which is responsible for the the application to allow the user to manipulate any settings, perform single signon Authentication etc. during the first launch. This is required so that the team administrator can configure the application/settings. See Create the configuration page.
We have added the same config.html file to our webpack.common.js configuration so that it can inject the right bundles during runtime.
We add a reference to MicrosoftTeams.js in our index.html and added MicrosoftTeams.d.ts for Typescript intellisense.
We have added a manifest.dev.json, manifest.prod.json and two logos for size 44x44 and 88x88. Remember to rename these as manifest.json in your zip files that you upload to Microsoft Teams.
We have added some styles to our app.css.
Finally we have modified the authentication in outlook.tasks.ts to depend instead on 'useMicrosoftTeamsAuth', a new feature from the beta version of OfficeHelpers referenced in this sample.

Invoking the Authentication dialog

When the user adds the tab, the configuration page is presented (config.html). In this case, the code authenticates the user if possible.

Authentication leverages a new Teams-specific function in the latest (>0.4.0) version of the office-js-helpers library. This helper function will attempt to silently authenticate, but if it cannot, it will call the Microsoft Teams specific auth dialog for you. For more information on the full Authentication process in Microsoft Teams, please review Authenticating a user in the Microsoft Teams developer documentation.

In outlook.tasks.ts:

Handling the 'Save' event

After successful sign-in, the user will Save the tab into the channel. The following code enables the Save button, and sets the SaveHandler, which will store what content to display in the tab (in this case, just the project's index.html).

In config.tsx:

Technology used

This sample uses the following stack:

React by Facebook as the UI Framework.
TypeScript as the transpiler.
TodoMVC base for TodoMVC functionality.
Webpack as the build tool.

Additional Resources

Registering an application to authenticate with Microsoft

Note that this will not be necessary if you use the local Dev option above, but if you choose to host this tab in your own environment, you must register the application in order to authenticate.

Go to the Microsoft Application Registration Portal.
Sign in with your Office 365 work/school account. Don't use your personal Microsoft account.
Add a new app.
Take note of your new Application ID.
Click on Add Platform and choose Web.
Check Allow Implicit Flow and configure the redirect URL to be https://<mywebsite>/config.html.

For more information on hosting your own tab pages, see the Microsoft Teams 'Get Started' sample README.

Note: By default, your organization should allow you to create new apps. But if it doesn't, you can get a developer test tenant, a one-year trial subscription of Office 365 Developer at no charge. Here's how.

Credits

This project is based on the TodoMVC Typescript - React template located here.

Microsoft Teams Todo List

Contributing

Microsoft Teams To Do List

Please read Contributing for details on our code of conduct, and the process for submitting pull requests to us.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Microsoft To Do With Teams

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

Microsoft Teams Task List Template

This project is licensed under the MIT License - see the License file for details