首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用PnP JS在SharePoint online中以编程方式添加页面/web部件区域/web部件?

PnP JS是一个用于与SharePoint Online进行交互的JavaScript库,它提供了一组简化的API,可以通过编程方式添加页面、Web部件区域和Web部件。下面是在SharePoint Online中使用PnP JS以编程方式添加页面、Web部件区域和Web部件的步骤:

  1. 首先,确保你已经安装了PnP JS库。你可以通过在你的项目中引入以下脚本来实现:
代码语言:txt
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/pnp-pnpjs/3.0.10/pnpjs.es5.umd.bundle.min.js"></script>
  1. 创建一个JavaScript文件,并在文件中编写以下代码:
代码语言:txt
复制
// 导入PnP JS库
import { sp } from "@pnp/sp";

// 设置SharePoint Online网站的URL
const siteUrl = "https://your-sharepoint-site-url";

// 使用PnP JS库连接到SharePoint Online网站
sp.setup({
  sp: {
    baseUrl: siteUrl,
  },
});

// 添加页面
function addPage() {
  // 使用PnP JS库的Pages API添加页面
  sp.web.lists.getByTitle("Site Pages").items.add({
    Title: "New Page",
    PageLayoutType: "Article",
  }).then((result) => {
    console.log("Page added successfully");
  }).catch((error) => {
    console.log("Error adding page: " + error);
  });
}

// 添加Web部件区域
function addWebPartZone() {
  // 使用PnP JS库的WebPartPages API添加Web部件区域
  sp.web.getFileByServerRelativeUrl("/SitePages/NewPage.aspx").getItem().then((item) => {
    item.getLimitedWebPartManager().addWebPartZone().then((result) => {
      console.log("Web part zone added successfully");
    }).catch((error) => {
      console.log("Error adding web part zone: " + error);
    });
  }).catch((error) => {
    console.log("Error getting page item: " + error);
  });
}

// 添加Web部件
function addWebPart() {
  // 使用PnP JS库的WebPartPages API添加Web部件
  sp.web.getFileByServerRelativeUrl("/SitePages/NewPage.aspx").getItem().then((item) => {
    item.getLimitedWebPartManager().importWebPart("<?xml version=\"1.0\" encoding=\"utf-8\"?><WebPart xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns=\"http://schemas.microsoft.com/WebPart/v2\"><Title>New Web Part</Title><FrameType>Default</FrameType><Description>New web part description</Description><IsIncluded>true</IsIncluded><ZoneID>WebPartZone1</ZoneID><PartOrder>1</PartOrder><FrameState>Normal</FrameState><Height /><Width /><AllowRemove>true</AllowRemove><AllowZoneChange>true</AllowZoneChange><AllowMinimize>true</AllowMinimize><AllowConnect>true</AllowConnect><AllowEdit>true</AllowEdit><AllowHide>true</AllowHide><IsVisible>true</IsVisible><DetailLink /><HelpLink /><HelpMode>Modeless</HelpMode><Dir>Default</Dir><PartImageSmall /><MissingAssembly>Cannot import this Web Part.</MissingAssembly><PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge><IsIncludedFilter /><Assembly>Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly><TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName><ContentLink xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /><Content xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\"><![CDATA[<div>Hello, world!</div>]]></Content><PartStorage xmlns=\"http://schemas.microsoft.com/WebPart/v2/ContentEditor\" /></WebPart>").then((result) => {
      console.log("Web part added successfully");
    }).catch((error) => {
      console.log("Error adding web part: " + error);
    });
  }).catch((error) => {
    console.log("Error getting page item: " + error);
  });
}

// 调用函数以添加页面、Web部件区域和Web部件
addPage();
addWebPartZone();
addWebPart();
  1. 将JavaScript文件上传到SharePoint Online网站的某个位置,例如“Site Assets”库。
  2. 在SharePoint Online网站中创建一个页面,并将页面的布局设置为“Article”。
  3. 编辑页面,并在页面中插入一个“Content Editor”Web部件。
  4. 在Web部件的“编辑Web部件”对话框中,将“内容链接”设置为JavaScript文件的URL,例如:
代码语言:txt
复制
~site/SiteAssets/add-page-webpart.js
  1. 保存页面并查看结果。你将看到一个新页面被添加到“Site Pages”库,并且在页面上有一个新的Web部件区域和一个Web部件。

这样,你就可以使用PnP JS在SharePoint Online中以编程方式添加页面、Web部件区域和Web部件了。请注意,以上代码仅为示例,你可以根据自己的需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券