Step by Step SharePoint开发 - 通过Microsoft Graph获取日历事件的客户端Webpart

本篇我们将编写一个获取日历事件的Webpart，我们将仍然使用上一篇中创建的SPFx解决方案，因此如果您还没有阅读看上一篇，请稍微花上10分钟的时间了解一下。传送门。

向SPFx解决方案添加事件组件

1. 打开CMD访问之前的解决方案目录
2. 执行命令yo @microsoft/sharepoint
   在提示中，还是选择WebPart和React，名称自己选，本示例填写为EventsList。
3. 为了方便处理日期，我们引入一个库，执行命令npm install date-fns --save
4. 执行code .，用VS Code打开项目

如果你是接着上一篇文章继续操作的话，可以看到在完成上述操作后，webparts文件夹下面多了我们刚才新建的eventsList文件夹。

更新事件Webpart

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

1. 打开文件EventsListWebPart.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<IEventsListProps> = React.createElement(
          EventsList,
          {
            graphClient: client
          }
        );
        ReactDom.render(element, this.domElement);
      });

实现GraphEventsList的React组件

1. 打开文件IEventsListProps.ts，仍然和前一篇一样，去掉默认的description属性，添加MSGraphClient属性

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

export interface IEventsListProps {
  graphClient: MSGraphClient;
}

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

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

export interface IEventsListState {
  events: MicrosoftGraph.Event[];
}

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

import { IEventsListState } from './IEventsListState';

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

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

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

export default class EventsList extends React.Component<IEventsListProps, IEventsListState> {

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

constructor(props: IEventsListProps) {
    super(props);
  
    this.state = {
      events: []
    };
  }

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

<List items={this.state.events}
          onRenderCell={this._onRenderEventCell} />

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

private _onRenderEventCell(item: MicrosoftGraph.Event, index: number | undefined): JSX.Element {
  return (
    <div>
      <h3>{item.subject}</h3>
      {format( new Date(item.start.dateTime), 'MMMM DD, YYYY h:mm A')} - {format( new Date(item.end.dateTime), 'h:mm A')}
    </div>
  );
}

8. 最后一步自然就是串联起来，在组件加载的时候调用Microsoft Graph获取当前用户的日历事件，继续向EventsList类添加下面的方法

public componentDidMount(): void {
  this.props.graphClient
    .api('/me/events')
    .get((error: any, eventsResponse: any, rawResponse?: any) => {
      const calendarEvents: MicrosoftGraph.Event[] = eventsResponse.value;
      console.log('calendarEvents', calendarEvents);
      this.setState({ events: calendarEvents });
    });
}

更新SPFx解决方案包对于事件的权限请求

打开package-solution.json文件，跟前一篇一样进行权限请求的配置，更新后的权限信息如下

"webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "Calendars.Read"
      }
    ],

这里我们再将版本稍微的修改一下，改为1.0.0.1，"version": "1.0.0.1",。

测试解决方案

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

执行命令gulp build进行编译。

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

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

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

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

在之前的测试网站中，对app进行更新。查看网站内容，点击我们的app的…菜单中的Detail查看，会提示新版本，点击按钮进行更新。

更新完成后我们就可以添加新开发的webpart进行测试了。