Custom Client-side web part not added to a page

[Sartor87]

Related article: https://pnp.github.io/pnpjs/sp/client-side-pages.html

Category

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

Version

Versions tested with- 1.0.2 and 1.0.3

Expected / Desired Behavior / Question

Expecting that the web part is added to the provisioned page

Observed Behavior

Web part is not added for some reason. The same behaviour as described here is observed: #14

Steps to Reproduce

`btn.addEventListener("click", async evt => {

if (this._addingNewsArticle) {
  return;
}

this._addingNewsArticle = true;
$(btn).hide();
$(".adding-article").show();

evt.preventDefault();
let guid: Guid = Guid.newGuid();
const pageName = "NewPage_" + guid + ".aspx";
const page = await sp.web.addClientSidePage(pageName, "New Page");
const partDefs: ClientSidePageComponent[] = await sp.web.getClientSideWebParts();
const imageDef: ClientSidePageComponent[] = partDefs.filter(c => c.Id === "d1d91016-032f-456d-98a4-721247c305e8");
const imagePart: ClientSideWebpart = ClientSideWebpart.fromComponentDef(imageDef[0]);
const helloWorldPoCDef: ClientSidePageComponent[] = partDefs.filter((c: ClientSidePageComponent) => { return c.Name === "HelloWorld" || c.Id === "adc1b3d1-6511-48a5-9fba-6d34e231d694"; });
let helloWorldPoCPart: ClientSideWebpart = null;
if (helloWorldPoCDef.length > 0) {
  helloWorldPoCPart = ClientSideWebpart.fromComponentDef(helloWorldPoCDef[0]);
  console.log("HelloWorld found!");
} else {
  console.warn("HelloWorld NOT found!");
}

imagePart.setProperties({
  imageSource: this.context.pageContext.site.absoluteUrl + "/SiteAssets/SitePages/1/1863068161Fendi%20case.jpg"
});

const midSection = page.addSection();
midSection.order = 1;
const top = midSection.addColumn(12);
top.order = 1;
let text = top.addControl(new ClientSideText("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."));
let image = top.addControl(imagePart);
image.order = 2;
text.order = 1;

if (helloWorldPoCPart !== null) {
  let helloWorld = top.addControl(helloWorldPoCPart);
  helloWorld.order = 3;
}

await page.save();
await page.disableComments();

page.getItem().then((item: Item) => {
  item.update({
	"ContentTypeId": myCustomNewsContentTypeId,
	"PromotedState": 2
  }).then((pageItem) => {
	console.log("done creating new page");
	window.open(this.context.pageContext.site.absoluteUrl + "/SitePages/" + pageName);
  }).catch((err: any) => {
	console.error(err);
  });
}).catch((err: any) => {
  console.error(err);
});

});`

[patrick-rodgers]

What part is not working above? When you say same behavior, can you be more specific there are several things in the thread you linked. Thanks!

[Sartor87]

It is a custom web part - for the sake of simplicity I've created an OOB HelloWorld web part.

The web part is successfully found from the web part definitions and built with the code

helloWorldPoCPart = ClientSideWebpart.fromComponentDef(helloWorldPoCDef[0]);

However, when I add it to the page, it is rendered as a blank web part:
https://user-images.githubusercontent.com/23637375/36662564-aa582f8e-1ad6-11e8-8193-20ed1bead0c2.PNG

According to the discussions in the linked bug, I have modified the Component's ID without brackets. Note that I've tried both with the original definition (with brackets) and without brackets.

UPDATE 1: I've modified the ClientSidePageComponent object's Id property with toLowerCase() and it now appears. For now, I've implemented a method which fixes the Id of the web part

[patrick-rodgers]

So the guid from your custom component definition contains capital letters, meaning the id is as well. When you make them lower-case it then works? Can you share the code that "fixes" the issue? I'd like to get this resolved in the library if possible.

[Sartor87]

Sure, it is quick and dirty code, but here it is:

`
// code within another method
someMethod(): void {
const partDefs: ClientSidePageComponent[] = await sp.web.getClientSideWebParts();
const helloWorldPoCDef: ClientSidePageComponent[] = partDefs.filter(c => c.Name === "HelloWorld");
let fixWebPart: ClientSidePageComponent = this.fixClientSideWebPart(helloWorldPoCDef[0]);
let helloWorldPoC: ClientSideWebpart = ClientSideWebpart.fromComponentDef(fixWebPart);
}

private fixClientSideWebPart(webpart: ClientSidePageComponent): ClientSidePageComponent {
let fixedWebPartDefinition: ClientSidePageComponent = webpart;
fixedWebPartDefinition.Id = webpart.Id.replace("{", "").replace("}", "").toLowerCase();
console.log("ID set: " + fixedWebPartDefinition.Id);
return fixedWebPartDefinition;
}
`
I was thinking to match the id of the ClientSidePageComponent object with the ClientSidePageComponent -> manifest object (needs JSON.parse though)

[patrick-rodgers]

I can inside of the fromComponentDef method make these adjustments when I set the id. So perhaps that will be enough. Thanks for sharing the code.

[github-actions]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.