如何通过@pnp/sp单次API调用为SharePoint Online列表添加多字段与视图列

我已为SharePoint Online开发了SPFx Web Part，实现了用户添加该应用到SharePoint站点时自动创建列表的功能。目前通过PnP JS创建列表后逐个创建字段并添加到默认视图，代码示例如下：

// 检查列表是否存在，不存在则创建
export const createCustomList = async () => {
    const listEnsureResult = await sp.web.lists.ensure("Custom List", "Custom List", 100);
    if (listEnsureResult.created) {
        this.createCustomListFields();        
    }
};

// 在SharePoint列表中创建列并添加到默认视图
export const createCustomListFields = async () => {
    try {
        await sp.web.lists.getByTitle("Custom List").fields.addMultilineText("Body");
        await sp.web.lists.getByTitle("Custom List").defaultView.fields.add("Body");
        await sp.web.lists.getByTitle("Custom List").fields.addBoolean("Date");
        await sp.web.lists.getByTitle("Custom List").defaultView.fields.add("Date");
        await sp.web.lists.getByTitle("Custom List").fields.addBoolean("Active");
        await sp.web.lists.getByTitle("Custom List").defaultView.fields.add("Active");
    }
    catch (ex) {
        console.log("添加列时出错", ex);
    }
}

当前每个字段的创建及添加到默认视图都需要单独发起API/PnPJS调用，请问：

1. 是否有办法通过单次API/PnPJS调用批量添加多个字段到SharePoint列表？
2. 是否有办法通过单次调用批量添加多个字段到列表默认视图？

解决方案 #

一、批量创建字段

可以使用PnP JS的createFieldsAsXml方法，传入包含多个字段定义的XML字符串数组，实现单次请求批量创建字段：

export const createCustomListFieldsBatch = async () => {
    const listTitle = "Custom List";
    const fieldsXml = [
        '<Field DisplayName="Body" Type="Note" Name="Body" />',
        '<Field DisplayName="Date" Type="Boolean" Name="Date" />',
        '<Field DisplayName="Active" Type="Boolean" Name="Active" />'
    ];
    
    try {
        await sp.web.lists.getByTitle(listTitle).fields.createFieldsAsXml(fieldsXml);
    } catch (ex) {
        console.log("批量创建字段出错", ex);
    }
};

二、批量添加字段到默认视图

通过视图的update方法一次性设置多个字段，只需一次调用即可完成批量添加：

export const addFieldsToDefaultViewBatch = async () => {
    const listTitle = "Custom List";
    const view = await sp.web.lists.getByTitle(listTitle).defaultView.select("ViewFields").get();
    const existingFields = view.ViewFields.results;
    // 过滤已存在的字段，避免重复添加
    const newFields = ["Body", "Date", "Active"].filter(field => !existingFields.includes(field));
    
    if (newFields.length > 0) {
        try {
            await sp.web.lists.getByTitle(listTitle).defaultView.update({
                ViewFields: [...existingFields, ...newFields]
            });
        } catch (ex) {
            console.log("批量更新视图字段出错", ex);
        }
    }
};

三、优化后的完整逻辑

将两个批量操作整合到列表创建流程中：

export const createCustomList = async () => {
    const listEnsureResult = await sp.web.lists.ensure("Custom List", "Custom List", 100);
    if (listEnsureResult.created) {
        await createCustomListFieldsBatch();
        await addFieldsToDefaultViewBatch();
    }
};

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