如何在SPFx应用中创建可复用的SharePoint Online列表模板

核心思路 #

通过SPFx的**功能（Feature）**打包列表模板定义，在应用安装时自动将模板部署到网站的列表模板库中，这样用户就能在新建列表时直接选择该模板，无需额外执行PowerShell命令。

具体实现步骤 #

1. 调整SPFx项目的包配置 #

打开项目根目录下的config/package-solution.json，确保features节点包含对应列表模板的Feature配置，设置作用域为Web（网站级），保证安装应用时在当前网站生效：

"features": [
  {
    "title": "自定义列表模板Feature",
    "description": "部署自定义列表模板至目标网站",
    "id": "你的Feature GUID",
    "version": "1.0.0.0",
    "scope": "Web",
    "assets": {
      "elementManifests": [
        "elements.xml",
        "schema.xml"
      ]
    }
  }
]

2. 完善Element.xml的模板定义 #

在elements.xml中添加ListTemplate元素，明确标记这是一个可复用的列表模板，配置关键属性：

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <!-- 定义可复用列表模板 -->
  <ListTemplate
    Name="CustomListTemplate"
    Type="10001" <!-- 自定义模板ID需大于10000，避免与系统模板冲突 -->
    BaseType="0" <!-- 0代表普通列表，1代表文档库 -->
    OnQuickLaunch="TRUE"
    SecurityBits="11"
    Sequence="100"
    DisplayName="我的自定义列表模板"
    Description="基于此模板创建带自定义字段的列表"
    Image="/_layouts/15/images/itgen.png"/> <!-- 可选：使用内置图标或自定义图标路径 -->

  <!-- 可选：安装应用时自动创建一个示例列表 -->
  <ListInstance
    Title="示例自定义列表"
    Description="使用自定义模板生成的示例列表"
    TemplateType="10001"
    Url="Lists/SampleCustomList"
    FeatureId="你的Feature GUID"/>
</Elements>

3. 确保schema.xml的正确性 #

schema.xml是列表的字段、视图、表单核心定义，需与ListTemplate的Type属性匹配，示例如下：

<List xmlns:ows="Microsoft SharePoint" Title="自定义列表" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/CustomList" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
  <MetaData>
    <ContentTypes>
      <ContentTypeRef ID="0x01"/>
    </ContentTypes>
    <Fields>
      <!-- 自定义字段示例 -->
      <Field ID="{你的字段GUID}" Type="Text" DisplayName="自定义字段" Required="FALSE" StaticName="CustomField" Name="CustomField"/>
    </Fields>
    <Views>
      <!-- 默认视图定义 -->
      <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="所有项目" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/15/images/generic.png" Url="AllItems.aspx">
        <ViewFields>
          <FieldRef Name="Title"/>
          <FieldRef Name="CustomField"/>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="ID"/>
          </OrderBy>
        </Query>
        <RowLimit Paged="TRUE">30</RowLimit>
      </View>
    </Views>
    <Forms>
      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"/>
      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"/>
      <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main"/>
    </Forms>
  </MetaData>
</List>

4. 打包并部署应用 #

• 执行gulp bundle --ship打包项目资源
• 执行gulp package-solution --ship生成.sppkg应用包
• 将生成的.sppkg文件上传至SharePoint应用目录（App Catalog）
• 在目标网站安装该应用，完成后进入网站内容 > 新建 > 列表，即可看到自定义的列表模板

关键注意事项 #

• 自定义模板ID必须大于10000，避免与系统内置模板ID冲突
• 若不需要自动创建示例列表，可直接移除ListInstance元素
• 模板图标可使用SharePoint内置图标路径，也可通过SPFx部署自定义图标后引用

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