This feature has been developed in association with Olga Staszek-Kornet, the Microsoft 365 and Power Platform Consultant, and Project Coordinator in the Digital Workplace area—privately, my wife.
Our solution facilitates recreating predefined section templates from two distinct sources:
- Site-specific Section List: Tailored by site owners and editors, allows for defining site-specific section templates that cater to the unique needs of individual teams or projects.
- Global Section List: Managed by administrators, this global list provides a centralized repository of sections for consistent use across the organization.
By enabling the quick insertion of pre-configured sections, our extension accelerates the page creation process. This not only saves time but also ensures consistency in the layout and structure of SharePoint pages, keeping it in line with the globally applied guidelines.
The Section Templates lists serve as a reference point for building cohesive page structures based on repetitive section arrangements. This way, users can easily select and implement sections as major 'building blocks' on their page, simultaneously fostering a company-steered approach to consistent page development.
The solution allows copying sections with embedded web parts, keeping their whole initial configuration. This feature is especially useful when users want to copy a web part with complex or time-consuming configuration, such as the Quick Links web part. Here, the whole configuration is saved in the code, and thus you can place the exact copy of some web part on another page by adding the whole copied section and removing the redundant parts.
The solution allows saving the page even when it is being edited by multiple users simultaneously. Unfortunately, due to certain limitations, after using the Add Section button, the page will reload in standard editing mode. This means that other editors will no longer be able to edit the page at the same time.
To continue editing the page in co-authoring mode, you need to save and edit the page again.
Get your own free development tenant by subscribing to Microsoft 365 developer program
To make use of the Global Section List, replace the 'globalSectionsUrl' paramenter in the ClientSideInstance.xml and elements.xml files with the URL where the global list has been established, replacing 'https://contoso.sharepoint.com'.
| Solution | Author(s) |
|---|---|
| react-application-page-sections | Michał Kornet(@kornetmichal), GitHub , Blog, Olga Staszek-Kornet LinkedIn |
| Version | Date | Comments |
|---|---|---|
| 1.0.0.4 | December 10, 2023 | Initial release |
| 1.0.0.5 | July 17, 2025 | Fixes for pageCoAuthoring |
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.
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- npm install
- gulp serve
Include any additional steps as needed.
- Getting started with SharePoint Framework
- Building for Microsoft teams
- Use Microsoft Graph in your solution
- Publish SharePoint Framework applications to the Marketplace
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development