Skip to content
Branch: master
Find file History
fredupstair Add 'samples/react-command-page-model-pnpjs/' from commit '32b084b5d0…
…749aeedb7956c313d22c4a585397eb'

git-subtree-dir: samples/react-command-page-model-pnpjs
git-subtree-mainline: 72a3e39
git-subtree-split: 32b084b
Latest commit 3e61e83 Mar 23, 2019

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.