Merge pull request #1523 from luismanez/react-outlook-add-todo-task

samples/react-outlook-add-todo-task/README.md

@@ -1,7 +1,8 @@
 # Create To Do Task from Email (Outlook Add in)
 
 ## Summary
-This webpart allows us to create a new To Do task using the new ToDo MS Graph endpoint. If deployed as an Outlook Add In, the Task title comes from email subject. Let´s say this is similar to the OOTB "Flag" action, but here you can select the ToDo List where to store the Task, and you can modify the Title before adding it.
+
+This web part allows us to create a new To Do task using the new ToDo MS Graph endpoint. If deployed as an Outlook Add In, the Task title comes from email subject. Let´s say this is similar to the OOTB "Flag" action, but here you can select the ToDo List where to store the Task, and you can modify the Title before adding it.
 
 ![Create ToDo task](./assets/spfx-todo-outlook.gif)
 
@@ -10,6 +11,7 @@ This webpart allows us to create a new To Do task using the new ToDo MS Graph en
 As of today, To Do endpoint is not very well documented yet. It was presented in latest Build 2020. Here are some of the basic operations. You can get more information and see the Build session from this link: [https://developer.microsoft.com/en-us/office/blogs/introducing-the-new-microsoft-graph-to-do-api/](https://developer.microsoft.com/en-us/office/blogs/introducing-the-new-microsoft-graph-to-do-api/)
 
 ### Get lists 
+
 GET https://graph.microsoft.com/beta/me/todo/lists
 
 ### Create new List
@@ -23,9 +25,11 @@ POST https://graph.microsoft.com/beta/me/todo/lists
 ```
 
 ### Get tasks in list
+
 GET https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks
 
 ### Create new Task in List
+
 POST https://graph.microsoft.com/beta/me/todo/lists/{listId}/tasks
 
 ```json
@@ -72,6 +76,7 @@ Version|Date|Comments
 ```ps
 spo serviceprincipal grant add --resource "Microsoft Graph" --scope "Tasks.ReadWrite"
 ```
+
 * deploy spfx solution as Outlook add-in following instructions here: [https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create#deployment-of-your-add-in](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create#deployment-of-your-add-in)
 
 ## Features

samples/react-outlook-add-todo-task/src/webparts/createTask/CreateTaskWebPart.ts

@@ -20,12 +20,17 @@ export interface ICreateTaskWebPartProps {
 export default class CreateTaskWebPart extends BaseClientSideWebPart<ICreateTaskWebPartProps> {
 
   private _graphHttpClient: MSGraphClient;
+  private _mailBody: string;
 
   protected onInit(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.context.msGraphClientFactory.getClient().then(client => {
         this._graphHttpClient = client;
-        resolve();
+        const mailboxItem: Office.MessageRead = this.context.sdks.office.context.mailbox.item;
+        mailboxItem.body.getAsync(Office.CoercionType.Text, (asyncResult: Office.AsyncResult<string>) => {
+          this._mailBody = asyncResult.value;
+          resolve();
+        });
       }).catch(error => {
         console.log(error);
         reject(error);
@@ -43,7 +48,8 @@ export default class CreateTaskWebPart extends BaseClientSideWebPart<ICreateTask
           id: mailboxItem.itemId,
           subject: mailboxItem.subject,
           from: mailboxItem.from.emailAddress,
-          to: mailboxItem.to[0].emailAddress
+          to: mailboxItem.to[0].emailAddress,
+          body: this._mailBody
         }
       };
       return context;

samples/react-outlook-add-todo-task/src/webparts/createTask/components/CreateTask.tsx

@@ -17,8 +17,6 @@ import {
   MessageBarType
 } from "office-ui-fabric-react";
 
-import { MSGraphClient } from "@microsoft/sp-http";
-
 export default class CreateTask extends React.Component<
   ICreateTaskProps,
   ICreateTaskState
@@ -30,10 +28,8 @@ export default class CreateTask extends React.Component<
       listItemAdded: false,
       selectedList: undefined,
       todoLists: [],
-      newTaskTitle: this.props.context.item
-        ? this.props.context.item.subject
-        : "New Task title here!",
-        showSelectListError: false
+      newTaskTitle: this.props.context.item ? this.props.context.item.subject : "New Task title here!",
+      showSelectListError: false
     };
 
     this._onDropdownChange = this._onDropdownChange.bind(this);
@@ -166,7 +162,7 @@ export default class CreateTask extends React.Component<
         status: "notStarted",
         title: taskTitle,
         body: {
-          content: "You have a new task to do added from SPFx component!",
+          content: this.props.context.item.body,
           contentType: "text",
         },
       };

samples/react-outlook-add-todo-task/src/webparts/createTask/models/IMailItem.ts

@@ -3,4 +3,5 @@ export interface IMailItem {
   subject: string;
   from: string;
   to: string;
+  body: string;
 }