Pnpjs: Adding sections and web parts to the modern pages is not working

[Prakash-Ramasamy]

Category

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

Version

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

Please specify what version(s) of SharePoint you are targeting: [SPO]

Expected / Desired Behavior / Question

The sections and OOB web parts should be added in the newly created site pages.

Observed Behavior

I am loading the site in the Web object and adding the client side page using the web object. Once the page got created I am adding sections, columns & web parts to the page, finally I am saving the page. The created page was holding the sections and web parts which was added programmatically, but all of sudden the sections and the web parts not appearing. I am not getting any errors but the sections are not getting added for the newly created pages.

The page is getting created but the sections and web parts are not getting added.

Steps to Reproduce

The code I am using for creating page and adding web parts:

(async () => {
     var web = new Web("https://tenant.sharepoint.com/sites/test");
     const page = await web.addClientSidePage("test.aspx", "My site Page");
     const section = page.addSection();
     const column = section.addColumn(4);
     const column1 = section.addColumn(4);
     const column2 = section.addColumn(4);
     await page.save();
    })().then(_ => {
    }).catch(
      error => console.log(error)
    );

After the page.save() it is returning the item with empty CanvasContent1

item: Item
Approved_x0020_byId: null
Approved_x0020_byStringId: null
AuthorId: 10
BannerImageUrl: {Description: "/_layouts/15/images/sitepagethumbnail.png",
Url: "https://tenant.sharepoint.com/_layouts/15/images/sitepagethumbnail.png"}
CanvasContent1: null

Could you please help me with any suggestion/solution.

[simonagren]

@Prakash-Ramasamy it's like this, if nothing has changed.

When you create a client side page, either via UI or via code you there is no access to that page canvasSection data at first.

You have to make a manual edit and publish, after that you will see that there is actually data in the canvasContent, but only after a manual edit and publish.

The answer I got before from Microsoft is that this is by design.

@patrick-rodgers @koltyakov have you found any way around this?

[RodCoder]

Same here @simonagren, my code had been working since its first implementation and suddenly stopped. So I guess we can exclude the 'by design' hypothesis.

[RodCoder]

Additional info:

I tried to force the update process and can't manage to update the 'CanvasContent1' field.

let pageItem = await page.getItem();

pageItem.update({
CanvasContent1: page.toHtml()
})

The code doesn't error and if I specify other properties they get updated, but CanvasContent1 continues null.

[koltyakov]

I didn't take a look at this yet but it looks like the API changes as this functionality worked before and it's unlikely that some changes to the library introduced the issue.

UPD:

