2

I'm looking for a way to create a document set in my document library from within SPFx web part. I'm using @microsoft/sp-http module to create HTTP requests.

Do I need to manually create some content types inside SP?

How can I determine content type ID of the document set?

What data do I need to put in the head and body of the request?

1

You need to make 2 HTTP requests to get it working.

1st request will get the content type Id of the document set content type present in the SharePoint document library.

2nd will make use of the content type id and then post the payload containing document set name and other necessary properties to the doc lib which will create the document set.

If you already know the content type id or you are sure that it wont change, then you can skip and "hard-code" it in your code.

The code to create it is as below, do make the changes as necessary as per your list names :

let ctEndpointUrl = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('Documents')/contenttypes?$select=Id&$filter=Name eq 'Document Set'`
this.context.spHttpClient.get(ctEndpointUrl,
      SPHttpClient.configurations.v1,
      {
        headers: {
          'Accept': 'application/json;odata=verbose',
          'odata-version': ''
        }
      }).then((response: SPHttpClientResponse) => {
        return response.json();
      }).then(ct => {

        // path of the SharePoint list
        let listUrl = `${this.context.pageContext.web.absoluteUrl}/Shared Documents`;

        //name of the document set that you want to create
        let documentSetname = "DocumentSetName101";

        // content type id of Document set present in sharepoint list
        // you can hard-code this and skip the above HTTP request if you know the content type id before hand
        let contentTypeId = ct.d.results[0]["Id"]["StringValue"];

        let options: ISPHttpClientOptions = { 
          method: "POST", 
          body: JSON.stringify(
            { 'Title' : documentSetname , 'Path' : listUrl }), 
          headers: 
            { "content-type": "application/json;odata=verbose", 
              "accept": "application/json;odata=verbose", 
              "slug": `${listUrl}/${documentSetname}|${contentTypeId}` 
            } 
          };

          // using the old _vti_bin/listdata.svc endpoint which expects the list's display name
          this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_vti_bin/listdata.svc/Documents`,
          SPHttpClient.configurations.v1, options).then((d:SPHttpClientResponse) => {
            d.json().then(res => {
              // success
              console.log(res);
            })                
          }).catch(e => {
            // error
            console.log(e);
          });
});

References - Creating document sets using PnP JS

Create document set using REST

  • Thank you, I will try it out soon and let you know. Do you know if I'm able to achieve the same thing using @pnp/js library? – Jarek Danielak Feb 5 at 13:43
  • 1
    no, its not supported at the moment because of SharePoint's own limitation unfortunately – Gautam Sheth Feb 5 at 13:45
  • Thank you @Gautam the request is working. If I add custom columns to my doc set content type, can I just put their values in request body as it is now for Title and Path? – Jarek Danielak Feb 6 at 11:38
  • I guess should work, haven't tried it though. Just ensure that you are using the correct column internal names – Gautam Sheth Feb 6 at 11:44
  • The solution worked great, thanks! I have problem uploading files to newly created doc set. Following URL doesn't seem to be correct, itgives me error 400: ${siteUrl}/_api/Web/Lists/getByTitle('${listTitle}')/${docSetName}/Files/Add(url='${file.name}', overwrite=true) – Jarek Danielak Feb 7 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.