import * as React from 'react' ; import styles from './SpfxPnpPageprovisioning.module.scss' ; import { ISpfxPnpPageprovisioningProps } from './ISpfxPnpPageprovisioningProps' ; import { ISpfxPnpPageprovisioningState } from './ISpfxPnpPageprovisioningState' ; import { autobind } from 'office-ui-fabric-react/lib/Utilities' ; import { sp } from "@pnp/sp" ; import "@pnp/sp/webs" ; import "@pnp/sp/clientside-pages/web" ; import { PrimaryButton , TextField } from 'office-ui-fabric-react' ; import { ClientsideText , ClientsideWebpart } from "@pnp/sp/clientside-pages" ; import "@pnp/sp/comments/clientside-page" ; export default class SpfxPnpPageprovisioning extends React . Component < ISpfxPnpPageprovisioningProps , ISpfxPnpPageprovisioningState > { constructor ( props ) { super ( props ) ; sp . setup ( { spfxContext : this . props . context } ) ; this . state = { title : '' , name : '' } ; } @ autobind private async _CreatePage ( ) { const page = await sp . web . addClientsidePage ( this . state . name , this . state . title , "Article" ) ; let section = page . addSection ( ) ; let column1 = section . addColumn ( 8 ) ; let column2 = section . addColumn ( 4 ) ; column1 . addControl ( new ClientsideText ( "This is text added into column 1" ) ) ; column2 . addControl ( new ClientsideText ( "This is text added into column 2" ) ) ; const partDefs = await sp . web . getClientsideWebParts ( ) ; const partDef = partDefs . filter ( c => c . Id === "490d7c76-1824-45b2-9de3-676421c997fa" ) ; const part = ClientsideWebpart . fromComponentDef ( partDef [ 0 ] ) ; column1 . addControl ( part ) ; await page . save ( ) ; } public render ( ) { return ( < div className = { styles . spfxPnpPageprovisioning } > < TextField label = "Page Name" onChanged = { ( val ) => { this . setState ( { name : val } ) ; } } /> < TextField label = "Page Title" onChanged = { ( val ) => { this . setState ( { title : val } ) ; } } /> < br / > < PrimaryButton text = "Create Page" onClick = { this . _CreatePage } / > < /div>); } }