(四)修改webpart并在SharePoint Online中调试
2018-02-28 22:42
330 查看
在上一篇博客(三)运行并调试webpart中我们使用SharePoint Framework创建了一个简单的客户端webpart并且在本地运行调试这个webpart,这篇博客将在此基础上介绍如何修改webpart的UI以及如何在SharePoint Online上下文中调试。
我在webpart的属性编辑其中添加了一个下拉菜单,用来选择webpart的背景颜色,webpart会根据选择,实时改变背景颜色:
下面进入代码,使用Code打开项目中的HelloWorldWebPart.ts文件,首先修改import部分引入下拉菜单控件:
红色下划线所标识的是新增代码,注意要在PropertyPaneTextField后面添加一个逗号作为分割,然后再添加下拉菜单控件"PropertyPeneDropdown"。在添加代码的时候会有自动提示,可以看到除了下拉菜单之外,SPFx还提供了很多其他控件例如button,checkbox,label等等:
然后在接口IHelloWorldWebPart中添加一个新的属性“webpartcolor”如下, 这个属性将会出现在webpart属性编辑器中供我们编辑,在展示webpart的时候,会根据这个属性的值设置webpart的背景颜色。
在接口中添加属性之后,我们就可以使用this.properties对象访问并使用这个属性,因为是修改webpart的颜色,所以我们使用这个属性在render()方法中指定webpart的颜色,只需要修改一行代码即可,将
<div class="${ styles.row }"> 修改为:
<div class="${ styles.row }" style="background-color:${this.properties.webpartcolor}"> 修改之后的render()方法代码如下,即使用css设置webpart的背景颜色为webpartcolor这个属性的值。
最后我们修改getPropertyPaneConfiguration()方法,将指定背景颜色的下拉菜单显示在webpart属性编辑器上:
不要忘记在PropertyPaneTextField语句和PropertyPaneDropdown之间添加一个逗号。PropertyPaneDropdown方法有两个参数,一个是指定与之关联的webpart属性,这里是我们之前定义的”webpartcolor“属性,另一个参数指定下拉菜单的属性,其中的label表示下拉菜单的名称,options表示下拉菜单的选项。
修改完成之后保存,gulp会自动应用我们的修改,自动刷新工作台,我们可以看到新的webpart可以根据下拉菜单的选择更改颜色:
以上就是添加一个新的控件,并控制webpart展示的过程。目前这个webpart只能在本地的工作台中运行和调试,如果需要与SharePoint Online交互,SPFx提供了一个运行在SharePoint Online上下文中的工作台,这个时候需要登陆Office 365,打开任意一个SharePoint Online的站点,使用如下url访问SharePoint Online在线工作台:https://sharepointurl/_layouts/15/workbench.aspx 其中红色的部分需要替换成SharePoint Online站点的url。在打开在线工作台之前一定要确保运行着gulp serve。与本地工作台一样,打开在线工作台之后,可以将我们的webpart添加上去:
打开属性编辑器,可以看到刚才所做的修改:
现在修改我们的webpart,在render()方法中添加一行代码如下,这行代码使用"this.context.pageContext.web.title"来读取当前站点的title属性,并将其显示在webpart上:
保存文件。本地工作台会自动刷新来反应代码的修改,因为没有站点这个上下文,所以显示的是:
在线工作台中,需要关闭页面,重新打开工作台页面,添加webpart,就可以看到当前站点的名字了:
可以看到在SharePoint Online的上下文中,webpart读取到了当前站点的title属性。在下一篇博客中我们会详细讲解如何在webpart中实现对SharePoint Online的增删查改操作。
我在webpart的属性编辑其中添加了一个下拉菜单,用来选择webpart的背景颜色,webpart会根据选择,实时改变背景颜色:
下面进入代码,使用Code打开项目中的HelloWorldWebPart.ts文件,首先修改import部分引入下拉菜单控件:
红色下划线所标识的是新增代码,注意要在PropertyPaneTextField后面添加一个逗号作为分割,然后再添加下拉菜单控件"PropertyPeneDropdown"。在添加代码的时候会有自动提示,可以看到除了下拉菜单之外,SPFx还提供了很多其他控件例如button,checkbox,label等等:
然后在接口IHelloWorldWebPart中添加一个新的属性“webpartcolor”如下, 这个属性将会出现在webpart属性编辑器中供我们编辑,在展示webpart的时候,会根据这个属性的值设置webpart的背景颜色。
在接口中添加属性之后,我们就可以使用this.properties对象访问并使用这个属性,因为是修改webpart的颜色,所以我们使用这个属性在render()方法中指定webpart的颜色,只需要修改一行代码即可,将
<div class="${ styles.row }"> 修改为:
<div class="${ styles.row }" style="background-color:${this.properties.webpartcolor}"> 修改之后的render()方法代码如下,即使用css设置webpart的背景颜色为webpartcolor这个属性的值。
最后我们修改getPropertyPaneConfiguration()方法,将指定背景颜色的下拉菜单显示在webpart属性编辑器上:
不要忘记在PropertyPaneTextField语句和PropertyPaneDropdown之间添加一个逗号。PropertyPaneDropdown方法有两个参数,一个是指定与之关联的webpart属性,这里是我们之前定义的”webpartcolor“属性,另一个参数指定下拉菜单的属性,其中的label表示下拉菜单的名称,options表示下拉菜单的选项。
修改完成之后保存,gulp会自动应用我们的修改,自动刷新工作台,我们可以看到新的webpart可以根据下拉菜单的选择更改颜色:
以上就是添加一个新的控件,并控制webpart展示的过程。目前这个webpart只能在本地的工作台中运行和调试,如果需要与SharePoint Online交互,SPFx提供了一个运行在SharePoint Online上下文中的工作台,这个时候需要登陆Office 365,打开任意一个SharePoint Online的站点,使用如下url访问SharePoint Online在线工作台:https://sharepointurl/_layouts/15/workbench.aspx 其中红色的部分需要替换成SharePoint Online站点的url。在打开在线工作台之前一定要确保运行着gulp serve。与本地工作台一样,打开在线工作台之后,可以将我们的webpart添加上去:
打开属性编辑器,可以看到刚才所做的修改:
现在修改我们的webpart,在render()方法中添加一行代码如下,这行代码使用"this.context.pageContext.web.title"来读取当前站点的title属性,并将其显示在webpart上:
保存文件。本地工作台会自动刷新来反应代码的修改,因为没有站点这个上下文,所以显示的是:
在线工作台中,需要关闭页面,重新打开工作台页面,添加webpart,就可以看到当前站点的名字了:
可以看到在SharePoint Online的上下文中,webpart读取到了当前站点的title属性。在下一篇博客中我们会详细讲解如何在webpart中实现对SharePoint Online的增删查改操作。
相关文章推荐
- sharepoint webpart 文档列表树 下载
- SharePoint WebPart 入门指南
- 开发自己的SQL2005报表查看SharePoint WebPart(二)
- SharePoint Online 创建门户网站系列之导航
- sharepoint webpart 问题总结
- Visual Studio 2005部署SharePoint WebPart失败的原因
- sharepoint VS 调试方法
- sharepoint Rss webpart 代理proxy 问题 [转自飞身社区]
- SharePoint WebPart 用户控件包装器 Hands-On Labs
- Erucy的SharePoint WebPart管理工具
- 调试 Windows SharePoint Services Workflow (进程调试)
- sharepoint potal server 开发 webpart中, toolpart用模态对话框传参
- SharePoint Framework系列(七)-构建第一个webpart(连接到SharePoint)
- SharePoint online Multilingual support - Development(1)
- Office 365 用户指引 16 ——SharePoint Online-文档协作
- SharePoint 2007 开发系列(14) 调试sharepoint web part
- SharePoint WebPart开发步骤
- 使用SharePoint Designer,将左侧的导航修改为Treeview
- SharePoint Online 创建门户网站系列之导航
- 微软在SharePoint Online里面去掉了Public Site功能