使用 SharePoint Framework Extensions 对 SharePoint 进行扩展 Office 365 DevDays 上海章明, 黎俊乐微软 ( 中国 ) 有限公司

Size: px

Start display at page:

Download "使用 SharePoint Framework Extensions 对 SharePoint 进行扩展 Office 365 DevDays 上海章明, 黎俊乐微软 ( 中国 ) 有限公司"

毅涨胥
5 years ago
Views:

1 使用 SharePoint Framework Extensions 对 SharePoint 进行扩展 Office 365 DevDays 上海章明, 黎俊乐微软 ( 中国 ) 有限公司

2 介绍 SharePoint Framework 教程一目录 CONTENTS SharePoint Extensions 定制化教程二 Microsoft Graph 集成实验定制化你的 SharePoint 页面

3 先决条件基本概念 TypeScript SharePoint Framework Microsoft Graph 开发环境 Windows/Mac Visual Studio Code Node.js 运行环境 Office 365 账号

4 预期结果包括了解 SharePoint Framework Extensions 的使用场景开发, 测试和部署 SharePoint Framework Extensions 使用 SPFx Graph HTTP Client 为你的 Extension 提供支持不包括完整的 SharePoint Framework 介绍完整的 Microsoft Graph 的使用教程

5 配置开发环境安装 Node.js v6.x 打开 CMD, 运行下面命令安装所需工具 npm install g yo 新建项目文件夹, 生成 SPFx Extension 模板选择 Extension 和 Application Customizer 安装 npm 依赖可能需要比较长时间下载我们的 Demo Sample

6 重新定义 SharePoint 团队网站沟通网站

7 SharePoint 网站架构

8 Development Experiences SharePoint Framework 组件 Web Parts Extensions MS Graph Add-ins Client side Tools Package Deployment SP APIs CSOM

9 详细了解 SharePoint Framework

10 用户场景作为公司 IT 部门, 要建立一个 IT 培训网站建立一个 SharePoint 列表保存培训视频在培训列表的页面上, 显示下一个培训的时间和信息把每个培训视频显示成 iframe 播放器在培训视频的关联菜单, 添加一个显示链接二维码的按钮通过关联菜单, 把培训任务加到 Microsoft Planner 里面

11 演示

12 Extensions 类型 Application Customizer Field Customizer List View Command Set

13 Application Customizer 开发在 List 页面上, 显示下一个培训的时间和信息生成项目文件夹运行生成项目模板在提示对话中, 选择 Extension 和 Application Customizer 运行范例代码运行 gulp trust-dev-cert 信任本地开发证书, 保证链接可以通过 HTTPS 访问把测试页面链接填入 serve.json 文件, 运行 gulp serve, 注意弹框显示的 Test Message 添加业务逻辑比较当前时间和每个培训项目的时间, 得到下一次培训的信息使用页面占位符展示下一次培训的信息使页面更加好看使用 Module CSS 给元素添加样式使用 geticonclassname 函数添加 Fabric 图标

14 Field Customizer 开发把每个培训视频显示成 iframe 播放器添加项目到现有文件夹在已有的文件夹里, 运行添加新的项目在提示对话中, 选择 Extension 和 Field Customizer 选择 React 框架, 后面会使用到 Office UI Fabric React 简化我们的实现优化 Bundle 文件把两个项目打包到同一个 Bundle 中, 优化网络下载大小运行范例代码注意列表中格子的内容被动态地修改添加业务逻辑在 Channel9 的视频链接后面拼上 /player, 可以得到视频的 iframe 播放链接添加一个 React 组件, 把 iframe 播放器渲染到 DOM 上添加一个透明按钮, 配合 Fabric React Modal 组件, 控制视频弹框显示

15 List View Command Set 开发在培训视频的关联菜单, 添加一个显示链接二维码的按钮添加项目到现有文件夹在已有的文件夹里, 运行添加新的项目在提示对话中, 选择 Extension 和 List View Command Set 修改配置文件, 把生成的项目打包到已有的 Bundle 里面运行范例代码选中某一行后, 注意关联菜单上出现的新按钮更新按钮的声明在 manifest 文件中, 修改这些按钮的声明, 给他们配置一些好看的图标添加业务逻辑在选中并只选中一行的时候, 才显示这个按钮使用 QRCode 库生成二维码, 通过 SPFx Dialog 把它显示出来

16 Microsoft Graph 集成

17 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 到预先创建一个 Plan, 命名为 IT Training 它会自动创建一个同样名字的 Group 创建 Extension, 声明按钮, 添加业务逻辑运行添加一个新的 List View Command Set 在 Command Set 的 manifest 文件中, 添加一个 ADD_TASK 按钮的声明通过 Graph API 获取名字为 IT Training 的 Group 在这个 Group 下, 获取名字为 IT Training 的 Plan 给这个 Plan, 添加一个选中培训的 Task 以上任何步骤出错了, 就把错误信息显示出来

18 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 都可以正常工作

19 现在来动手实验一下吧! SharePoint Framework Extensions Application Customizer Field Customizer List View Command Set Microsoft Graph Azure Active Directory Users API Groups API OneDrive API

20 谢谢观看! 如需更多资料, 请访问我们的 GitHub Repo SharePoint Framework Git 微软北京 Ignite 大会 China-2016/PRO-B303

21 Office 365 DevDays

23 Framework 运行流程 SharePoint Service

24 Extensions 运行流程 SharePoint Service

导生和被辅导成员在辅导过程中的一些不足与可取点, 经过 25 分钟的讨论, 各小组派代表阐述了各方观点和改进方法然后, 为了改善导生辅导方法, 让辅导变得更有效率, 各院

导生和被辅导成员在辅导过程中的一些不足与可取点, 经过 25 分钟的讨论, 各小组派代表阐述了各方观点和改进方法然后, 为了改善导生辅导方法, 让辅导变得更有效率, 各院西北民族大学大学生学习援助中心助学工作简报 2016 年第 1 期 ( 总第十期 ) 中心要闻大学生学习援助中心举办国家计算机二级考试辅导活动 2016 年 3 月 14 日 19:30 至 21:30, 由大学生学习援助中心学业问询小组举办的国家计算机

使用 SharePoint Framework Extensions 对 SharePoint 进行扩展 Office 365 DevDays 上海 章明, 黎俊乐微软 ( 中国 ) 有限公司

使用 SharePoint Framework Extensions 对 SharePoint 进行扩展 Office 365 DevDays 上海章明, 黎俊乐微软 ( 中国 ) 有限公司