（四）修改webpart并在SharePoint Online中调试

        在上一篇博客（三）运行并调试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的增删查改操作。