Company Templates · Simple Management of Company Templates in SharePoint Online

Summary

Useful scenario to make centrally managed company templates (from a document library in SharePoint Online) available in every document library within the whole SharePoint tenant.

A SharePoint administrator can easily configure the document library that contains all templates in the settings view:

Warning

👉 For now, company templates can only be stored in one single library (aka «template repostory») within the whole SPO tenant. Therefore, only a user that has isSiteAdmin property assigned can access the settings view. We strongly recommend that only a tenant admin should / can configure the template repository settings.

Note

By defining the template repository, the settings will be stored in a tenant property (property name easyTemplatesSettings). Every instance of this extension refers to this tenant property.

Features

Under the hood, the extension is built on React and PnPjs and touches on the following topics:

• SharePoint Tenant Properties to store the settings tenant-wide
• React Providers for a centralized state management of the templates and the actions
• React Hooks to access several states and to load data asynchronously within different React Components

From a user perspective, the extension covers these features:

• Show an additional button 'Company templates' (when the actual user is authorized to add files to the library)
• List files that serve as company templates in a tree structure
• Filter by file category
• Filter by name
• Copy selected files fom template repository to the current document library
• Show a settings page to all users who have permissions to manage lists

It uses several "Reusable React controls" for an awesome user experience.

Upcoming Features (or not yet implemented ideas)

• Show link(s) to copied file(s) to be opened in a new browser tab (Dan's feature request 😃)
• Display additional metadata (filesize, current version) of the template file
• Show a preview of a selected template file by clicking on its file name
• Refresh template list by clicking on a refresh button in the command bar

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

This sample is optimally compatible with the following environment configuration:

For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix

Contributors

• Tobias Maestrini
• Dan Toft (👀 Code reviews)

Version history

Version	Date	Comments
1.0	March 29, 2024	Initial release

Prerequisites

A SharePoint Tenant with a dedicated document library that serves as repository for company templates. Any document library is supported; we suggest to make proper use of a SharePoint organization assets library.

Minimal path to awesome

• Clone this repository (or download this solution as a .ZIP file then unzip it)
• From your command line, change your current directory to the directory containing this sample (react-company-templates, located under samples)
• in the command line run:
  • npm install
  • gulp serve

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions. **

How to run the solution locally

• Clone this repository
• Ensure that you are in the solution folder
• in the command-line run:
  • npm install
  • gulp serve

Debug URL for testing

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

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"532b1c1d-bcbd-4831-a821-ec95eac1ca1c":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{}}}

Help

We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

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.