Skip to content
A SPFx extension using @pnp/pnpjs , that allows creating Modern Pages hard-coded or based on prefilled modern pages marked as "Page Model", inside the Site Pages Library.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
config
ps
sharepoint/assets
src
.editorconfig
.gitignore
.yo-rc.json
README.md
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Modern Page Model with PnP/PnPjs

Summary

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

WebPartInAction

How to set a Modern Page as Page Model

WebPartInAction

Future improvements

  • 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

drop

Applies to

Prerequisites

  • Add a boolean (yes/no) Site Column to Page Library named "Is Model" to "Site Page" Content Type
  • @pnp/sp drop in 1.3.0 pnp/pnpjs team introduce ClientSidePage copyPage extension method, so you need to use this version or a major

Solution

Solution Author
react-command-page-model-pnpjs Federico Porceddu

Version history

Version Date Comments
1.0 March 16, 2019 Initial release
1.1 March 23, 2019 Added pnp ps script for field provisioning

Disclaimer

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:
    • npm install
    • gulp serve
  • create in your SharePoint Modern Site a boolean list column named Is Modern in Site Pages Library using AddFieldToList.ps1 script under ps folder

Features

This SPFx extension illustrates the following concepts:

Debug URL for testing

Here's a debug URL for testing around this sample.

?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%22ada4bf2b-a6c1-4074-a273-9d220c815e11%22%3A%7B%22location%22%3A%22ClientSideExtension.ListViewCommandSet.CommandBar%22%7D%7D

You can’t perform that action at this time.