Setting banner image fails when setting it on the ClientSidePage

[MagtheRag]

Category

• Enhancement
• Bug
• Question
• Documentation gap/issue

Version

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

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

Expected / Desired Behavior / Question

When using addBannerImage the code fails. If I remove the addBannerImage() then the page gets created and everything works as it should. The error message is what follows:

Uncaught (in promise) Error: Error making HttpClient request in queryable [400] Bad Request ::> {"odata.error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":{"lang":"en-US","value":"Invalid request."}}}
    at new HttpRequestError (parsers.js?c5b5:130)
    at Function.eval (parsers.js?c5b5:145)
    at step (tslib.es6.js?b770:99)
    at Object.eval [as next] (tslib.es6.js?b770:80)
    at fulfilled (tslib.es6.js?b770:70)

Observed Behavior

I am not 100% sure but it seems like, when stepping through the code, that it fails somewhere when it tries to add the image to the layoutparts on the page.

Steps to Reproduce

First I uploaded a file by code in a document library in a sub folder within the same site and passed in the url to the function.

if (bannerImageFile) {
        var bannerUrl = bannerImageFile.data.ServerRelativeUrl;
        page.setBannerImage(bannerUrl);
 }

Then I hard coded with an image from the internet.

page.setBannerImage( 'https://cdn140.picsart.com/306147367001201.jpg?type=webp&to=min&r=1024');

It failed as well.

[patrick-rodgers]

Ok, thanks we will have a look and see if we can figure out what might be happening. The API we use isn't "public" as such and subject to breaking changes - perhaps something happened with how this works.

[patrick-rodgers]

It looks like the API now requires a server relative URL of the image - though I am not sure why your first snippet didn't work. I tested using the below successfully:

const page = await sp.web.addClientsidePage("BannerTest6", "My Title");

const file = await sp.web.getFileByServerRelativeUrl("/sites/dev/Shared Documents/file.png").select("ServerRelativeUrl")();

page.setBannerImage(file.ServerRelativeUrl);

await page.save();

This code then failed, showing that the image needs to be in the same site collection:

// this web is /sites/dev
const page = await sp.web.addClientsidePage("BannerTest6", "My Title");

page.setBannerImage("/Documents/file.png");

await page.save();

We need to update the docs to indicate the image file needs to exist in the same site collection as the page. Does this match what you are seeing?

[MagtheRag]

Thank you for your response.
I tried to hard code a relative url to an image that I know is at the root of the document library.
like this:
page.setBannerImage('/Shared Documents/analysis.jpg');

Sadly I still have the same problem though.
The site I am working with has /teams/sitename but that should not be a problem should it?
//M

[MagtheRag]

And I have an update:
I did use promise instead of using the await key word as all other functions are wrapped inside of a promise chain. Something like this:

const w = Web('https://server.sharepoint.com/teams/sitename');

return w().then(() => {
    // first add the page
    return CreateClientsidePage(w, ensurePageName(pageData.Title.value), pageData.Title.value);
});

Then the setBannerImage failed all the time no matter what URL I passed.
But when transforming it into the await pattern

  const page = await sp.web.addClientsidePage(
    ensurePageName(pageData.Title.value),
    pageData.Title.value,
  );

  page.setBannerImage('/teams/sitename/Shared Documents/analysis.jpg');

  await page.save();

Though I needed to have the whole relative url '/teams/sitename/Shared Documents/analysis.jpg' to make it work. Otherwise the setBannerImage would fail and complain about server relative url must be in use

[patrick-rodgers]

Yes, you need to use the ServerRelativeUrl to set the banner image. I have updated the docs to reflect this. Sounds like we are good to close this now?

[MagtheRag]

Yes closed it is !! Thanx

[patrick-rodgers]

Thanks!

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