如何通过SPFx编码创建SharePoint查找列、站点页面并添加应用？

针对你在SPFx客户端Web部件中需要完成的三个需求，这里提供具体的实现思路和代码示例：

一、创建列表级查找列 #

核心思路 #

通过SharePoint REST API或PnPjs操作目标列表的字段集合，创建Lookup类型的列表列（直接绑定到指定列表，而非站点列）。

实现方式 #

1. 原生SPHttpClient调用REST API
   直接构造POST请求到目标列表的Fields端点，指定查找列的核心属性（源列表ID、显示名、关联字段等）。

   代码示例：

   private async createLookupColumn(targetListId: string, sourceListId: string, columnDisplayName: string): Promise<void> {
     const webUrl = this.context.pageContext.web.absoluteUrl;
     const restEndpoint = `${webUrl}/_api/web/lists(guid'${targetListId}')/fields`;
   
     // 构造查找列请求体
     const lookupFieldBody = {
       '__metadata': { 'type': 'SP.FieldLookup' },
       'Title': columnDisplayName,
       'FieldTypeKind': 7, // Lookup类型对应的枚举值
       'LookupList': sourceListId,
       'LookupField': 'Title', // 关联源列表的标题列，可按需修改
       'AllowMultipleValues': false,
       'EnforceUniqueValues': false
     };
   
     const requestHeaders = new Headers();
     requestHeaders.append('Accept', 'application/json;odata=nometadata');
     requestHeaders.append('Content-Type', 'application/json;odata=nometadata');
     requestHeaders.append('X-RequestDigest', this.context.formDigestValue);
   
     const requestOptions: ISPHttpClientOptions = {
       headers: requestHeaders,
       body: JSON.stringify(lookupFieldBody)
     };
   
     await this.context.spHttpClient.post(restEndpoint, SPHttpClient.configurations.v1, requestOptions);
   }
   

2. PnPjs简化调用
   如果项目已引入PnPjs，可直接使用fields.addLookup()方法，省去手动构造请求体的步骤：

   import { sp } from "@pnp/sp";
   
   private async createLookupColumnWithPnP(targetListId: string, sourceListId: string, columnDisplayName: string): Promise<void> {
     await sp.web.lists.getById(targetListId).fields.addLookup(columnDisplayName, sourceListId, "Title", false);
   }
   

二、创建站点页面并嵌入当前Web部件 #

这部分分两步执行：先创建Modern页面，再将当前Web部件添加到页面中。

1. 创建站点页面 #

通过Site Pages的REST端点创建Article或Home类型的Modern页面，返回页面ID用于后续操作。

代码示例：

private async createModernPage(pageTitle: string): Promise<string> {
  const webUrl = this.context.pageContext.web.absoluteUrl;
  const restEndpoint = `${webUrl}/_api/sitepages/pages`;

  const pageBody = {
    '__metadata': { 'type': 'SP.SitePages.SitePage' },
    'Title': pageTitle,
    'PageLayoutType': 'Article', // 可选值：Article、Home
    'ContentTypeID': '0x0101009D1CB255DA76424F860D91F20E6C4118' // Modern页面的内容类型ID
  };

  const requestHeaders = new Headers();
  requestHeaders.append('Accept', 'application/json;odata=nometadata');
  requestHeaders.append('Content-Type', 'application/json;odata=nometadata');
  requestHeaders.append('X-RequestDigest', this.context.formDigestValue);

  const requestOptions: ISPHttpClientOptions = {
    headers: requestHeaders,
    body: JSON.stringify(pageBody)
  };

  const response = await this.context.spHttpClient.post(restEndpoint, SPHttpClient.configurations.v1, requestOptions);
  const pageData = await response.json();
  return pageData.Id; // 返回页面ID用于添加Web部件
}

2. 将当前Web部件嵌入页面 #

获取当前Web部件的清单信息和属性，构造WebPart XML，调用页面的AddWebPart接口完成嵌入。

代码示例：

private async addCurrentWebPartToPage(pageId: string): Promise<void> {
  const webUrl = this.context.pageContext.web.absoluteUrl;
  const restEndpoint = `${webUrl}/_api/sitepages/pages(${pageId})/AddWebPart`;

  // 获取当前Web部件的清单和属性
  const wpManifest = this.context.manifest;
  const wpProperties = this.properties;

  // 构造WebPart XML
  const webPartXml = `<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns="http://schemas.microsoft.com/WebPart/v3">
  <Assembly>${wpManifest.id}, Version=${wpManifest.version}, Culture=neutral, PublicKeyToken=null</Assembly>
  <TypeName>${wpManifest.componentType}</TypeName>
  <Title>${wpManifest.title.default}</Title>
  <FrameType>None</FrameType>
  <Properties>${JSON.stringify(wpProperties)}</Properties>
</WebPart>`;

  const requestHeaders = new Headers();
  requestHeaders.append('Accept', 'application/json;odata=nometadata');
  requestHeaders.append('Content-Type', 'application/json;odata=nometadata');
  requestHeaders.append('X-RequestDigest', this.context.formDigestValue);

  const requestOptions: ISPHttpClientOptions = {
    headers: requestHeaders,
    body: JSON.stringify({ webPartXml })
  };

  await this.context.spHttpClient.post(restEndpoint, SPHttpClient.configurations.v1, requestOptions);
}

三、关键注意事项 #

• 权限要求：当前用户必须拥有目标列表的编辑权限（创建列）和站点页面库的编辑权限（创建页面、添加Web部件），SPFx会以当前用户身份执行操作。
• 错误处理：实际代码中要添加try/catch块，处理列表不存在、权限不足、请求超时等异常情况。
• PnPjs优势：使用PnPjs可以大幅简化代码，减少REST请求的构造工作，同时提供更友好的类型提示。

内容的提问来源于stack exchange，提问作者thedeepponkiya