From fb3c389a5f7b4d11304f56379ee39c5a076467a9 Mon Sep 17 00:00:00 2001 From: Mikael Svenson Date: Wed, 14 Feb 2018 15:05:45 +0100 Subject: [PATCH] Script editor minor change and docs (#414) * Added property to set a title property visible in Edit mode. * Updated documentation with settings for non-script sites and tenant wide deployment --- samples/react-script-editor/README.md | 17 +++++++++++++++++ .../config/package-solution.json | 2 +- .../scriptEditor/IScriptEditorWebPartProps.ts | 1 + .../ScriptEditorWebPart.manifest.json | 1 + .../scriptEditor/ScriptEditorWebPart.ts | 10 ++++++++-- .../components/IScriptEditorProps.ts | 1 + .../scriptEditor/components/ScriptEditor.tsx | 2 +- 7 files changed, 30 insertions(+), 4 deletions(-) diff --git a/samples/react-script-editor/README.md b/samples/react-script-editor/README.md index 863c6dc66..07a8e212e 100644 --- a/samples/react-script-editor/README.md +++ b/samples/react-script-editor/README.md @@ -69,6 +69,7 @@ Version|Date|Comments 1.0.0.1|August 8th, 2017|Updated SPFx version and CSS loading 1.0.0.2|October 4th, 2017|Updated SPFx version, bundle Office UI Fabric and CSS in webpart 1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring +1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide ## 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.** @@ -93,6 +94,22 @@ Version|Date|Comments * E.g.: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog * Add the web part to a site collection, and test it on a page +### 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 availble. 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 availble to absolutely all sites you need apply the _Deploy to non-script sites / modern team site_ change as well. + ## Features This web part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/react-script-editor/config/package-solution.json b/samples/react-script-editor/config/package-solution.json index 8de8dee3c..b4e229a4c 100644 --- a/samples/react-script-editor/config/package-solution.json +++ b/samples/react-script-editor/config/package-solution.json @@ -2,7 +2,7 @@ "solution": { "name": "Modern Script Editor web part by Puzzlepart", "id": "1425175f-3ed8-44d2-8fc4-dd1497191294", - "version": "1.0.0.3", + "version": "1.0.0.4", "includeClientSideAssets": true, "skipFeatureDeployment": false }, diff --git a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts index 80b462b8a..21de80ffd 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts +++ b/samples/react-script-editor/src/webparts/scriptEditor/IScriptEditorWebPartProps.ts @@ -1,4 +1,5 @@ export interface IScriptEditorWebPartProps { script: string; + title: string; removePadding: boolean; } diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json index 1935a65c0..49e1e607d 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json +++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.manifest.json @@ -21,6 +21,7 @@ "officeFabricIconFontName": "JS", "properties": { "script": "", + "title" : "The Modern Script Editor web part!", "removePadding": false } } diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts index 659624ff0..26f5f71dc 100644 --- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts +++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts @@ -5,12 +5,13 @@ import { SPComponentLoader } from '@microsoft/sp-loader'; import { BaseClientSideWebPart, IPropertyPaneConfiguration, - PropertyPaneCustomField + PropertyPaneCustomField, + PropertyPaneToggle, + PropertyPaneTextField } from '@microsoft/sp-webpart-base'; import ScriptEditor from './components/ScriptEditor'; import { IScriptEditorProps } from './components/IScriptEditorProps'; import { IScriptEditorWebPartProps } from './IScriptEditorWebPartProps'; -import { PropertyPaneToggle } from '@microsoft/sp-webpart-base/lib/propertyPane/propertyPaneFields/propertyPaneToggle/PropertyPaneToggle'; export default class ScriptEditorWebPart extends BaseClientSideWebPart { public save: (script: string) => void = (script: string) => { @@ -23,6 +24,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart
- The Modern Script Editor web part! + {this.props.title}

Edit snippet