ClientSidePage: Set LayoutWebPartsContent property for updating site banner

[aakashbhardwaj619]

Category

• Enhancement
• Bug
• Question
• Documentation gap/issue

Version

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

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

Expected / Desired Behavior / Question

I'm creating a copy of an existing ClientSidePage using the new copyPage method and its working fine. But I need to update the LayoutWebPartsContent property of this new page for updating the site banner image and text above title. In the previous version on pnp (1.2.7) I was doing this using the page.getItem method. Since this method is private now, I'm unable to use it in the new version to get and update the page item properties. Is there any alternative to do that?

`const page = await ClientSidePage.fromFile(sp.web.getFileByServerRelativePath("oldPageUrl"));
let newPage = await page.copyPage(sp.web, "copy.aspx", "Copied Title");

//These update the page properties but not the banner image and text
newPage.bannerImageUrl = "newImageUrl";
newPage.bannerImageSourceType = 2;
newPage.layoutType = "FullWidthImage";
newPage.topicHeader = "High Risk Work";
newPage.showTopicHeader = true;

newPage.save(true)`

[patrick-rodgers]

We'll have a look again at the properties - but as a quick work around you can always case the object to any and call the method as it is still there. At run time there is no type checking anyway.

[aakashbhardwaj619]

Thanks for the suggestion. I just tried updating the page item properties using the list item getById method but somehow I'm unable to update the LayoutWebpartsContent property. The other properties' values update fine. The LayoutWebpartsContent value remains the same and neither is there any error being logged. This was working fine before the recent back end changes were made.

let itemLayoutWebpartsContent = oldPageItem["LayoutWebpartsContent"]; //OldPageItem is some old page item with a banner image and Text above title

sp.web.lists.getById(selectedListId).items.getById(newPageId).update({
    LayoutWebpartsContent: itemLayoutWebpartsContent, //Does not update
    ContentTypeId: newContentTypeId, //Works fine
    Title: "Updated Title" //Works fine
}).then(() => {
        console.log("Page item updated") //This is getting logged indicating no error
    }).catch(err => {console.log(err);});

[reshampal2010]

I am also facing similar problem, i have checked the value in "BannerImageUrl" from rest it's getting updated but image is not getting rendered.

[aakashbhardwaj619]

I just checked that I'm able to update the banner properties using spHttpClient and REST API /_api/sitepages/page endpoint (which is also being used in ClientSidePage's property setters like topicHeader, bannerImageUrl, etc.). Not sure why the update stopped working if updating through list item's properties. Anyway I think if the _layoutPart member is made public then this can be easily achieved to update the LayoutWebPartsContent property.

//Banner property format can be get using any page's maintenance mode
let layoutJson = `[{ 
      "id": "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788", 
	.
	. 
	.
    }]`;

//Updating topic header, banner image URL and LayoutWebPartsContent property
const body: string = JSON.stringify({
        '__metadata': {
          'type': 'SP.Publishing.SitePage'
        },
        'TopicHeader': subjectHeaderTopic,
        'BannerImageUrl': newPageBannerImage,
        'LayoutWebpartsContent': layoutJson
      });

      /**
       * Checkout the new page and update banner properties using REST API
       */
      props.context.spHttpClient.post(`${props.context.pageContext.web.absoluteUrl}/_api/sitepages/pages(${newPageItemId})/checkoutpage`, SPHttpClient.configurations.v1, {}).then((data: SPHttpClientResponse) => {
        console.log('Page checked out');
        if (data.ok) {
          props.context.spHttpClient.post(`${props.context.pageContext.web.absoluteUrl}/_api/sitepages/pages(${newPageItemId})`,
            SPHttpClient.configurations.v1,
            {
              headers: {
                'Accept': 'application/json;odata=nometadata',
                'Content-type': 'application/json;odata=verbose',
                'odata-version': '',
                'IF-MATCH': '*',
                'X-HTTP-Method': 'MERGE'
              },
              body: body
            }).then(() => {
              console.log("Page Banner updated");
            });
        }
      });

[patrick-rodgers]

Hi @aakashbhardwaj619 - circling back on this, the properties seem to work for me to set things such as topicHeader etc. Do you know what was different in the request we are sending and the one you sent? Are you setting all the extra metadata? That is something we aren't currently doing.

Edit:

If I set the banner through the UI the object ends up with a bunch of extra metadata, namely the values in "imageSources" and the "properties" section. We for sure aren't setting those currently - did you and then things worked?

[
    {
        "id": "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
        "instanceId": "cbe7b0a9-3504-44dd-a3a3-0e5cacd07788",
        "title": "Title area",
        "description": "Title Region Description",
        "serverProcessedContent": {
            "htmlStrings": {},
            "searchablePlainTexts": {},
            "imageSources": {
                "imageSource": "/sites/dev/SiteAssets/DSC_0020.JPG"
            },
            "links": {},
            "customMetadata": {
                "imageSource": {
                    "siteId": "80c0b48a-973d-4586-9c73-ecd5cecdd0e6",
                    "webId": "2cbc891c-749e-46fc-be2c-e5d53d80acff",
                    "listId": "1e23e9b8-4d99-45ef-9abd-0714ef64c2df",
                    "uniqueId": "c4d338bd-db73-4885-bd37-87580416babc"
                }
            }
        },
        "dataVersion": "1.4",
        "properties": {
            "title": "Section Test",
            "imageSourceType": 2,
            "layoutType": "FullWidthImage",
            "textAlignment": "Left",
            "showTopicHeader": false,
            "showPublishDate": false,
            "topicHeader": "",
            "authorByline": [],
            "authors": [],
            "webId": "2cbc891c-749e-46fc-be2c-e5d53d80acff",
            "siteId": "80c0b48a-973d-4586-9c73-ecd5cecdd0e6",
            "listId": "1e23e9b8-4d99-45ef-9abd-0714ef64c2df",
            "uniqueId": "c4d338bd-db73-4885-bd37-87580416babc",
            "translateX": 42.985611510791365,
            "translateY": 68.42105263157895,
            "altText": ""
        }
    }
]

[patrick-rodgers]

Did find a bug in setting banner image, we missed setting the value also in server processed content. So I think that is fixed now. All the other properties seem to be working as intended. This fix will be included in the next beta. I am also going to add a set banner image method to expose all those various values instead of using the properties.

[patrick-rodgers]

Closing this as fixed, will be in the next beta as well as release. Thanks for reporting the issue!

[patrick-rodgers]

Just published a new beta, v1.3.1-1, which contains the updates mentioned in this issue. Please give it a try if you have time and let us know if you see any further issues. Thanks!

[aakashbhardwaj619]

I just tested the new setBannerImage method. The method works fine for replacing the banner image of a page that already a different image set as the banner image. However, for a newly created page or a page that does not have an initial banner image set the method gives the error message: TypeError: Cannot convert undefined or null to object

I think this might be because we are deleting the below properties in bannerImageUrl method that are undefined initially before a banner image is set:

delete this._layoutPart.properties.webId;
delete this._layoutPart.properties.siteId;
delete this._layoutPart.properties.listId;
delete this._layoutPart.properties.uniqueId;

[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.