SPFx: Add a new item to existing List Folder (using pnp)

Question

Does anyone know how to add a new item to a List Folder in Sharepoint Framework?

In this way I can add the item to the list MyList:

let list = pnp.sp.web.lists.getByTitle("MyList");    

list.items.add({
      Title: "itemName"
      }).then(r => { 

      console.log(r);
})

But I need it being created inside the folder MyList\MyFolder.

I have tried retrieving the folder in this way:

var folder= sp.web.lists.getByTitle("MyList").rootFolder.folders.getByName("MyFolder");

but I cannot find a way to add items inside.

Answer 1

As Jackson wrote, it seems that it's not possibile to add an item to a List Folder with the sp-pnp-js library.

So, doing some searches I have found that it is possible to use addValidateUpdateItemUsingPath for this purpose:

const _spPageContextInfo=this.context.pageContext.legacyPageContext;
const webUrl = _spPageContextInfo.webAbsoluteUrl;

const listPath=webUrl+"/Lists/MyListInternalName";
const folderName="MyFolderName";

sp.site.rootWeb.lists.getByTitle("MyList").addValidateUpdateItemUsingPath([
    { FieldName: 'Column1', FieldValue: 'Value1'}, 
    { FieldName: 'Column2', FieldValue: 'Value2'}]    
  ,`${listPath}/${folderName}`).then(console.log);

Then, it took me a little bit of extra time to understand how to set the FieldValue for User fields while using addValidateUpdateItemUsingPath (in this case using the user ID -as usual- to retrieve the user was not working).
But I have found this way:

{FieldName: 'ColumnUser', 
FieldValue: JSON.stringify([{"Key": "i:0#.f|membership|"+"MyUserEmail"}])}

Answer 2

It seems that this operation is not implemented with the sp-pnp-js library.

You should be able to do it using a manual fetch request like this:

const listTitle = "List Title";
const folderTitle = "Folder Title";
const webUrl = _spPageContextInfo.webAbsoluteUrl;
const url = webUrl + "/_vti_bin/ListData.svc/" + listTitle.replace(/\s/g, "");
fetch(url, {
    method: 'POST',
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        Title: "Item Name",
        Path: webUrl + "/Lists/" + listTitle + "/" + folderTitle
    }),
}).then(console.log);

Answer 3

To respond to Leif about getting a new item's ID from the AddValidateUpdateItemUsingPath method (I don't have enough reputation yet), the newly created itemId is returned in the response. You'll get an array of values like this:

{
"value": [
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "FieldName": "Title",
        "FieldValue": "sample item title",
        "HasException": false,
        "ItemId": 0
    },
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "FieldName": "EventDate",
        "FieldValue": "4/22/2022 7:00 AM",
        "HasException": false,
        "ItemId": 0
    },
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "FieldName": "EndDate",
        "FieldValue": "4/22/2022 9:00 AM",
        "HasException": false,
        "ItemId": 0
    },
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "FieldName": "Description",
        "FieldValue": "sample description text",
        "HasException": false,
        "ItemId": 0
    },
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "FieldName": "Id",
        "FieldValue": "4130",
        "HasException": false,
        "ItemId": 0
    }
]

}

You need to filter the results for the one with "FieldName" equal to "Id", and then the "FieldValue" is the new item's ID.

You will only get a positive value for "Id" if item creation succeeds. If the "Id" field value is equal to "0", then there are errors somewhere in the other fields that prevented the item from being created.