Pnpjs: Unable to add custom web parts to a page

[raymondlittle100]

Category

• [ ] Enhancement
• [x ] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ 1.0.2 ]

Expected / Desired Behavior / Question

Ability to add custom web part to a column and have it render ok.

Observed Behavior

Web part is added to the page but the web part is blank because the web part Id doesn't match the one being added by @PnP

Steps to Reproduce

I have a custom web part deployed to my tenant which has a web part id of '4a28b74a-7d88-441b-807f-cc9c38049b48'. I have checked this against the solution deployed on the tenant. I have been able to add and configure an Embed web part as per the examples but when I add my custom web parts its fails you just get a blank web parts, see attached

I noticed when debugging all my custom web parts the part Ids are prefix and appended with '{' '}'. Once I create my part from the part definition the new part has these brackets. Once the part has been created from the definition if i then manually remove these and add the web part it works and the web parts are added to the page ok. I have attached a screen shot of a debug point showing the differences in the web part ids betwen the OOTB embed and one of my custom ones. Part indexes 27 and 28 are custom whereas part 2 is OOTB

[patrick-rodgers]

Can you share the code you are using? That will help us ensure we are testing what you are seeing as well. Thanks!

[raymondlittle100]

Sure, see below, any issue let me know. My code was abstracted a little so I've tried to combine it

ClientSidePage.fromFile(
this.props.spRest.web.getFileByServerRelativeUrl(
this.props.pageLocation)).then(page => {
// this can be cached on the client in production scenarios
const partDefs = this.props.spRest.web.getClientSideWebParts().then(parts =>
{
webPartId = "4a28b74a-7d88-441b-807f-cc9c38049b48";
// find the definition we want, here by id
//in the filter i had to wrap my web part GUID in brackets otherwise it doesn't find it
const partDef = parts.filter(c => c.Id.toLocaleLowerCase() === "{"+webPartId.toLowerCase()+"}");

  // optionally ensure you found the def
  if (partDef.length < 1) {
      // we didn't find it so we throw an error
      throw new Error("Could not find the web part");
  }

  // create a ClientWebPart instance from the definition

//part has web part GUID '{4a28b74a-7d88-441b-807f-cc9c38049b48}' not '4a28b74a-7d88-441b-807f-cc9c38049b48'
const part = ClientSideWebpart.fromComponentDef(partDef[0]);

  // set the properties on the web part. Here we have imported the ClientSideWebpartPropertyTypes module and can use that to type
  // the available settings object. You can use your own types or help us out and add some typings to the module :).
  // here for the embed web part we only have to supply an embedCode - in this case a youtube video.
  part.setProperties<any>({
    //removed web part settings but did have some here
  });

//this works but a blank web part is added and i think its because the part definition has the web part id property with the brackets so SP can't find the web part on the page
page.sections[sectionNumber].columns[columnNumber].addControl(part);

  page.save().then(result =>
  {
    console.log(result);
  })
});

});

[patrick-rodgers]

Thanks, will have a look

[patrick-rodgers]

Two questions:

1) Does your package-config.json in your webpart solution have the { and } within the id property? Trying to understand where they might be coming from.
2) You remove the brackets then call "addControl" and it works? If that is the case we can add code to ensure the id doesn't have them easily enough. In fact I am just adding this now.

Thanks.

[patrick-rodgers]

I think I have this fixed, accidentally lumped it in with a large PR moving over all the changes from sp-pnp-js. I'll leave this open as I am curious on understanding how this happened, i.e. why the difference.

[patrick-rodgers]

Fixed as part of #17

[raymondlittle100]

See screenshot of webpart manifest file and web part definition details in maintenancemode. Neither have {}.

To get it working I done the filter with {} to find the web part. Once i had the web part definition I created the web part from the definition and reset the new web part to have a web part id minus the {}. After i done this it works and renders on the page.

Happy to retest once the new version comes out.

[bva999]

Hi. I have the same problem. And temporary solution didn't help me....

[raymondlittle100]

I got the latest version 1.0.3 but still having the same issue. I got around it by doing the following

// find the definition we want, here by id
let partDef = webPartDefinitions.filter(c => c.Id.toLocaleLowerCase() === "{"+webPartId.toLowerCase()+"}");

/*if its null could be because of issue where some web parts start 
with '{' and some don't. So first try with '{' then without*/
if(partDef == null || partDef.length ==0)
{
  partDef = webPartDefinitions.filter(c => c.Id.toLocaleLowerCase() === webPartId.toLowerCase());
}

// optionally ensure you found the def
if (partDef.length < 1) {
    // we didn't find it so we throw an error
    throw new Error("Could not find the web part");
}

let partDefinition= partDef[0];

// create a ClientWebPart instance from the definition
let part:ClientSideWebpart = ClientSideWebpart.fromComponentDef(partDef[0]);

//web part from definition might have wrong GUID so reset to GUID without '{'
part.webPartId = webPartId;
if(webPartProperties != null)
{
part.setProperties(webPartProperties);
}

//add web part    
page.sections[sectionNumber].columns[columnNumber].addControl(part);

[bva999]

Thank you @raymondlittle100. In my case I found a second problem. In web part definitions collection, all my custom web parts have Id in UPPER case and this should be taken into account when you filter web part definitions. But when you add your web part, ID must be in lower case... It's work for me, with your solution ( {} ). All my web parts created by SharePoint Framework and in manifest have Ids in lowercase.... It's curious...

[veeramanx]

@raymondlittle100 thank you for sharing sample. it is working for me.