From 650172112421f2b6ba6352825e1d38a8d2894afb Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Sun, 19 Jun 2022 22:50:20 -0400 Subject: [PATCH] Updated readme and sample.json --- samples/react-script-editor/README.md | 51 ++++++++++++------- .../react-script-editor/assets/sample.json | 9 +++- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index bbfb1fe98..0b13fc192 100644 --- a/samples/react-script-editor/README.md +++ b/samples/react-script-editor/README.md @@ -20,6 +20,7 @@ This version works only for SharePoint Online. If you want a version for Sharepo **It's important you read and understand the notes on [deployment](#deploy-to-non-script-sites--modern-team-sites).** ## Summary + Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part. This web part is similar to the classic Script Editor Web Part, and allows you do drop arbitrary script or html on a modern page. @@ -72,6 +73,7 @@ If all you want is to add markup on the page, you can do that as well. Adding th ``` You may add CSS via style tags or `link` tags. + ```html @@ -95,9 +97,11 @@ You may add CSS via style tags or `link` tags. ``` ## Support for Office UI Fabric styles + By adding the class name `ms-Fabric` to your top element, you can use use fabric CSS classes directly in the web part. See [Fabric Core](https://developer.microsoft.com/en-us/fabric#/get-started/web#fabric-core) for more information on Fabric classes. -**Sample** +### Sample + ```html
@@ -107,16 +111,19 @@ By adding the class name `ms-Fabric` to your top element, you can use use fabric ``` ## Support for classic _spPageContextInfo -If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane. + +If your scripts rely on the classic_spPageContextInfo, you can enable that in the web part property pane. ## Support for Teams tabs + If you want to use the solution as a Teams tab, perform the changes to deploy to [non-script](#deploy-to-non-script-sites--modern-team-sites) sites and [tenant wide deployment](#deploy-tenant-wide). Next see the [Teams tab tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) for steps needed to deploy the solution as a Teams tab. You can get access to the Teams context information via the global variable `_teamsContexInfo`. The available properties are documented at [Teams context interface](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest). -**Sample** +### Sample + ```html
@@ -132,29 +139,33 @@ element.innerHTML = "Team: " + _teamsContexInfo.teamName + "Channel: " + _t ![Script Editor web part in Teams](./assets/modern-script-editor-wp-teams.gif) ### Deploy to non-script sites / modern team sites + By default this web part is not allowed on no-script sites, as it allows execution of arbitrary script. This is by design as from a security and governance perspective you might not want arbitrary script added to your pages. This is typically something you want control over. If you however want to allow the web part for non-script sites like Office 365 Group modern team sites you have to edit `ScriptEditorWebPart.manifest.json` with the following change: + ``` "requiresCustomScript": false ``` ### Deploy tenant wide + By default you have to install this web part per site collection where you want it available. If you want it enabled by default on all sites you have to edit `package-solution.json` with the following change: + ``` "skipFeatureDeployment": true ``` -In order to make it available to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well. +In order to make it available to absolutely all sites you need apply the *Deploy to non-script sites / modern team site* change as well. ## Compatibility -![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) -![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) +![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg) +![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) -![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg) +![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") -![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg) +![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) @@ -168,6 +179,8 @@ In order to make it available to absolutely all sites you need apply the _Deploy Solution|Author(s) --------|--------- react-script-editor | [Mikael Svenson](https://github.com/wobba) ([@mikaelsvenson](http://www.twitter.com/mikaelsvenson), [techmikael.com](techmikael.com)) +react-script-editor | [Felix Bohnacker](https://github.com/felixbohnackerfelixbohnacker) + ## Version history @@ -194,27 +207,30 @@ Version|Date|Comments 1.0.18.0|June 14, 2022|Upgrade to SPFx v1.13.1 ## Minimal Path to Awesome + ### Local testing -- Clone this repository -- In the command line run: - - `npm install` - - `gulp serve` +* Clone this repository +* In the command line run: + * `npm install` + * `gulp serve` ### Deploy + * `gulp clean` * `gulp bundle --ship` * `gulp package-solution --ship` * Upload `.sppkg` file from `sharepoint\solution` to your tenant App Catalog - * E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog + * E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog * Add the web part to a site collection, and test it on a page + ## Features + This web part illustrates the following concepts on top of the SharePoint Framework: -- Re-use existing JavaScript solutions on a modern page -- Office UI Fabric -- React - +* Re-use existing JavaScript solutions on a modern page +* Office UI Fabric +* React ## Help @@ -236,5 +252,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github **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.** - diff --git a/samples/react-script-editor/assets/sample.json b/samples/react-script-editor/assets/sample.json index dc96f04c6..3a7ce6f69 100644 --- a/samples/react-script-editor/assets/sample.json +++ b/samples/react-script-editor/assets/sample.json @@ -9,7 +9,7 @@ "Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part." ], "creationDateTime": "2019-10-13", - "updateDateTime": "2019-10-13", + "updateDateTime": "2022-06-14", "products": [ "SharePoint" ], @@ -20,7 +20,7 @@ }, { "key": "SPFX-VERSION", - "value": "1.4.1" + "value": "1.13.1" }, { "key": "SPFX-FULLPAGEAPP", @@ -52,6 +52,11 @@ "pictureUrl": "https://github.com/waldekmastykarz.png", "name": "Waldek Mastykarz", "twitter": "waldekm" + }, + { + "gitHubAccount": "felixbohnacker", + "pictureUrl": "https://github.com/felixbohnacker.png", + "name": "Felix Bohnacker" } ], "references": [