Step by Step SharePoint开发 - 通过Microsoft Graph获取Planner任务的客户端Webpart

本篇我们将编写一个显示当前用户Planner中任务的Webpart，我们将仍然使用第一篇中创建的SPFx解决方案，因此如果您还没有阅读看第一篇，请稍微花上10分钟的时间了解一下。传送门。

向SPFx解决方案添加组件

1. 打开CMD访问之前的解决方案目录
2. 执行命令yo @microsoft/sharepoint
   在提示中，还是选择WebPart和React，名称自己选，本示例填写为GraphTasks。
3. 执行code .，用VS Code打开项目

可以看到webparts文件夹下面多了我们刚才新建的graphTasks文件夹。

更新Webpart

一如既往我们需要更新默认的webpart，向React组件中传入一个Microsoft Graph客户端API的实例。

1. 打开文件GraphTasksWebPart.ts
2. 加入以下引用声明

import { MSGraphClient } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

3. 向下找到render方法，替换为以下代码，创建一个Microsoft Graph客户端实例。

this.context.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
  const element: React.ReactElement<IGraphTasksProps> = React.createElement(
    GraphTasks,
    {
      graphClient: client
    }
  );

  ReactDom.render(element, this.domElement);
});

实现React组件

1. 打开文件IGraphTasksProps.ts，去掉默认的description属性，添加MSGraphClient属性

import { MSGraphClient } from '@microsoft/sp-http';

export interface IGraphTasksProps {
  graphClient: MSGraphClient;
}

2. 在components文件夹下创建一个用于跟踪组件状态的接口IGraphTasksState.ts并添加以下代码

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export interface IGraphTasksState {
  tasks: MicrosoftGraph.PlannerTask[];
}

3. 打开文件GraphTasks.tsx，添加对刚才新建内容的引用，添加以下引用代码

import { IGraphTasksState } from './IGraphTasksState';

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

import { List } from 'office-ui-fabric-react/lib/List';
import { format } from 'date-fns';

4. 往下找到GraphTasks类，将空参数{}替换为State接口IGraphTasksState

export default class GraphTasks extends React.Component<IGraphTasksProps, IGraphTasksState> {

5. 在render方法上面添加构造函数

constructor(props: IGraphTasksProps) {
  super(props);

  this.state = {
    tasks: []
  };
}

6. 将render方法中return的内容替换为如下内容，即我们需要的任务列表

public render(): React.ReactElement<IGraphTasksProps> {
    return (
      <List items={this.state.tasks}
            onRenderCell={this._onRenderTaskCell} />
    );
  }

7. 添加对单元格渲染的方法_onRenderTaskCell的实现

private _onRenderTaskCell(item: MicrosoftGraph.PlannerTask, index: number | undefined): JSX.Element {
    return (
      <div>
        <h3>{item.title}</h3>
        <strong>Due:</strong> {format( new Date(item.dueDateTime), 'MMMM DD, YYYY at h:mm A')}
      </div>
    );
  }

8. 最后在组件加载的时候调用Microsoft Graph获取Planner中当前用户的任务，继续向GraphTasks类添加下面的方法

public componentDidMount(): void {
    this.props.graphClient
      .api('/me/planner/tasks')
      .get((error: any, tasksResponse: any, rawResponse?: any) => {
        console.log('tasksResponse', tasksResponse);
        const plannerTasks: MicrosoftGraph.PlannerTask[] = tasksResponse.value;
        this.setState({ tasks: plannerTasks });
      });
  }

更新SPFx解决方案包对于任务的权限请求

打开package-solution.json文件，添加如下权限配置信息

{
  "resource": "Microsoft Graph",
  "scope": "Group.Read.All"
}

将版本改为1.0.0.2，"version": "1.0.0.2",。

测试解决方案

完成上述所有操作后，就可以进行编译部署了。

执行命令gulp build进行编译。

编译成功的话继续执行如下命令进行打包

gulp bundle --ship
gulp package-solution --ship

将生成的解决方案包上传到引用程序目录网站进行部署，部署成功后版本也变成了1.0.0.2。

到API Management中批准新增的权限请求。

在之前的测试网站中，对app进行更新。更新完成后我们就可以添加新开发的webpart进行测试了。

本系列的三篇文章，无非是Graph调用的接口不同，渲染生成的可视化效果不同，大体的开发过程都是一致的，在反复的动手实践中可以帮助我们加深对这方面技术的理解。