-
Notifications
You must be signed in to change notification settings - Fork 836
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1376 from tmaestrini/main
- Loading branch information
Showing
51 changed files
with
69,194 additions
and
0 deletions.
There are no files selected for viewing
39 changes: 39 additions & 0 deletions
39
samples/react-company-templates/.devcontainer/devcontainer.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer | ||
| { | ||
| "name": "SPFx 1.17.4", | ||
| "image": "docker.io/m365pnp/spfx:1.17.4", | ||
| // Set *default* container specific settings.json values on container create. | ||
| "settings": {}, | ||
| // Add the IDs of extensions you want installed when the container is created. | ||
| "extensions": [ | ||
| "editorconfig.editorconfig", | ||
| "dbaeumer.vscode-eslint" | ||
| ], | ||
| // Use 'forwardPorts' to make a list of ports inside the container available locally. | ||
| "forwardPorts": [ | ||
| 4321, | ||
| 35729 | ||
| ], | ||
| "portsAttributes": { | ||
| "4321": { | ||
| "protocol": "https", | ||
| "label": "Manifest", | ||
| "onAutoForward": "silent", | ||
| "requireLocalPort": true | ||
| }, | ||
| // Not needed for SPFx>= 1.12.1 | ||
| // "5432": { | ||
| // "protocol": "https", | ||
| // "label": "Workbench", | ||
| // "onAutoForward": "silent" | ||
| // }, | ||
| "35729": { | ||
| "protocol": "https", | ||
| "label": "LiveReload", | ||
| "onAutoForward": "silent", | ||
| "requireLocalPort": true | ||
| } | ||
| }, | ||
| "postCreateCommand": "bash .devcontainer/spfx-startup.sh", | ||
| "remoteUser": "node" | ||
| } |
33 changes: 33 additions & 0 deletions
33
samples/react-company-templates/.devcontainer/spfx-startup.sh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| echo | ||
| echo -e "\e[1;94mInstalling Node dependencies\e[0m" | ||
| npm install | ||
|
|
||
| ## commands to create dev certificate and copy it to the root folder of the project | ||
| echo | ||
| echo -e "\e[1;94mGenerating dev certificate\e[0m" | ||
| gulp trust-dev-cert | ||
|
|
||
| # Convert the generated PEM certificate to a CER certificate | ||
| openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer | ||
|
|
||
| # Copy the PEM ecrtificate for non-Windows hosts | ||
| cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem | ||
|
|
||
| ## add *.cer to .gitignore to prevent certificates from being saved in repo | ||
| if ! grep -Fxq '*.cer' ./.gitignore | ||
| then | ||
| echo "# .CER Certificates" >> .gitignore | ||
| echo "*.cer" >> .gitignore | ||
| fi | ||
|
|
||
| ## add *.pem to .gitignore to prevent certificates from being saved in repo | ||
| if ! grep -Fxq '*.pem' ./.gitignore | ||
| then | ||
| echo "# .PEM Certificates" >> .gitignore | ||
| echo "*.pem" >> .gitignore | ||
| fi | ||
|
|
||
| echo | ||
| echo -e "\e[1;92mReady!\e[0m" | ||
|
|
||
| echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
|
|
||
| # Dependency directories | ||
| node_modules | ||
|
|
||
| # Build generated files | ||
| dist | ||
| lib | ||
| release | ||
| solution | ||
| temp | ||
| *.sppkg | ||
| .heft | ||
|
|
||
| # Coverage directory used by tools like istanbul | ||
| coverage | ||
|
|
||
| # OSX | ||
| .DS_Store | ||
|
|
||
| # Visual Studio files | ||
| .ntvs_analysis.dat | ||
| .vs | ||
| bin | ||
| obj | ||
|
|
||
| # Resx Generated Code | ||
| *.resx.ts | ||
|
|
||
| # Styles Generated Code | ||
| *.scss.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| !dist | ||
| config | ||
|
|
||
| gulpfile.js | ||
|
|
||
| release | ||
| src | ||
| temp | ||
|
|
||
| tsconfig.json | ||
| tslint.json | ||
|
|
||
| *.log | ||
|
|
||
| .yo-rc.json | ||
| .vscode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| v16.13.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| { | ||
| "@microsoft/generator-sharepoint": { | ||
| "plusBeta": false, | ||
| "isCreatingSolution": true, | ||
| "nodeVersion": "16.20.0", | ||
| "sdksVersions": { | ||
| "@microsoft/microsoft-graph-client": "3.0.2", | ||
| "@microsoft/teams-js": "2.9.1" | ||
| }, | ||
| "version": "1.17.4", | ||
| "libraryName": "company-templates", | ||
| "libraryId": "fb423a64-9c98-42de-b873-e2fe1231e30a", | ||
| "environment": "spo", | ||
| "packageManager": "npm", | ||
| "solutionName": "Company-templates", | ||
| "solutionShortDescription": "Company templates description", | ||
| "skipFeatureDeployment": true, | ||
| "isDomainIsolated": false, | ||
| "componentType": "extension", | ||
| "extensionType": "ListViewCommandSet" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| # 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 repository») 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: | ||
|
|
||
| - [x] Show an additional button 'Company templates' (when the actual user is authorized to add files to the library) | ||
| - [x] List files that serve as company templates in a tree structure | ||
| - [x] Filter by file category | ||
| - [x] Filter by name | ||
| - [x] Copy selected files from template repository to the current document library | ||
| - [x] Show a settings page to all users who have permissions to manage lists | ||
|
|
||
| It uses several ["Reusable React controls"](https://pnp.github.io/sp-dev-fx-controls-react/) 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 (file size, 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 | ||
|
|
||
| | :warning: 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: | ||
|
|
||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
| -Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") | ||
|  | ||
|  | ||
|  | ||
|
|
||
| For more information about SPFx compatibility, please refer to <https://aka.ms/spfx-matrix> | ||
|
|
||
| ## Contributors | ||
|
|
||
| - [Tobias Maestrini](https://github.com/tmaestrini) | ||
| - [Dan Toft](https://github.com/Tanddant) (👀 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](https://learn.microsoft.com/en-us/sharepoint/organization-assets-library). | ||
|
|
||
| ## Minimal path to awesome | ||
|
|
||
| - Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-templates) 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](https://code.visualstudio.com/docs/remote/remote-overview). 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](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment. | ||
|
|
||
| You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-company-templates%22) to see if anybody else is having the same issues. | ||
|
|
||
| You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-company-templates) and see what the community is saying. | ||
|
|
||
| If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-company-templates&template=bug-report.yml&sample=react-company-templates&authors=@tmaestrini&title=react-company-templates%20-%20). | ||
|
|
||
| For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-company-templates&template=question.yml&sample=react-company-templates&authors=@tmaestrini&title=react-company-templates%20-%20). | ||
|
|
||
| Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-company-templates&template=suggestion.yml&sample=react-company-templates&authors=@tmaestrini&title=react-company-templates%20-%20). | ||
|
|
||
| ## 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.** | ||
|
|
||
| <img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-company-templates" /> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| [ | ||
| { | ||
| "name": "pnp-sp-dev-spfx-web-parts-react-company-templates", | ||
| "source": "pnp", | ||
| "title": "Company Templates", | ||
| "shortDescription": "An extension to provide a simple approach for company wide used templates in SharePoint Online.", | ||
| "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-templates", | ||
| "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-templates", | ||
| "longDescription": [ | ||
| "This is an alternative to the built-in 'New document' experience in a document library in SharePoint Online. It allows a SharePoint admin to define a repository (such as a standard document library or an org assets library) which acts as a source of templates that can be used in every document library. Any user can browse through the collection of company templates, get an instance of the desired template(s) by one single click and start using it." | ||
| ], | ||
| "creationDateTime": "2023-12-22", | ||
| "updateDateTime": "2024-03-29", | ||
| "products": [ | ||
| "SharePoint" | ||
| ], | ||
| "metadata": [ | ||
| { | ||
| "key": "CLIENT-SIDE-DEV", | ||
| "value": "React" | ||
| }, | ||
| { | ||
| "key": "SPFX-VERSION", | ||
| "value": "1.17.4" | ||
| } | ||
| ], | ||
| "thumbnails": [ | ||
| { | ||
| "type": "image", | ||
| "order": 100, | ||
| "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/269ae2f269aadb35361ec657dd969bf730e79df8/samples/react-company-templates/assets/Demo.gif", | ||
| "alt": "Extension Preview" | ||
| } | ||
| ], | ||
| "authors": [ | ||
| { | ||
| "gitHubAccount": "tmaestrini", | ||
| "pictureUrl": "https://github.com/tmaestrini.png", | ||
| "name": "Tobias Maestrini" | ||
| }, | ||
| { | ||
| "gitHubAccount": "Tanddant", | ||
| "pictureUrl": "https://github.com/Tanddant.png", | ||
| "name": "Dan Toft (Code Reviews)" | ||
| } | ||
| ], | ||
| "references": [ | ||
| { | ||
| "name": "ListView Command Set extension", | ||
| "description": "You can use SharePoint Framework (SPFx) Extensions to build list view command set extensions with the aim to extend the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement custom behaviors.", | ||
| "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api" | ||
| } | ||
| ] | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", | ||
| "version": "2.0", | ||
| "bundles": { | ||
| "company-templates-command-set": { | ||
| "components": [ | ||
| { | ||
| "entrypoint": "./lib/extensions/companyTemplates/CompanyTemplatesCommandSet.js", | ||
| "manifest": "./src/extensions/companyTemplates/CompanyTemplatesCommandSet.manifest.json" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| "externals": {}, | ||
| "localizedResources": { | ||
| "CompanyTemplatesCommandSetStrings": "lib/extensions/companyTemplates/loc/{locale}.js", | ||
| "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" | ||
| } | ||
| } |
6 changes: 6 additions & 0 deletions
6
samples/react-company-templates/config/deploy-azure-storage.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", | ||
| "workingDir": "./release/assets/", | ||
| "account": "<!-- STORAGE ACCOUNT NAME -->", | ||
| "container": "company-templates->" | ||
| } |
Oops, something went wrong.