SOLVED

Using Type Script to create a modern page?

%3CLINGO-SUB%20id%3D%22lingo-sub-283903%22%20slang%3D%22en-US%22%3EUsing%20Type%20Script%20to%20create%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283903%22%20slang%3D%22en-US%22%3E%3CP%3EI%20want%20to%20create%20an%20SPFx%20webpart%20that%20can%20create%20a%20modern%20page.%20I've%20seen%20code%20snippets%20creating%20modern%20pages%2C%20but%20it's%20eighter%20PowerShell%20or%20C%23%20(CSOM%20or%20PnP).%20But%20I%20havn't%20seen%20any%20examples%20on%20how%20to%20use%20Type%20Script%20to%20create%20a%20modern%20page.%20Is%20it%20even%20possible%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-285988%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20Type%20Script%20to%20create%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-285988%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJust%20FYI%2C%20PnP%20JS-Core%20is%20deprecated%20in%20favor%20of%20the%20new%20PnPJs%20libraries.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20find%20exactly%20what%20you're%20trying%20to%20do%20(create%20pages%20and%20add%20components)%20here%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpnp.github.io%2Fpnpjs%2Fsp%2Fdocs%2Fclient-side-pages%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-285819%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20Type%20Script%20to%20create%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-285819%22%20slang%3D%22en-US%22%3E%3CP%3EOk%2C%20I%20got%20it.%20A%20bit%20embarrassing%2C%20but%20still...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20of%20course%20use%20the%20same%20PnP%20approach%20in%20TypeScript%20as%20in%20C%23.%20I%20just%20need%20to%20be%20aware%20of%20the%20async-await%20concept.%20This%20is%20how%20you%20do%20it%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20pnp%2C%7BClientSideText%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E%22sp-pnp-js%22%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3Easync%3C%2FSPAN%3E%3CSPAN%3E%20CreatePageAsync()%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%20%3CSPAN%3Econst%3C%2FSPAN%3E%3CSPAN%3E%20page%20%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Eawait%3C%2FSPAN%3E%3CSPAN%3E%20pnp.sp.web.addClientSidePage(%3C%2FSPAN%3E%3CSPAN%3E%22my%20page.aspx%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%20%3CSPAN%3Epage.addSection().addControl(%3C%2FSPAN%3E%3CSPAN%3Enew%3C%2FSPAN%3E%3CSPAN%3E%20ClientSideText(%3C%2FSPAN%3E%3CSPAN%3E%22my%20content%22%3C%2FSPAN%3E%3CSPAN%3E))%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%20%3CSPAN%3Eawait%3C%2FSPAN%3E%3CSPAN%3E%20page.save()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EAnd%20then%20you%20call%20the%20function%3A%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.CreatePageAsync()%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EFound%20the%20solution%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2FPnP-JS-Core%2Fwiki%2FWorking-With%3A-Client-side-Pages%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Ehere%3C%2FA%3E.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-283968%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20Type%20Script%20to%20create%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283968%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%26nbsp%3B%3CSPAN%3EJayakumar%26nbsp%3Band%20thanks%20for%20your%20reply.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20was%20a%20bit%20unclear%20in%20my%20question%2C%20sorry.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EWhat%20I%20mean%20is%20I%20need%20to%20create%20the%20page%20programmatically%2C%20add%20some%20information%20(basically%20a%20text%20webpart)%20and%20then%20save%20the%20page%2C%20thus%20rendering%20a%20new%20page%20in%20the%20Site%20Pages%20library.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EIn%20C%23%20you%20can%20use%20AddClientSidePage%2C%20call%20AddControl%20to%20add%20webparts%20and%20finally%20call%20Save.%20This%20is%20all%20PnP%20stuff.%20I'm%20looking%20for%20something%20equivalent%20for%20TypeScript.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-283957%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20Type%20Script%20to%20create%20a%20modern%20page%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-283957%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F118665%22%20target%3D%22_blank%22%3E%40Papageno%20Sweden%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYes%2C%20that's%20possible%20just%20by%20placing%20an%20anchor%20tag%20and%20href%20as%20below%20url%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7BwebAbsoluteUrl%7D%2F_layouts%2FCreateSitePage.aspx%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eor%20in%20typescript%20just%20write%20the%20code%20window.open(%22url%22)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%3C%2FP%3E%3CP%3EJayakumar%20B.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

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 to use Type Script to create a modern page. Is it even possible?

4 Replies

Hi @Papageno Sweden,

 

Yes, that's possible just by placing an anchor tag and href as below url

 

{webAbsoluteUrl}/_layouts/CreateSitePage.aspx

 

or in typescript just write the code window.open("url")

 

Thanks,

Jayakumar B.

 

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.

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 here.
best response confirmed by Papageno Sweden (Occasional Contributor)
Solution

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/