如何使用 JavaScript 对象模型以编程方式将 SharePoint 客户端 Web 部件 (AppPart） 添

How to add SharePoint Client WebPart (AppPart) to a page programmatically using JavaScript Object Model?

本文关键字：部件 Web 客户端 AppPart SharePoint JavaScript 何使用 对象模型 方式 编程      更新时间：2023-09-26

有时需要以编程方式将AppPart（客户端Webpart）添加到SharePoint页面（特别是在我们处理SharePoint托管应用程序时）。那么如何使用 JSOM 实现此要求呢？

以下是实现上述要求的 JavaScript 代码：

开始之前你需要知道的事情-

  • WepPart Zone ID
  • 网络部件区域索引

现在，您需要客户端 Web 部件（apppart）的 XML 以编程方式添加它。

  • 若要获取此 Web 部件 XML，请手动将客户端 Web 部件添加到任何页面。
  • 编辑 Web 部件并允许导出数据。
  • 导出 Web 部件（系统将提示您保存 *.wepbart 文件）

复制导出的 Web 部件 XML 中的数据，并准备如下所示的字符串变量： 

var webPartXml = '<?xml version='"1.0'" encoding='"utf-8'"?>' +
        '<webParts>' +
  '<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">' +
    '<metaData>' +
      '<type name="Microsoft.SharePoint.WebPartPages.ClientWebPart, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />' +
      '<importErrorMessage>Cannot import this Web Part.</importErrorMessage>' +
    '</metaData>' +
    '<data>' +
      '<properties>' +
        '<property name="TitleIconImageUrl" type="string" />' +
        '<property name="Direction" type="direction">NotSet</property>' +
        ...
        ...
        ...
        '<property name="ChromeState" type="chromestate">Normal</property>' +
      '</properties>' +
    '</data>' +
  '</webPart>' +
'</webParts>';

现在使用以下代码使用 JavaScript 对象模型以编程方式添加客户端 Web 部件：

function addClientWebPart(pageName,webPartZoneID,webPartZoneIndex) {
var site = context.get_site();
var rootWeb = site.get_rootWeb();
context.load(rootWeb, 'ServerRelativeUrl');
context.load(site);
context.executeQueryAsync(function () {
    var rootUrl = rootWeb.get_serverRelativeUrl();
    pageFile = rootWeb.getFileByServerRelativeUrl(rootUrl + "/Pages/" + pageName + '.aspx');
    ////////////
    var limitedWebPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var webPartXml = '<?xml version='"1.0'" encoding='"utf-8'"?>' +
        '<webParts>' +
  '<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">' +
    '<metaData>' +
      '<type name="Microsoft.SharePoint.WebPartPages.ClientWebPart, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />' +
      '<importErrorMessage>Cannot import this Web Part.</importErrorMessage>' +
    '</metaData>' +
    '<data>' +
      '<properties>' +
        '<property name="TitleIconImageUrl" type="string" />' +
        '<property name="Direction" type="direction">NotSet</property>' +
        ...
        ...
        ...
        '<property name="ChromeState" type="chromestate">Normal</property>' +
      '</properties>' +
    '</data>' +
  '</webPart>' +
'</webParts>';
    var webPartDefinition = limitedWebPartManager.importWebPart(webPartXml);
    var webPart = webPartDefinition.get_webPart();
    limitedWebPartManager.addWebPart(webPart, webPartZoneID, webPartZoneIndex);
    context.load(webPart);
    context.executeQueryAsync(onAddAppPartQuerySucceeded, onAddAppPartQueryFailed);
 });
}
相关文章：