AddClientSidePage won't create pages correctly

[umaknow-jessica]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

I expect the function to create a modern page correctly.

Observed Behavior

When using the function addClientSidePage(pageName, title, listTitle), I get a 404 error for the following request : https://umaknow.sharepoint.com/sites/ADKTest16/_api/web/lists/getByTitle('Site%20Pages')/rootFolder/files('/sites/ADKTest16/SitePages/newPage.aspx')/listItemAllFields with the following error : code : -2147024894, System.IO.FileNotFoundException

The list with the title "Site Pages" does exist. The page is created but not correctly, here's what it looks like when I open it :

Steps to Reproduce

use the function pnp.sp.web.addClientSidePage("newPage.aspx", "New Page", "Site Pages")

[patrick-rodgers]

I think this is a duplicate of #784. We are taking a look at it, thanks.

Thank you for your interest in the sp-pnp-js library. We wanted to mention that this library is being deprecated in July, 2018 in favor of the new scoped pnpjs libraries. You should begin transitioning your existing projects when possible, or start new projects with the new libraries. Please see the transition guide for more details on migrating and be sure to let us know if you have any questions. Thanks!

[patrick-rodgers]

This is now fixed with the addition of the addClientSidePageByPath method. This method has also been added to the new libraries and I encourage you to transition. Thanks!

[umaknow-jessica]

Hi! I still experiment the same behavior with the addClientSidePageByPath method. My Pages list has more than 5000 items, could it cause a problem? Thank you!

[patrick-rodgers]

Can you share how you are calling the new method? Having more than 5000 items should be OK, but maybe. Is it the same error as above too that the list doesn't exist?

[umaknow-jessica]

Here's how I call the method: pnp.sp.web.addClientSidePageByPath(`${title}.aspx`, this._context.pageContext.list.serverRelativeUrl, title);

I still have the same error with the following request when calling the method : https://umaknow.sharepoint.com/sites/ADKTest16/_api/web/getList('/sites/ADKTest16/SitePages')/rootFolder/files('/sites/ADKTest16/SitePages/test3.aspx')/listItemAllFields

The page does exist, but it returns the same error from before when I open it.

[umaknow-jessica]

Hi! I found a solution to the issue, here's my fix:

public async addPage(pageName: string, listRelativePath: string): Promise<ClientSidePage> {
    await pnp.sp.web.getFolderByServerRelativeUrl(listRelativePath).files.addTemplateFile(`${listRelativePath}/${pageName}`, TemplateFileType.ClientSidePage);
    return ClientSidePage.fromFile(pnp.sp.web.getFileByServerRelativeUrl(`${listRelativePath}/${pageName}`));
}

const page = await this.addPage(`${title}.aspx`, this._context.pageContext.list.serverRelativeUrl);
await this.updatePage(pageId, {
    ContentTypeId: contentTypeId
    Title: title,
    ClientSideApplicationId: "b6917cb1-93a0-4b97-a84d-7cf49975d4ec"
});

The page needed to have the column ClientSideApplicationId to be functional. Also, this line was not functional to get the item, it returned the same error I experienced before:

const fileAddResult = await pnp.sp.web.getFolderByServerRelativeUrl(listRelativePath).files.addTemplateFile(`${listRelativePath}/${pageName}`, TemplateFileType.ClientSidePage);
fileAddResult.file.getItem(); //error, replaced with ClientSidePage.fromFile(pnp.sp.web.getFileByServerRelativeUrl(`${listRelativePath}/${pageName}`));

Thank you and have a great day!

[patrick-rodgers]

Going to re-close this as things appear working. Thanks! And remember this library will become unsupported in July, so recommend you begin migrating now to the new libraries.