Merge branch 'dev'
This commit is contained in:
commit
ef2e9c693d
|
@ -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:
|
||||
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
export interface IScriptEditorWebPartProps {
|
||||
script: string;
|
||||
title: string;
|
||||
removePadding: boolean;
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"officeFabricIconFontName": "JS",
|
||||
"properties": {
|
||||
"script": "",
|
||||
"title" : "The Modern Script Editor web part!",
|
||||
"removePadding": false
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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<IScriptEditorWebPartProps> {
|
||||
public save: (script: string) => void = (script: string) => {
|
||||
|
@ -23,6 +24,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
ScriptEditor,
|
||||
{
|
||||
script: this.properties.script,
|
||||
title: this.properties.title,
|
||||
save: this.save
|
||||
}
|
||||
);
|
||||
|
@ -61,6 +63,10 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
groups: [
|
||||
{
|
||||
groupFields: [
|
||||
PropertyPaneTextField("title",{
|
||||
label: "Title to show in edit mode",
|
||||
value: this.properties.title
|
||||
}),
|
||||
PropertyPaneToggle("removePadding", {
|
||||
label: "Remove top/bottom padding of web part container",
|
||||
checked: this.properties.removePadding,
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
export interface IScriptEditorProps {
|
||||
script: string;
|
||||
title: string;
|
||||
save(script: string): void;
|
||||
}
|
||||
|
|
|
@ -57,7 +57,7 @@ export default class ScriptEditor extends React.Component<IScriptEditorProps, an
|
|||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">The Modern Script Editor web part!</span>
|
||||
<span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
|
||||
<p className="ms-font-l ms-fontColor-white"></p>
|
||||
<DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue