Manage tasks using the Microsoft Graph Toolkit Todo control

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the Todo control.

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

The Todo control is used to show the available tasks for the current user and for a specific task list.

The control renders a drop down component that enable the task list selection, after that there is a list of the available tasks. In the first row there is the ability to add a new task to the list, after that there are the tasks to be completed and at last the completed tasks.

The user can click on a task to mark it as completed or as not completed, on the right end side of each row there is a trash icon that allows the user to delete the specific task.

After this brief introduction about how is the control composed let’s see what are the available configurations of the sample solution, starting with the minimal configuration:

As said before there is the capability to create a new task on the selected task list, in the following screnshot you can see how it’s possible to create a new task in the “Tasks” list and how it’s possible to insert a description of the task and a due date using a date picker control:

In the following instance of the control I’ve enabled the read only property and while it still allows the selection of the task list, all the possible operations are restricted so you cannot add, remove or mark any task as completed:

There is also the possibility to set the initial folder (or list) that you want to be selected at first, this still allows the user to change the displayed task list, aside this all the operations listed above are enabled:

The target folder instance allow the selection of a specific folder and restrict all the operations to the selected list, the user still be able to perform all the operations but will not be able to change the list:

Following there are a couple of instances of the control where there is a custom filtering specified, in the first one only the high importance tasks from the “Tasks” list are displayed, the user is still allowed to perform the operations on the tasks:

The following instance shows only the tasks that are not yet marked as completed and as the previous filtered instance all the operations are available except that the user cannot uncheck a completed task because once completed it will be hidden from the UI:

Show me the code

Before showing you the code I need you to keep in mind that this control requires specific permissions to be used. If you need the user to create, update or delete tasks you will have to gran the Microsoft Graph permission Tasks.ReadWrite, otherwise the minimal permission required is the Tasks.Read permission. To know more, such as the APIs called underneath or what permissions are required for which operation you can reference the permission table here.

Proceeding with the code, to enable the use of the Todo control first thing first you have to import it from the MGT React package:

import { Todo } from '@microsoft/mgt-react';

Minimal configuration

The minimal configuration instance is pretty straight forward, to instantiate it you will simply need to define the control without any property set like the following:

<Todo />

This will enable the user to select the task list, create a new task, mark a task as completed, mark a task as not completed or delete a task.

Read only

This instance shows how to disable the user operativity setting the readOnly property to true, the user can only change the task list but cannot perform any other operation. The instance code is the following:

<Todo readOnly={true}/>

Initial folder

The following instance will show how to select the initial task list. Specifying the initialId property and setting the task list id will display the specified tasks list to the user, this will still allow the user to change the currently selected list and perform all the operations on the list. In the sample the list id is specified through the web part property pane.

<Todo initialId={this.props.initialFolderId}/>

Target folder

The target folder instance shows how to restrict the user interaction within a specific tasks list, this can be achieved by specifying the targetId property. This will enable the user to perform all the operations except changing the selected tasks list. Also here the sample uses the list id specified in the web part property pane.

<Todo targetId={this.props.targetFolderId} /> 

Filtering

In this sample there are two instances that demonstrate how to customize the filtering for the control.

The control has a taskFilter property, this property accepts a method that specify how to filter the tasks.

For the first filtering instance, the one that shows only the high importance task, the control has the following code:

<Todo taskFilter={this.highImportanceFilter} />

The filtering method is as following and will return true for the tasks that have an importance property defined and with 'high' as value, all the other tasks will return false and therefore won’t be displayed:

private highImportanceFilter: TodoFilter = (task) => {
 return (task.importance !== undefined && task.importance.toLowerCase() === 'high');
}

The second filtering example will only show the tasks that are not yet completed and the filtering method for that instance is:

private showNotCompletedFilter: TodoFilter = (task) => {
  return (!task.completedDateTime);
}

Wrap up

The MGT Todo control is a full experience for itself, it enables the user to perform many operations while requiring little to no effort to us developers. If this article is not enough and you want to know more you can check the official documentation here.

Hope this helps!