在 SharePoint 中上传 Web 部件

为你的用户部署预配置的标准 SharePoint Web 部件。

适用于:SharePoint 2013 | SharePoint 外接程序 | SharePoint Online

你可以为用户上载预配置的标准 SharePoint Web 部件,以添加到其 SharePoint 网站。 例如,你可以上载预配置的以下 Web 部件:

  • 使用远程 web 上 JavaScript 文件的脚本编辑器 Web 部件。

  • 内容搜索 Web 部件。

本文讨论预配置脚本编辑器 Web 部件,以使用远程 Web 上的 JavaScript 文件执行 UI 自定义操作。 使用此解决方案可以执行以下操作:

  • 在 Web 部件中使用远程 Web 中的脚本文件,而不是主机 Web 的“网站资产”列表中的引用脚本。

  • 利用自定义网站预配过程部署预配置的 Web 部件。 例如,作为自定义网站设置过程的一部分,您可能想要在创建新网站时向用户显示网站使用策略信息。

  • 自动加载 Web 部件中针对你的用户筛选的内容。 例如,你的脚本文件可以显示从外部系统读取的本地新闻信息。

  • 允许用户使用“Web 部件库”中的 Web 部件将其他功能添加到其网站。

准备工作

若要开始,请从 GitHub 上的 Office365 开发人员模式和做法项目下载 Core.AppScriptPart 示例加载项。

使用 Core.AppScriptPart 外接程序

当你运行代码示例,并选择运行方案时:

  1. 选择返回站点

  2. 选择页面>编辑>插入>Web 部件

  3. 类别中,选择外接程序脚本部件,然后选择用户配置文件信息

  4. 选择添加

  5. 用户配置文件信息 Web 部件右上角的下拉列表中,选择编辑 Web 部件

  6. 选择编辑代码段

  7. 查看 <SCRIPT> 元素。

    请注意, src 属性链接到远程 Web 上的 JavaScript 文件。 The <SCRIPT> element is set by the Content property in the Core.AppScriptPartWeb\userprofileinformation.webpart, as shown in the following example. The JavaScript file linked to by the src attribute is Core.AppScriptPartWeb\Scripts\userprofileinformation.js. Userprofileinformation.js reads the current user's profile information from the user profile service, and then displays this information in the Web Part.

    注意

    本文中的代码按原样提供,不提供任何明示或暗示的担保,包括对特定用途适用性、适销性或不侵权的默示担保。

<property name="Content" type="string">&amp;lt;script type="text/javascript" src="https://localhost:44361/scripts/userprofileinformation.js"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;div id="UserProfileAboutMe"&amp;gt;&amp;lt;div&amp;gt;
</property>
  1. 选择“取消”

  2. 选择“保存”

注意

如果用户配置文件图像未显示,请打开 OneDrive for Business 网站,再返回到主机 Web。

在 Core.AppScriptPartWeb\Pages\Default.aspx 中,运行方案运行 btnScenario_Click,这将执行以下操作:

  1. 获取对 Web 部件库文件夹的引用。

  2. Uses FileCreationInformation to create the userprofileinformation.webpart file to upload from the provider-hosted add-in to the Web Part Gallery. 文件夹。Files.Add 方法将文件添加到 Web 部件库

  3. 检索 Web 部件库中的所有列表项,然后搜索 userprofileinformation.webpart。

  4. 如果找到 userprofileinformation.webpart,将 Web 部件分配给名为加载项脚本部件的自定义组。

protected void btnScenario_Click(object sender, EventArgs e)
        {
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                var folder = clientContext.Web.Lists.GetByTitle("Web Part Gallery").RootFolder;
                clientContext.Load(folder);
                clientContext.ExecuteQuery();

                // Upload the "userprofileinformation.webpart" file.
                using (var stream = System.IO.File.OpenRead(
                                Server.MapPath("~/userprofileinformation.webpart")))
                {
                    FileCreationInformation fileInfo = new FileCreationInformation();
                    fileInfo.ContentStream = stream;
                    fileInfo.Overwrite = true;
                    fileInfo.Url = "userprofileinformation.webpart";
                    File file = folder.Files.Add(fileInfo);
                    clientContext.ExecuteQuery();
                }

                // Update the group that the Web Part belongs to. Start by getting all list items in the Web Part Gallery, and then find the Web Part that was just uploaded.
                var list = clientContext.Web.Lists.GetByTitle("Web Part Gallery");
                CamlQuery camlQuery = CamlQuery.CreateAllItemsQuery(100);
                Microsoft.SharePoint.Client.ListItemCollection items = list.GetItems(camlQuery);
                clientContext.Load(items);
                clientContext.ExecuteQuery();
                foreach (var item in items)
                {
                    // Create new group.
                    if (item["FileLeafRef"].ToString().ToLowerInvariant() == "userprofileinformation.webpart")
                    {
                        item["Group"] = "add-in Script Part";
                        item.Update();
                        clientContext.ExecuteQuery();
                    }
                }

                lblStatus.Text = string.Format("add-in script part has been added to Web Part Gallery. You can find 'User Profile Information' script part under 'App Script Part' group in the <a href='{0}'>host web</a>.", spContext.SPHostUrl.ToString());
            }
        }

另请参阅