Forum Discussion

Copper Contributor

Nov 08, 2018

Solved

Using Type Script to create a modern page?

I want to create an SPFx webpart that can create a modern page. I've seen code snippets creating modern pages, but it's eighter PowerShell or C# (CSOM or PnP). But I havn't seen any examples on how t...

Thomas Berman
Nov 13, 2018
Hi,

Just FYI, PnP JS-Core is deprecated in favor of the new PnPJs libraries.

You can find exactly what you're trying to do (create pages and add components) here:

https://pnp.github.io/pnpjs/sp/docs/client-side-pages/

PapagenoSweden

Copper Contributor

Nov 08, 2018

Hi, Jayakumar and thanks for your reply.

I was a bit unclear in my question, sorry.

What I mean is I need to create the page programmatically, add some information (basically a text webpart) and then save the page, thus rendering a new page in the Site Pages library.

In C# you can use AddClientSidePage, call AddControl to add webparts and finally call Save. This is all PnP stuff. I'm looking for something equivalent for TypeScript.

PapagenoSweden

Copper Contributor

Nov 13, 2018

Ok, I got it. A bit embarrassing, but still...

I can of course use the same PnP approach in TypeScript as in C#. I just need to be aware of the async-await concept. This is how you do it:

import pnp,{ClientSideText} from "sp-pnp-js";

protected async CreatePageAsync() {

const page = await pnp.sp.web.addClientSidePage("my page.aspx");

page.addSection().addControl(new ClientSideText("my content"));

await page.save();

}

And then you call the function:

this.CreatePageAsync();

Found the solution https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Client-side-Pages.

Thomas Berman
Iron Contributor
Nov 13, 2018
Hi,

Just FYI, PnP JS-Core is deprecated in favor of the new PnPJs libraries.

You can find exactly what you're trying to do (create pages and add components) here:

https://pnp.github.io/pnpjs/sp/docs/client-side-pages/