如何使用 PnP JS 在 SharePoint Online 中以编程方式添加页面/Web 部件区域/Web 部件？答案

【问题标题】：How to add pages / web-part zones / web-parts programmatically in SharePoint online using PnP JS?如何使用 PnP JS 在 SharePoint Online 中以编程方式添加页面/Web 部件区域/Web 部件？
【发布时间】：2021-07-01 08:05:33
【问题描述】：

我已经创建了页面，然后使用以下函数以编程方式添加了 web 部件区域/web 部件，

function addWebPart(webUrl, pageUrl,webPartXml,zoneId,zoneIndex, Success,Error){
var context = new SP.ClientContext(webUrl);
var web = context.get_web();

var file = web.getFileByServerRelativeUrl(webUrl + pageUrl);
var webPartMngr = file.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDef = webPartMngr.importWebPart(webPartXml);
var webPart = webPartDef.get_webPart();
webPartMngr.addWebPart(webPart, zoneId, zoneIndex);

context.load(webPart);
context.executeQueryAsync(
  function() {
    Success(webPart);
  },
  Error
);

现在，我需要创建一个页面，然后使用 PnP JS 在 SharePoint Online 中以编程方式添加 Web 部件区域/Web 部件。

谁能帮我解决这个问题？

提前致谢。

【问题讨论】：

标签： sharepoint-online web-parts programmatically pnp-js webpartpage

【解决方案1】：

你可以参考这个问题：https://github.com/pnp/pnpjs/issues/557

使用PnPJS，需要在页面中抓取webpart xml，并添加到页面内容中。

import { sp } from "@pnp/sp";
const mynewpageContent =
`<%@ Page Inherits="Microsoft.SharePoint.Publishing.TemplateRedirectionPage,Microsoft.SharePoint.Publishing,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %> <%@ Reference VirtualPath="~TemplatePageUrl" %> <%@ Reference VirtualPath="~masterurl/custom.master" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>
<!--[if gte mso 9]><SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,Comments,PublishingStartDate,PublishingExpirationDate,PublishingContactEmail,PublishingContactName,PublishingContactPicture,PublishingPageLayout,PublishingVariationGroupID,PublishingVariationRelationshipLinkFieldID,PublishingRollupImage,Audience,PublishingIsFurlPage,PublishingPageImage,PublishingPageContent,SummaryLinks,SummaryLinks2,SeoBrowserTitle,SeoMetaDescription,SeoKeywords,RobotsNoIndex"><xml>
<mso:CustomDocumentProperties>
<mso:PublishingPageContent msdt:dt="string"></mso:PublishingPageContent>
<mso:ContentType msdt:dt="string">Welcome Page</mso:ContentType>
<mso:PublishingPageLayout msdt:dt="string">https://contoso.sharepoint.com/sites/site/_catalogs/masterpage/ArticleLeft.aspx, Article Left</mso:PublishingPageLayout>
</mso:CustomDocumentProperties>
</xml></SharePoint:CTFieldRefs><![endif]-->
<title>Home</title></head>`;

(async () => {
    
    const page = await sp.web.getFolderByServerRelativeUrl('/sites/site/pages').files.add('mynewpage.aspx', mynewpageContent, true)
    console.log('Done');

})()
    .catch(console.warn);

【讨论】：