Office 365 DevDays

2017.11.4-6 | 上海

Office 365 DevDays

2017.11.4-6 | 上海

使用 SharePoint Framework Extensions对 SharePoint 进行扩展

章明，黎俊乐

微软（中国）有限公司

介绍

• SharePoint Framework

教程一

• SharePoint Extensions定制化

教程二

• Microsoft Graph 集成

实验

• 定制化你的 SharePoint 页面

目 录CONTENTS

先决条件

• TypeScript

• SharePoint Framework

• Microsoft Graph基本概念

• Windows/Mac

• Visual Studio Code

• Node.js开发环境

• Office 365 账号运行环境

预期结果

包括

✓了解 SharePoint Framework Extensions 的使用场景

✓开发，测试和部署SharePoint Framework Extensions

✓使用 SPFx Graph HTTP Client 为你的 Extension 提供支持

不包括

完整的 SharePoint Framework 介绍

完整的 Microsoft Graph 的使用教程

配置开发环境

• 安装 Node.js v6.x

• 打开 CMD，运行下面命令安装所需工具• npm install –g yo gulp @microsoft/generator-sharepoint

• 新建项目文件夹，生成 SPFx Extension 模板• yo @microsoft/sharepoint• 选择 Extension 和 Application Customizer• 安装 npm 依赖可能需要比较长时间

• 下载我们的Demo Sample• https://github.com/Shanghai2017/spfx-extensions

重新定义 SharePoint

团队网站 沟通网站

SharePoint 网站架构

SharePoint Framework 组件

Web Parts Extensions

Client side ToolsSP APIsPackage

Deployment

Exp

eri

en

ces

Develo

pm

en

t

CSOM

Add-ins MS Graph

详细了解SharePoint Framework

https://channel9.msdn.com/Events/Ignite/Microsoft-Ignite-China-2016/PRO-B303

用户场景

作为公司 IT 部门，要建立一个 IT 培训网站

•建立一个 SharePoint 列表保存培训视频

•在培训列表的页面上，显示下一个培训的时间和信息

•把每个培训视频显示成 iframe播放器

•在培训视频的关联菜单，添加一个显示链接二维码的按钮

•通过关联菜单，把培训任务加到 Microsoft Planner 里面

演示

Extensions 类型

Application

Customizer

List View Command Set

Field Customizer

Application Customizer 开发在 List 页面上，显示下一个培训的时间和信息

生成项目文件夹

•运行 yo @microsoft/sharepoint 生成项目模板

•在提示对话中，选择 Extension 和 Application Customizer

运行范例代码

•运行 gulp trust-dev-cert 信任本地开发证书，保证链接可以通过 HTTPS 访问

•把测试页面链接填入 serve.json 文件，运行 gulp serve，注意弹框显示的 Test Message

添加业务逻辑

•比较当前时间和每个培训项目的时间，得到下一次培训的信息

•使用页面占位符展示下一次培训的信息

使页面更加好看

•使用 Module CSS 给元素添加样式

•使用 getIconClassName 函数添加 Fabric 图标

Field Customizer 开发把每个培训视频显示成 iframe 播放器

添加项目到现有文件夹

•在已有的文件夹里，运行 yo @microsoft/sharepoint 添加新的项目

•在提示对话中，选择 Extension 和 Field Customizer

•选择 React 框架，后面会使用到Office UI Fabric React 简化我们的实现

优化 Bundle 文件

•把两个项目打包到同一个 Bundle中，优化网络下载大小

运行范例代码

•注意列表中格子的内容被动态地修改

添加业务逻辑

•在 Channel9 的视频链接后面拼上 /player，可以得到视频的 iframe 播放链接

•添加一个 React 组件，把 iframe 播放器渲染到 DOM 上

•添加一个透明按钮，配合 Fabric React Modal 组件，控制视频弹框显示

List View Command Set 开发在培训视频的关联菜单，添加一个显示链接二维码的按钮

添加项目到现有文件夹

• 在已有的文件夹里，运行 yo @microsoft/sharepoint 添加新的项目

• 在提示对话中，选择 Extension 和 List View Command Set

• 修改配置文件，把生成的项目打包到已有的 Bundle 里面

运行范例代码

• 选中某一行后，注意关联菜单上出现的新按钮

更新按钮的声明

• 在 manifest 文件中，修改这些按钮的声明，给他们配置一些好看的图标

添加业务逻辑

• 在选中并只选中一行的时候，才显示这个按钮

• 使用 QRCode 库生成二维码，通过 SPFx Dialog 把它显示出来

Microsoft Graph 集成

Microsoft Graph 集成通过关联菜单，把培训任务加到 Microsoft Planner 里面

使用 Graph Explorer 测试 API 的权限

• 使用到的 Graph 实例间的层次关系：Group > Plan > Task ，需要用到 Group.ReadWrite.All 权限

• SPFx Graph HTTP Client 提供了 User.Read.All、 Group.ReadWrite.All 和 Reports.Read.All 权限

创建运行所需的 Plan

• 到 https://tasks.office.com 预先创建一个 Plan，命名为 IT Training

• 它会自动创建一个同样名字的 Group

创建 Extension，声明按钮，添加业务逻辑

• 运行 yo @microsoft/sharepoint 添加一个新的 List View Command Set

• 在 Command Set 的 manifest 文件中，添加一个 ADD_TASK 按钮的声明

• 通过 Graph API 获取名字为 IT Training 的 Group。在这个 Group 下，获取名字为 IT Training 的 Plan。给这个 Plan，添加一个选中培训的 Task

• 以上任何步骤出错了，就把错误信息显示出来

SharePoint Extensions 生产环境部署把做好的炫酷功能发布给小伙伴尝试一次吧！

使用 Site Assets 作为 Bundle 的存放地址

•在 SharePoint 的 Site Assets 文件夹中，建立 spfx-extensions子文件夹

•更新 write-manifests.json文件，把 cdnBasePath的值更改为 spfx-extensions的访问链接

•运行 gulp --ship，把 ./temp/deploy文件夹下的 JavaScript 文件上传到 spfx-extensions 文件夹里

创建 App 并上传到 App Catalog

•在 element.xml 中定义 3 个 Extension 的入口配置

•运行 gulp package --production 生成 App 文件（后缀为 .sppkg）

•建立或打开 App Catalog，把 spfx-extensions.sppkg文件上传到上面

添加 App 并检查 Extension 工作正常

•在 IT Training 的 Site Contents 中，添加名为 spfx-extensions的 App

•在 Video 列表的设置页面，添加 SPFx Columns 组里面的 Video 列

•打开 Video 列表页面，检查 3 个 Extension 都可以正常工作

现在来动手实验一下吧！

SharePoint Framework Extensions

• Application Customizer

• Field Customizer

• List View Command Set

Microsoft Graph

• Azure Active Directory

• Users API

• Groups API

• OneDrive API

谢谢观看！如需更多资料，请访问我们的 GitHub Repo

https://github.com/Shanghai2017/spfx-extensions

SharePoint Framework Githttps://github.com/SharePoint/

2016微软北京Ignite大会

https://channel9.msdn.com/Events/Ignite/Microsoft-Ignite-China-2016/PRO-B303

Office 365 DevDays

Framework 运行流程SharePoint Service

Extensions 运行流程SharePoint Service