And I can confirm that the code which worked before now behaves as described in the issue. :(

[simonagren]

Maybe I'm mixing up what's what here.

This is an old answer I got from Pat Miller

https://github.com/SharePoint/sp-dev-docs/issues/2527

[UdayaMS]

I am also getting the same result, i tried in a different tenant and there the same code was working fine so i thought this might be a tenant related issue but on the next day it stopped working.

[Sartor87]

I can confirm the same issue here.

1. Inspected the Network tab - no issues found at first glance
2. Inspected browser console - no issues there as well
3. Wrapped code with try catch - not going into the catch statements

PNP Version is 1.2.9 and SPFX is 1.4.1

[olemp]

Reproduced. Looks like changes in the APIs for sure.

[patrick-rodgers]

OK, looks like there is something going on here - we'll have a look when we get a chance. Thanks!

[paulryan]

We were seeing this issue across 5+ tenants since Tuesday. During the last few hours it appears to have healed and we have been unable to reproduce any longer. Appears to be a transient MSFT issue.

[patrick-rodgers]

Well, I guess that is good news. Will try to test tomorrow some time.

[olemp]

Now working in one tenant, and not working yet in another. Guessing it will be working soon!

[koltyakov]

The same picture here: some tenants are "ok", some not. IMO, all we can do is wait until some stabilization.

[mpowney]

@patrick-rodgers are you able to provide any insight as to whether the behaviour described here is due to a roll out / change to the platform?

[robpearmain]

Is there any update on this, still not working on my tenant. I can create the page, but no sections or any other content are getting added

[patrick-rodgers]

No updates yet, just getting a chance to look into this. It appears there have been some changes to the generated markup for the webparts, sections, and columns so we need to adjust things.

[VelinGeorgiev]

@waldekmastykarz. FYI. If it is an issue with pnpjs, then might be an issue with the office 365 CLI as well. We will have to also coordinate and align if changes are needed.

[robpearmain]

Thanks for the update and all your hard work, much appreciated

[fredupstair]

I'm experiencing the same issue now on my own tenant.
No code changes, yesterday it was ok, today is ko.
:(

[wobba]

All was working in my tenant up until Saturday, now not working. But it works if I add webparts using PnP PowerShell. Weird behaviour indeed.

[jansenbe]

@wobba : can you compare page contents between a page created using PnP JS and on created using PnP PS. Both use different page API implementations

[olemp]

@jansenbe Seems like CanvasContent1 is not set with PnP JS, so we just get the default modern page with site activity etc.

[patrick-rodgers]

Just to provide an update here, the entire back end is changing for the pages and what we were doing no longer works. I am not 100% sure why it doesn't, for example I can load a page fine from CanvasContent1 and I update just the text of a text web part and send back the exact same markup and it no longer saves.

BUT after doing some digging there is a new api, however this is a bit more of a rewrite than I guess I had hoped for. So will do my best to get it into the version this Friday as I know it is affecting folks. If I can't, we will release a version immediately after I am able to get things working (in addition to the normal Friday release). Thanks for your patience on this, it has been a particularly busy few weeks for me.

Edit: This change will remove the fromHTML and toHTML methods as the new api doesn't need them. I don't think this should break anyone as those were really only used internally, but wanted to give a heads up. I will bump the minor version for the release with these changes, but not the major as it is unlikely folks would be using them directly. (if you are, you will be broken, but you were already broken due to the api change so its a wash).

[patrick-rodgers]

Progress on this today. Now can create pages (which wasn't ever broken) but can update sections and columns as well as insert client text webpart. Will work now on ensuring other webparts can be added and matching the old pnpjs api as best as possible. Hope disruption will be minimal but likely folks will have at least some small updates. Will do my best to update docs as well.

[patrick-rodgers]

Anyone have some availability today to test a beta version with the fixes in for this?

[olemp]

I can test tomorrow @patrick-rodgers

[RodCoder]

@patrick-rodgers I can give it a go!

[wobba]

@patrick-rodgers I can test.

[patrick-rodgers]

533 contains the updated code and you can test using beta versions @1.2.10-3. This will become 1.3 at release due to churn. IF you find issues please open a separate issue so we can correctly track resolution and ensure we don't miss anything in a thread. This represents a full re-write to a new API over 2 long days so certain I have not covered all the edge cases. Thanks again for the patience as we worked through this one.

[aakashbhardwaj619]

Hi @patrick-rodgers I was using the fromHtml and toHtml methods to copy all the page sections, columns and web parts from one page to another while provisioning. Even though these methods are working on 1 of my earlier created site collections, they have stopped working for any new site I'm creating in the same tenant (as mentioned by others in this thread). How should I proceed with achieving similar functionality using either the beta version or existing major version of pnp?

[wobba]

@aakashbhardwaj619 as @patrick-rodgers said, please log problems you see as new issues for easier tracking instead of commenting on this thread :)

[patrick-rodgers]

Have just pushed another beta 1.2.10-5 rolling up all the fixes for issues folks reported earlier. Thank you all for the help. If you get a chance please re-test and report any bugs in new issues. I am going to close this issue as I believe the core issue that started it to be addressed and fixes will be included in Friday's (March 8, 2019) release. Thanks!

[ravinleague]

We are having an issue where the page description and thumbnail image were not being preserved. Details below -

We are using add-pnpclientsidepage to add a page
and then set-pnpclientsidepage to set @{description=""}
in the browser, the page appeared to have the latest description updated. No issues here.
But then when you again edit the page from the UI, the recent description was lost!!!!
Anything we need to know here ?