How to add multiple fields to SharePoint Online list using @pnp/sp single API call?

Question

I have created the SPFx web part for SharePoint Online. I have implemented functionality like If the user added the SPFx app to the SharePoint site the lists are automatically created while adding an app.

For that, I have created a list then created fields under that list and added those fields to the default view in SharePoint online using PnP JS. Below is the code snippet for the same,

// check if list is exists, if not then create a list
export const createCustomList = async () => {
    const listEnsureResult = await sp.web.lists.ensure("Custom List", "Custom List", 100);
    if (listEnsureResult.created) {
        this.createCustomListFields();       
    }
};

// create columns in sharepoint list and add columns to default view
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("Error in while adding columns", ex);
    }
}

I have used the below links as a reference,

I need to make separate API/PnPJS call to create a single column in the SharePoint list.

Also, I need to make separate API/PnPJS call to add that column to the default view in the SharePoint list

Is there any alternative to adding multiple fields to the SharePoint list in a single API/PnPJS call?

Is there any alternative to adding multiple fields to the SharePoint list default view in a single API/PnPJS call?

Thanks

score 1 · Answer 1 · answered Aug 24 '22 at 15:08

I'm using batching for this. Using batching, you can combine multiple calls into one. https://pnp.github.io/pnpjs/concepts/batching/

Assuming you are using the latest PNPJS (3.x, in version 2.x it will look a bit differently):

export const createCustomListFields = async () => {
    try {

        const [batched, execute] = sp.web.batched();

        batched.web.lists.getByTitle("Custom List").fields.addMultilineText("Body").then(...)
        batched.web.lists.getByTitle("Custom List").defaultView.fields.add("Body").then(...)
        batched.web.lists.getByTitle("Custom List").defaultView.fields.add("Date").then(...)

        await execute();
    }
    catch (ex) {
        console.log("Error in while adding columns", ex);
    }
}

Also, I'm adding fields using createFieldAsXml instead of add because add is quite limited in options. If you care about those additional options, of course :)

batched.web.lists.getByTitle("Custom List").fields.createFieldAsXml(....)

How to add multiple fields to SharePoint Online list using @pnp/sp single API call?

1 Answers1