创建加载项部件以安装 SharePoint 加载项Create add-in parts to install with your SharePoint Add-in

使用加载项部件,可以直接在 SharePoint 网站页面中显示加载项用户体验。With add-in parts, you can show your add-in user experience right in the SharePoint website pages. 外接程序部件在 主机 Web 页中显示您使用 IFrame(也称为框架)指定的网页(通常为交互式表单或数据的动态显示)。An add-in part displays the webpage (which is typically an interactive form or a dynamic display of data) that you specify by using an IFrame (also referred to as a frame) in a page in the host web.

有关外接程序部件的更多背景,请参阅下列文章:For more background about add-in parts, see the following articles:

下图是 SharePoint 页中显示的加载项部件内容。The following figure shows how the add-in part content is displayed in a SharePoint page.

SharePoint 页中显示的加载项部件内容Add-in part content displayed in a SharePoint page

SharePoint 页中显示的应用程序部件内容


加载项部件通过 **ClientWebPart** 类实现,与所有 Web 部件一样,当用户安装了包含该部件的 SharePoint 加载项后,它便可在 Web 部件库中使用。An add-in part is implemented with the **ClientWebPart** class, and like all web parts it is a available in the Web Part Gallery after a user installs the SharePoint Add-in that includes it. 用户可以使用所提供的属性进一步自定义加载项部件。Your users can further customize the add-in part by using the properties that you provide. (有关加载项部件中可配置属性的示例,请参阅本文后面的**托管基本加载项部件的 SharePoint 页**一图。)(For an example of configurable properties in an add-in part, see the figure **SharePoint page hosting a basic add-in part** later in this article.) 本文中的示例使用在远程服务器上托管而不是 SharePoint 中托管的网页作为内容页。请记住,还可以使用 SharePoint 页来托管外接程序部件内容,如下文[其他常见方案外接程序部件](#SP15Createappparts_Nextsteps)中所述。The example in this article uses a webpage that is hosted on a remote server, not on SharePoint, as the content page. Keep in mind that you can also use SharePoint pages to host the add-in part content, as described in the [Other common scenarios add-in parts](#SP15Createappparts_Nextsteps) section later in this article.

使用本文中示例的先决条件Prerequisites for using the example in this article

若要按照此示例中的步骤操作,您需要:To follow the steps in this example, you need the following:

创建加载项部件以安装到主机 Web 上Create an add-in part to install on the host web

创建外接程序部件并安装到主机 Web 上需要执行以下几个任务:There are several tasks required to create and install your add-in part to the host web:

  1. 创建 SharePoint 外接程序和远程 Web 项目。Create the SharePoint Add-in and remote web projects.
  2. 添加外接程序部件内容的一个表单。Add a form for the add-in part content.
  3. 将加载项部件添加到 SharePoint 加载项项目。Add the add-in part to the SharePoint Add-in project.

完成任务后,当加载项部件处于编辑模式时,加载项部件外观应类似于下图。After completing the tasks, your add-in part should look similar to the following figure when the add-in part is in edit mode. 此处,我们可以看到 (1) SharePoint 页中显示的加载项内容,和 (2) 加载项部件自定义属性。Here we can see (1) the add-in content displayed in a SharePoint page, and (2) the add-in part custom properties.

托管基本加载项部件的 SharePoint 页SharePoint page hosting a basic add-in part

托管基本应用程序部件的 Web 部件页


添加加载项部件内容的一个表单Add a form for the add-in part content

  1. 按照开始创建提供程序托管的 SharePoint 加载项中的说明,创建一个提供程序托管的 SharePoint 加载项,但将该项目命名为 TestAppPartCreate a provider-hosted SharePoint Add-in as described in Get started creating provider-hosted SharePoint Add-ins, but name the project TestAppPart.

  2. 创建 Visual Studio 解决方案后,右键单击 Web 应用程序项目(而不是 SharePoint 加载项项目),并添加一个新的 Web 窗体,方法是选择“添加”**** > “新项目”**** > “Web”**** > “Web 表单”****。After the Visual Studio solution has been created, right-click the web application project (not the SharePoint Add-in project) and add a new Web Form by selecting Add > New Item > Web > Web Form. 将窗体命名为 AppPartContent.aspxName the form AppPartContent.aspx.

  3. 在 AppPartContent.aspx 文件中,将整个 HTML 元素及其子项替换为以下 HTML 代码。In the AppPartContent.aspx file, replace the entire HTML element and its children with the following HTML code. 保留 HTML 元素上的所有标记不变。Leave all the markup above the HTML element as it is. HTML 代码包含执行以下任务的 JavaScript:The HTML code contains JavaScript that performs the following tasks:

    • 从查询字符串中提取默认属性值Extracts the default property values from the query string
    • 显示属性值Renders the property values

    请注意,此代码需要查询字符串中的一些参数。外接程序部件通过查询字符串提供其自定义属性,因此网页可以使用这些属性。下一项任务解释如何声明自定义属性和如何使其能够用于外接程序网页。Note that the code expects some parameters in the query string. The add-in part provides its custom properties through the query string so the webpage can use them. The next task explains how to declare custom properties and how to make them available to the add-in webpage.

    <html>
        <body>
            <div id="content">
                <!-- Placeholders for properties -->
                String property: <span id="strProp"></span><br />
                Integer property: <span id="intProp"></span><br />
                Boolean property: <span id="boolProp"></span><br />
                Enumeration property: <span id="enumProp"></span><br />
            </div>
    
        <!-- Main JavaScript function, controls the rendering
            logic based on the custom property values -->
        <script lang="javascript">
            "use strict";
    
            var params = document.URL.split("?")[1].split("&amp;");
            var strProp;
            var intProp;
            var boolProp;
            var enumProp;
    
            // Extracts the property values from the query string.
            for (var i = 0; i < params.length; i = i + 1) {
                var param = params[i].split("=");
                if (param[0] == "strProp")
                    strProp = decodeURIComponent(param[1]);
                else if (param[0] == "intProp")
                    intProp = parseInt(param[1]);
                else if (param[0] == "boolProp")
                    boolProp = (param[1] == "true");
                else if (param[0] == "enumProp")
                    enumProp = decodeURIComponent(param[1]);
            }
    
            document.getElementById("strProp").innerText = strProp;
            document.getElementById("intProp").innerText = intProp;
            document.getElementById("boolProp").innerText = boolProp;
            document.getElementById("enumProp").innerText = enumProp;
        </script>
        </body>
    </html>
    

  4. 保存并关闭该文件。Save and close the file.

将加载项部件添加到 SharePoint 加载项项目Add the add-in part to the SharePoint Add-in project

  1. 右键单击 SharePoint 加载项项目(而不是 Web 应用程序项目),然后选择“添加” > “新项目” > “Office/SharePoint” > “客户端 Web 部件(主机 Web)”。Right-click the SharePoint Add-in project (not the web application project), and then select Add > New Item > Office/SharePoint > Client web part (Host Web). (“客户端 Web 部件”是“加载项部件”的别名。)("Client web part" is another name for "add-in part".)

  2. 将部件命名为基本加载项部件Name the part Basic add-in part.

  3. 在“指定客户端 Web 部件页”对话框中,选择“选择或输入现有网页的 URL”。In the Specify the client web part page dialog box, select Select or enter a URL for an existing webpage. 在下拉列表中选择“TestAppWebPart/AppPartContent.aspx”页。Select the TestAppWebPart/AppPartContent.aspx page in the drop-down list. (在做出选择后,页面 URL 可能会显示在框中,并且“TestAppWebPart”会被替换为 ~remoteAppUrl,并添加 {StandardTokens} 用于查询参数。)(After you've made your choice, the page URL may appear in the box with "TestAppWebPart" replaced by ~remoteAppUrl and with {StandardTokens } added for the query parameters.)

  4. 选择“完成”****。Select Finish.

  5. 在“解决方案资源管理器”**** 中右键单击“基本加载项部件”****,然后选择“属性”****。Right-click Basic add-in part in Solution Explorer, and select Properties.

  6. 在“属性”**** 窗格中,依次选择“自定义属性”**** 和标注(“...”****)按钮。In the Properties pane, select Custom properties and select the callout (...) button.

  7. 使用"自定义属性"对话框将四个自定义属性添加到外接程序部件。您必须为每个自定义属性设置五个特性。特性名称和值如表 1 中所列。使用以下过程创建属性。Use the Custom Properties dialog to add four custom properties to the add-in part. You have to set five attributes of each of the four custom properties. The attribute names and values are listed in Table 1. Create the properties using the following procedure.

    1. 选择“添加”****。Select Add.

    2. 在特性列表中,从表 1 中选择第一个特性:“DefaultValue”****。In the attribute list, select the first attribute from Table 1: DefaultValue.

    3. 设置值,例如 String default value。Set the value, for example, String default value.

    4. 选择下一个特性"Name"并设置其值,例如, strProp。Select the next attribute, Name, and set its value, for example, strProp.

    5. 继续设置“Type”****、“WebCategory”**** 和“WebDisplayName”**** 特性。Continue with the Type, WebCategory, and WebDisplayName attributes.

    6. 再次选择“添加”**** 并为表 1 中的所有四行重复此过程。Select Add again and repeat the process for all four rows of Table 1. 请勿关闭对话框。Do not close the dialog box.

      表 1. 加载项部件的自定义属性的特性Table 1. Attributes for the add-in part's custom properties

      DefaultValueDefaultValue NameName TypeType WebCategoryWebCategory WebDisplayNameWebDisplayName
      字符串默认值String default value strPropstrProp 字符串string 基本外接程序部件类别Basic add-in part category 字符串类型的属性A property of type string
      00 intPropintProp INTint 基本外接程序部件类别Basic add-in part category 整数类型的属性A property of type integer
      FALSEfalse boolPropboolProp 布尔boolean 基本外接程序部件类别Basic add-in part category 布尔类型的属性A property of type boolean
      1st1st enumPropenumProp 枚举enum 基本外接程序部件类别Basic add-in part category 枚举类型的属性A property of type enumeration

      此时,该对话框应如下所示:At this point the dialog should look like the following:

      ClientWebPart 的自定义属性对话框Custom Properties dialog for ClientWebPart

      客户端 Web 部件自定义属性对话框在左侧列出了 4 个属性,每个属性都在右侧设有 5 个属性。


  8. 依次选择“enumProp”属性、“EnumItems”特性和标注(“...”)按钮。Select the enumProp property, select the EnumItems attribute, and then select the callout ( ...) button.

  9. 使用"ClientWebPartEnumItem 集合编辑器"添加三个项目。您必须为每个项目设置两个特性。特性名称和值如表 2 中所列。使用以下过程创建属性。Use the ClientWebPartEnumItem Collection Editor to add three items. You have to set two attributes of each of the three. The attribute names and values are listed in Table 2. Create the properties using the following procedure.

    1. 选择“添加”****。Select Add.

    2. 在特性列表中,从表 2 中选择第一个特性:“Value”****。In the attribute list, select the first attribute from Table 2: Value.

    3. 设置特性的值,例如 1st。Set the value of the attribute, for example, 1st.

    4. 选择下一个特性“WebDisplayName”**** 并设置其值,例如,First option。Select the next attribute, WebDisplayName, and set its value, for example, First option.

    5. 再次选择“添加”**** 并为表 2 中的所有行重复此过程。Select Add again and repeat the process for all rows of Table 2.

      表 2. enumProp 属性的枚举项Table 2. Enum items of the enumProp property

      Value WebDisplayNameWebDisplayName
      1st1st 第一个选项First option
      2nd2nd 第二个选项Second option
      3rd3rd 第三个选项Third option

      完成后,该对话框应如下所示:The dialog should look like the following when you are finished:

      ClientWebPartEnumItem 集合编辑器ClientWebPartEnumItem Collection Editor

      客户端 Web 部件枚举项集合编辑器列出了 3 个项目,每个项目都具有值属性和 Web 显示名称属性。


    6. 选择“确定”关闭对话框,然后再次选择“确定”关闭“自定义属性”对话框。Select OK to close the dialog, and then select OK again to close the Custom Properties dialog.

  10. Visual Studio 在加载项部件的 elements.xml 文件中生成以下 XML 代码(为清楚起见,添加了换行符)。Visual Studio generates the following XML code in the elements.xml file of the add-in part (line breaks added for clarity). 请注意,ClientWebPart 元素的“Title”**** 特性设置为“基本加载项部件标题”,“Description”设置为“基本加载项部件说明”。Note that the Title attribute of the ClientWebPart element is set to "Basic add-in part Title" and the Description is set to "Basic add-in part Description". 从第一特性中删除“标题”一词,并将第二个特性替换为“基本加载项部件”。Delete the word "Title" from the first, and replace the second with a Basic add-in part.

  <?xml version="1.0" encoding="UTF-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ClientWebPart
        Name="Basic add-in part"
        Title="Basic add-in part Title"
        Description="Basic add-in part Description" >
        
        <!--  The properties are passed through the query string 
                using the following notation: _propertyName_
                in the Src property of the Content element.  
          -->
        <Content
            Src="~remoteAppUrl/AppPartContent.aspx?strProp=_strProp_&amp;amp;intProp=_intProp_&amp;amp;boolProp=_boolProp_&amp;amp;enumProp=_enumProp_"
            Type="html"/>
        <Properties>
            <Property
                Name="strProp"
                Type="string"
                RequiresDesignerPermission="true"
                DefaultValue="String default value"
                WebCategory="Basic add-in part category"
                WebDisplayName="A property of type string.">
            </Property>
            <Property
                Name="intProp"
                Type="int"
                RequiresDesignerPermission="true"
                DefaultValue="0"
                WebCategory="Basic add-in part category"
                WebDisplayName="A property of type integer.">
            </Property>
            <Property
                Name="boolProp"
                Type="boolean"
                RequiresDesignerPermission="true"
                DefaultValue="false"
                WebCategory="Basic add-in part category"
                WebDisplayName="A property of type boolean.">
            </Property>
            <Property
                Name="enumProp"
                Type="enum"
                RequiresDesignerPermission="true"
                DefaultValue="1st"
                WebCategory="Basic add-in part category"
                WebDisplayName="A property of type enum.">
                <EnumItems>
                    <EnumItem WebDisplayName="First option" Value="1st"/>
                    <EnumItem WebDisplayName="Second option" Value="2nd"/>
                    <EnumItem WebDisplayName="Third option" Value="3rd"/>
                </EnumItems>
            </Property>
        </Properties>
    </ClientWebPart>
</Elements>               


将加载项起始页设置为主机 Web 主页Set the add-in start page to the host web home page

  1. 接下来的示例 SharePoint 加载项不具有任何加载项 Web,其远程 Web 应用程序的存在只是为了托管表单。The continuing sample SharePoint Add-in doesn't have any add-in web, and its remote web application exists only to host the form. 没有此加载项的任何完整页面和沉浸式体验。There isn't any full page, immersive experience for this add-in. 因此,外接程序的起始页应设置为主机 Web 的主页。So the start page of the add-in should be set to the home page of the host web.

    要开始操作,请在“解决方案资源管理器”中选择 SharePoint 加载项项目(不是 Web 应用程序项目)并将“网站 URL”属性的值复制到剪贴板中,包括协议(例如,https://contoso.sharepoint.com)。To begin, select the SharePoint Add-in project (not the web application project) in Solution Explorer and copy the value of the Site URL property, including the protocol (for example https://contoso.sharepoint.com) into the clipboard.

  2. 打开外接程序清单,然后将 URL 粘贴到"起始页"框中。Open the add-in manifest, and then paste the URL into the Start Page box.

  3. 可以选择从 Web 应用程序项目中删除 Default.aspx 页面,因为它没有在 SharePoint 外接程序中使用。Optionally, you can delete the Default.aspx page from the web application project, because it is not used in the SharePoint Add-in.

生成和测试解决方案Build and test the solution

  1. 按 F5 键。Select the F5 key.

    备注

    按 F5 键时,Visual Studio 会生成解决方案并安装加载项,同时还会打开加载项的权限页面。When you select F5, Visual Studio builds the solution, installs the add-in, and opens the permissions page for the add-in.

  2. 选择“信任它”**** 按钮。Select the Trust It button.

  3. 从加载项部件库添加“基本加载项部件”****。Add the Basic add-in part from the Add-in Part gallery. For detailed instructions, see Add an Add-in Part to a page.For detailed instructions, see Add an Add-in Part to a page.

    在主机 Web 上安装加载项后,加载项部件库中就会提供“基本加载项部件”****。When the add-in is installed on the host web, the Basic add-in part is available in the Add-in Part gallery. 它应与下图非常相似。It should look a lot like the following figure.

    加载项部件库中的加载项部件Add-in part in the Add-in Part gallery

    Web 部件库中的基本应用程序部件


  4. 添加加载项部件后,选择标题“基本加载项部件”右侧的向下箭头,然后选择“编辑 Web 部件”。After you have added the add-in part, select the down arrow to the right of the title Basic add-in part, and then select Edit web part.

    应该会看到处于编辑模式的加载项部件。You should see the add-in part in edit mode.

  5. 打开“基本加载项部件类别”**** 并更改某些属性值。Open Basic add-in part category and change some of the property values.

  6. 选择“确定”**** 保存所做的更改,并确认属性已在加载项部件中更改。Select OK to save your changes and verify that the properties have changed in the add-in part.

  7. 结束调试会话后,如果暂时不会在此项目上再次使用 F5,最好在最后一次撤回 SharePoint 加载项,以确保测试加载项部件从主页中删除。When you end the debugging session, and you won't be using F5 again on this project for a while, it is a good practice to retract the SharePoint Add-in one last time to ensure that the test add-in part is removed from your home page. 右键单击 SharePoint 加载项项目并选择“撤回”****。Right-click the SharePoint Add-in project and select Retract.

解决方案疑难解答Troubleshooting the solution

问题Problem 解决方案Solution
外接程序部件没有显示任何内容。外接程序部件显示以下错误:"已取消到该网页的导航"。出现此错误是因为浏览器阻止了内容页。The add-in part does not display any content. The add-in part displays the following error: Navigation to the webpage was canceled. This error occurs because the browser has blocked the content page. 启用混合内容。Enable mixed content. 根据所使用的浏览器,该过程可能会有所不同:Internet Explorer 9 和 10 在页面底部显示以下消息:“只显示安全内容”****。The procedure might be different depending on the browser you are using: Internet Explorer 9 and 10 display the following message at the bottom of the page: Only secure content is displayed. 选择“显示所有内容”**** 来显示加载项部件内容。Select Show all content to display the add-in part content.

Internet Explorer 8 显示具有以下消息的对话框:“是否只查看安全传送的网页内容?”****Internet Explorer 8 shows a dialog box with the following message: Do you want to view only the webpage content that was delivered securely? 选择“否”**** 来显示加载项部件内容。Select No to display the add-in part content.

您也可以启用正在使用的 Internet 区域中的混合内容。对于大多数开发者而言,此 Intetrnet 区域是本地 Intranet。如果此情况不适用,请将您正在使用的 Internet 区域替换为“本地 Intranet”****。Alternatively, you can enable mixed content in the Internet zone that you are working on. For most developers the Internet zone is Local intranet. If this is not the case for you, substitute Local intranet for the Internet zone you are working on.

在 Internet Explorer 中,选择“工具”**** > “Internet 选项”****。In Internet Explorer, select Tools > Internet Options. 在“Internet 选项”**** 对话框中的“安全”**** 选项卡上,选择“本地 Intranet”****,然后选择“自定义级别”**** 按钮。In the Internet Options dialog box, on the Security tab, select Local intranet, and then select the Custom level button. 在“安全设置”**** 对话框中,启用“其他”**** 部分中的“显示混合内容”****。In the Security Settings dialog box, enable Display mixed content in the Miscellaneous section.

其他常见的方案外接程序部件Other common scenarios add-in parts

本文显示如何利用将远程网页用作内容页的自定义属性创建基本外接程序部件。您还可以探索以下有关外接程序部件的方案和详细信息。This article shows how to create a basic add-in part with custom properties using a remote webpage as the content page. You can also explore the following scenarios and details about add-in parts.

使用 SharePoint 页作为内容页Use a SharePoint page as the content page

大多数情况下,如果网页在响应中发送 X-Frame-Options HTTP 头,则该网页将无法在框架中显示。In most cases, a webpage can't be displayed in a frame if it sends an X-Frame-Options HTTP header in the response. 默认情况下,SharePoint 页包括 X-Frame-Options 头。By default, SharePoint pages include the X-Frame-Options header. 如果使用的是托管在加载项 Web 上的 SharePoint 网页,可能会遇到以下错误(如下图所示):“此内容无法在框架中显示”****。If you are using a SharePoint webpage hosted on the add-in web, you might run into the following error (shown in the following figure): This content cannot be displayed in a frame.

无法在框架中显示其内容的加载项部件Add-in part that can't display its content in a frame

无法在框架中显示其内容的加载项部件


请注意,当网页在框架中显示时,特定方案易受点击劫持攻击。Be aware that certain scenarios are susceptible to ClickJacking attacks when the webpages are displayed in a frame. 请仔细评估加载项部件方案,以确保不存在点击劫持攻击风险。Carefully evaluate your add-in part scenarios to make sure there is no risk of ClickJacking attacks.

如果加载项 Web 中托管的页面不易受点击劫持攻击,则可以使用 AllowFraming Web 部件抑制来自页面响应的 X-Frame-Options 头。If your page hosted on the add-in web is not susceptible to ClickJacking attacks, you can use the AllowFraming web part to suppress the X-Frame-Options header from your page's response. 以下示例代码显示如何在 SharePoint 页面上使用 AllowFraming Web 部件。The following code example shows how to use the AllowFraming web part on a SharePoint page. 将此标记复制到加载项 Web 上托管的页面中。Copy this markup into the page that is hosted on the add-in web. 将此标记放在页面中第一个 asp:content 元素的上方。Put it just above the first asp:content element in the page. 它不能为任何其他元素的子级。It should not be a child of any other element.

<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />

可以下载加载项部件代码示例使用加载项部件在主机 Web 中显示加载项 Web 内容,以展示如何将 SharePoint 页作为内容页。You can download an add-in part code sample Display add-in web content in the host web using an add-in part that shows how to use a SharePoint page as the content page.

调整加载项部件大小Resize the add-in part

如果您在外接程序部件中使用动态内容,则该内容的宽度和高度可能发生改变。由于内容的动态特性,它可能不适合框架。您也可能使用了过多的空间。若使用动态内容,则可能难以在您的外接程序部件声明中指定固定大小。不过,您可以调整框架的大小,以便与内容的宽度和高度相符。If you're using dynamic content in your add-in part, the content might change its width and height. Due to the dynamic nature of the content, it may not fit in the frame. You may also be using too much space. With dynamic content, it could be difficult to specify a fixed size in your add-in part declaration. However, you can resize the frame to fit the content's width and height.

可以使用内容网页中的 POST 消息来指定框架的大小。You can use POST messages from your content webpage to specify the frame's size. 以下 JavaScript 示例显示了如何发送 POST 消息以调整托管外接程序部件的框架的大小。The following JavaScript example shows you how to send a POST message to resize the frame in which your add-in part is hosted. 通常情况下,在您从页面调用的 JavaScript 文件的 JavaScript 方法中具有此消息。Typically, you would have this in a JavaScript method in a JavaScript file that you call from the page. 例如,页面可能有一个控件,用户可在该控件中指定外接程序部件窗口的大小。For example, the page could have a control in which the user specifies the size of the add-in part window. 然后会从控件的 onchange 处理程序调用自定义方法。The custom method is then called from onchange handler of the control.

有关动态调整大小的加载项部件的完整示例,请参阅代码示例:在 SharePoint 加载项中动态调整加载项部件大小For a full sample of an add-in part that dynamically resizes, see Code sample: Resize add-in parts dynamically in SharePoint Add-ins.

window.parent.postMessage("<message senderId={SenderId}>resize(120, 300)</message>", {hostweburl});

在上述示例中,呈现页面时,加载项部件代码将对页面的查询字符串自动设置 senderId 值。In the example above, the senderId value is set on the query string of the page automatically by the add-in part code when the page is rendered. 在请求调整大小时,页面只需从查询字符串中读取 SenderId 值并使用该值即可。Your page would just need to read the SenderId value off of the query string and use it when requesting a resize. 可以通过将 StandardTokensHostUrl 标记追加到加载项部件定义中的 Src 属性来检索查询字符串的主机 Web URL。You can retrieve the host web URL from the query string by appending the StandardTokens or HostUrl tokens to the Src attribute in your add-in part definition.

在加载项部件内容中使用 SharePoint 样式表Use the SharePoint style sheet in your add-in part content

由于加载项部件托管在 SharePoint 页面中,你可能希望让加载项部件内容看起来像是页面的一部分。Because your add-in part is hosted within a SharePoint page, you might want to make the add-in part content look like it is part of the page. 一个可以实现外观相似的方法是使用与托管加载项部件的 SharePoint 页面相同的样式类。One way to achieve a similar look and feel is to use the same style classes as the SharePoint page that is hosting the add-in part. 可以通过添加对加载项 Web 中的 defaultcss.ashx 文件的引用来使加载项部件可供 SharePoint 网站的样式表使用。You can make the SharePoint website's style sheet available to the add-in part by adding a reference to the defaultcss.ashx file from the add-in web.

有关如何在 SharePoint 加载项中引用 defaultcss.ashx 文件的说明,请参阅在 SharePoint 加载项中使用 SharePoint 网站样式表For an explanation on how to reference the defaultcss.ashx file in your SharePoint Add-ins, see Use a SharePoint website's style sheet in SharePoint Add-ins.

若要查看引用样式表的加载项部件,请下载代码示例:使用 coffeemaker 加载项部件显示远程网页内容To see an add-in part that references the style sheet, download the Code sample: Display remote webpage content using the coffeemaker add-in part.

当加载项部件处于编辑模式时进行检测Detect when the add-in part is in edit mode

用户可以编辑加载项部件以更改其属性。Users can edit the add-in part to change its properties. 例如,用户可能想要更改加载项部件的一个 AppearanceLayout 属性。For example, a user might want to change one of the add-in part's Appearance or Layout properties. 如果加载项部件处于编辑模式,你可能希望修改呈现逻辑或者阻止某些不必要的处理。If your add-in part is in edit mode, you might want to modify the rendering logic or prevent some unnecessary processing from happening. 例如,只要重新加载主机页面,外接程序部件就会调用后端数据库。Consider, for example, an add-in part that calls a backend database whenever the host page reloads. Changing an add-in part property value in edit mode causes a page reload, but you might not want the network call to be triggered in that case.Changing an add-in part property value in edit mode causes a page reload, but you might not want the network call to be triggered in that case. You can use the editMode token to detect if users are editing your add-in part.You can use the editMode token to detect if users are editing your add-in part.

若要使用 editMode 标记,请将查询字符串参数添加到外接程序部件声明中 Content 元素的 Src 属性中。To use the editMode token, add a query string parameter to the Src attribute of the Content element in the add-in part declaration.

<Content Src="content_page_url&amp;amp;editmode=_editMode_">
** _editMode_\*\* 标记让内容页可以判断外接程序部件是否处于编辑模式。如果外接程序部件处于编辑模式, *\*_editMode_\*\* 标记将解析为 1;否则解析为 0。The **_editMode_** token lets your content page determine if the add-in part is in edit mode. If the add-in part is in edit mode, the **_editMode_** token resolves to 1; otherwise, the token resolves to 0.

另请参阅See also