SPFx using @pnp/sp to create list

Question

I'm trying to create a custom list using @pnp/sp, in my routine I need to check if the list does exist, if it doesn't, them I will create the list and add the its columns.

The code below sometimes work, guess it is because sp.web.* methods are async, and it causes problems.

So, what is the correct way to 1) check for a particular list, 2) add the list if it doesn't exist, 3) add the fields to the list?

sp.web.lists.ensure("SliceBox").then( List => {    
    List.fields.getByTitle("Body").get().catch( f => {
        f.fields.addMultilineText("Body", 4, true, false, false, true);
    });

    List.fields.getByTitle("Link").get().catch( f => {
        f.fields.addUrl("Link", UrlFieldFormatType.Hyperlink);
    });

    List.fields.getByTitle("Visible").get().catch( f => {
        f.fields.addBoolean("Visible");
    });
})
.catch( err => {
    console.log("> Failure: ", err);
});

Doesn't matter if I try the very explicit way (see below) it will also fail:

sp.web.lists.ensure("SliceBox").then( List => {
    sp.web.lists.getByTitle("SliceBox").fields.getByTitle("Body").get().catch( f => {
        f.fields.addMultilineText("Body", 4, true, false, false, true);
    });        
    // ... shortened for brevity ...
})
.catch( err => {
    console.log("> Failure: ", err);
});

Lee · Answer 1 · 2018-07-05T06:35:01.910

0

My sample test code which works fine.

sp.web.lists.ensure("SliceBox").then( sliceBox => {                        
      sliceBox.list.fields.getByTitle("Visible").get().catch( f => {
        sliceBox.list.fields.addBoolean("Visible");
        alert('fieldAdded');
      });

  })

Update:

Try this:

sp.web.lists.ensure("SliceBox").then( sliceBox => {                        
      sliceBox.list.fields.getByTitle("Visible").get().catch( f => {
        sliceBox.list.fields.addBoolean("Visible").then(f =>{
          sliceBox.list.fields.getByTitle("Link").get().catch( f => {
            sliceBox.list.fields.addUrl("Link", UrlFieldFormatType.Hyperlink);
            alert('done');
        });
        })

      });

  })

edited Jul 05 '18 at 06:35

answered Jul 04 '18 at 07:13

Lee

5,305
1
6
12

Hi Lee, thanks for your help mate! it will fails as soon as you have several columns (it is like my own example above), where I try to add 3 columns, sometimes the routine add two columns, sometimes one column, and rarely the 3 columns. noted your example is exactly like mine above – Mr. Dr. Sushi Jul 04 '18 at 21:33
sorry if my original post was confusing, I noticed after reading your answer I had some typos on my code, so I fixed to make sure I don't mislead folks into the wrong direction :) – Mr. Dr. Sushi Jul 04 '18 at 21:42
it didn't work, instead it throws "Uncaught (in promise) Error: Error making HttpClient request in queryable: [404] at new processHttpClientResponseException (parsers.ts:15) at parsers.ts:75" - I got this error before with my own solutions - I think we can't provision an entire list (from scratch with multiple columns) on the fly, at least didn't find any examples of anybody sharing this on the web, thanks anyway mate! it was really neat! – Mr. Dr. Sushi Jul 05 '18 at 11:17
actually, reviewing the results after trying again, it partially worked, it added two columns but for some reason (see comment above) it didn't create the next columns, once I deleted the list and re-run my test, it added the list and then it got all the columns, on a third attempt, I removed one column, the procedure went to ignore the list and did not add any columns. There is must be a better way to deal with this type of request, I've come to realize that I'm trying to bend water here. – Mr. Dr. Sushi Jul 05 '18 at 11:32

SPFx using @pnp/sp to create list

1 Answers1