Creating items or updating items inside folder in sharepoint list in SPFX typescript using PNP or spghttp client

Question

I was trying to creating an SPFX solution using React where on submit of form I am saving multiple items inside a folder in SharePoint list.

I understood how to create folder inside SharePoint list using PNP but not able to create items inside the created folder.

Below is the code for creating folder in SharePoint list.

let list = sp.web.lists.getByTitle('TestList');
return list.items
  .add({
    Title: 'Dummy',
    FileSystemObjectType: 1,
    ContentTypeId: '0x0120'
  })
  .then(({ item }) => {
    return item.update({
      Title: 'New Folder',
      FileLeafRef: 'New Folder' 
    });
  }).then((f) => {console.log("Folder created")})

It would be really helpful if anyone has any idea how to create, update get item inside folder in SharePoint list.

Answer 1

You can use addValidateUpdateItemUsingPath to create list items inside folder.

Sample code:

const listPath = `${webRelativePath}/Lists/ListUri`;

sp.site.rootWeb.lists.getById(ListId).addValidateUpdateItemUsingPath([
    { FieldName: 'Title', FieldValue: 'TestItem' }
], `${listPath}/FolderPath`).then(console.log);

To get items inside folder, you can try filtering on FileDirRef property like given in below reference.

Sample code:

import { sp } from '@pnp/sp';
const listUri = '/sites/site/Lists/list';
sp.web.getList(listUri).items
    .filter(`FileDirRef eq '${listUri}/SubFolder01'`)
    .get().then(console.log);

Reference: Get All Items from a List subfolder