Modern Page Model with PnP/PnPjs
A SPFx extension using @pnp/sp that allow creating Modern Pages based on prefilled modern pages marked as "Page Model", inside the Site Pages Library, and code defined pages. Users can select a Modern page as Model just setting a custom property page named "Is Model" to "Yes". People often need to create periodically editorial pages with the same composition, sections structure and webpart configuration, in order to give users the same users experience between pages with different contents but with the same communicative purpose. e.g.
- Employee of the month
- Weekly post from General Manager
- New hires list
This SPFX extension allows users to define their own page models and reuse them easily.
Modern Page Model with PnP/PnPjs in action
How to set a Modern Page as Page Model
- Hide pages model from search results
- Host pages model in a different site / library in order to share them cross site or just for isolate site pages from site model.
Used SharePoint Framework Version
- Add a boolean (yes/no) Site Column to Page Library named "Is Model" to "Site Page" Content Type
- @pnp/sp in 1.3.0 pnp/pnpjs team introduce ClientSidePage copyPage extension method, so you need to use this version or a major
|1.0||March 16, 2019||Initial release|
|1.1||March 23, 2019||Added pnp ps script for field provisioning|
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
Minimal Path to Awesome
- Clone this repository
- Move to right solution folder
- in the command line run:
- create in your SharePoint Modern Site a boolean list column named
Is Modernin Site Pages Library using
This SPFx extension illustrates the following concepts:
- Office UI Fabric React Component Modal
- Office UI Fabric React Component ComboBox
- Office UI Fabric React Component ChoiceGroup
- Office UI Fabric React Component SpinnerSize
Debug URL for testing
Here's a debug URL for testing around this sample.