Q: Create visible folder in list with SPFx

Question

Having the following code in an application extension:

TypeScript
import {sp} from "@pnp/sp";

/*******************************************************************/
const shpList = sp.site.rootWeb.lists.getById(ListId);

shpList.rootFolder.folders.add('folder1');
/*******************************************************************/

I can create a folder inside a list. But I can only access it by typing the URL, it does not appear in the list view.

How can I make folders that are visible in the list?

Note that if I make a folder manually, it does appear.

Answer 1

Try using something like below:

const list = sp.web.lists.getById(ListId);
const folderName = 'My subfolder';
list.items.add({
  FileSystemObjectType: 1,
  ContentTypeId: '0x0120'
  FileLeafRef: folderName
}).then(console.log);

Reference: Folders and sub folders inside Generic List.

Answer 2

You'd need an item of type folder (i.e. set listItemCreateInfo.UnderlyingObjectType to 1) to do this. Compare here.

I'm not sure how to do this in pnpjs, though.