Adding a custom view to a list doesn't add all columns (Using PnP in Sharepoint Framework)

Question

I'm creating a list with PnP with an allready existing content type and then I'm trying to add a custom view with the columns from that content type.

The problem is that the view gets created but it only have some of the columns and it is random witch columns gets added when i run the function.

Can anybody tell me what is wrong?

Here's the code that creates the list with existing content type and adds the view.

Thanks in advance.

Answer 1

This is something that is unique to SharePoint list views and not in a good way unfortunately. Even I learnt it when I tried your code.

To add columns to the list views, they need to be done one after the other and not in parallel. Perhaps that is why you got tripped up.

So, you can use either of the below mentioned code to add your fields to the created list view:

1) Using then syntax:

spList.list.views.add("My New View 4", false, {
      RowLimit: 20,
      DefaultView: true,
      ViewQuery: "<OrderBy><FieldRef Name='Modified' Ascending='False' /></OrderBy>",
    }).then((v) => {

    v.view.fields.removeAll().then(() => {

        v.view.fields.add("AnniversariesEventTitle").then(() =>{
        v.view.fields.add("AnniversariesDate").then(() =>{
        v.view.fields.add("AnniversariesPerson").then(() =>{                
                    console.log("Done");
                });
            });
        });       
    });
});

2) Using batch endpoint, it wont work in 2013 AFAIK, but in SP Online, SP 2016 and upcoming SP 2019, it will work:

spList.list.views.add("My New View 4", false, {
      RowLimit: 20,
      DefaultView: true,
      ViewQuery: "<OrderBy><FieldRef Name='Modified' Ascending='False' /></OrderBy>",
    }).then((v) => {

        var spBatch = sp.web.createBatch();

        var fieldArray = ['AnniversariesEventTitle','AnniversariesDate','AnniversariesPerson'];

        v.view.fields.inBatch(spBatch).removeAll();
        fieldArray.forEach(fieldInternalName => {
            v.view.fields.inBatch(spBatch).add(fieldInternalName);
        });

        spBatch.execute()
        .then(console.log)
        .catch(console.log)    
});