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';
  1. 向下找到render方法,替换为以下代码,创建一个Microsoft Graph客户端实例。
this.context.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
  const element: React.ReactElement = 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;
}
  1. 在components文件夹下创建一个用于跟踪组件状态的接口IGraphTasksState.ts并添加以下代码
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export interface IGraphTasksState {
  tasks: MicrosoftGraph.PlannerTask[];
}
  1. 打开文件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';
  1. 往下找到GraphTasks类,将空参数{}替换为State接口IGraphTasksState
export default class GraphTasks extends React.Component {
  1. 在render方法上面添加构造函数
constructor(props: IGraphTasksProps) {
  super(props);

  this.state = {
    tasks: []
  };
}
  1. 将render方法中return的内容替换为如下内容,即我们需要的任务列表
public render(): React.ReactElement {
    return (
      
    );
  }
  1. 添加对单元格渲染的方法_onRenderTaskCell的实现
private _onRenderTaskCell(item: MicrosoftGraph.PlannerTask, index: number | undefined): JSX.Element {
    return (
      

{item.title}

Due: {format( new Date(item.dueDateTime), 'MMMM DD, YYYY at h:mm A')}
); }
  1. 最后在组件加载的时候调用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中批准新增的权限请求。
Step by Step SharePoint开发 - 通过Microsoft Graph获取Planner任务的客户端Webpart_第1张图片
在之前的测试网站中,对app进行更新。更新完成后我们就可以添加新开发的webpart进行测试了。
Step by Step SharePoint开发 - 通过Microsoft Graph获取Planner任务的客户端Webpart_第2张图片
本系列的三篇文章,无非是Graph调用的接口不同,渲染生成的可视化效果不同,大体的开发过程都是一致的,在反复的动手实践中可以帮助我们加深对这方面技术的理解。

你可能感兴趣的:(O365,Microsoft,Graph)