Merge pull request #3666 from salascz/feature/script-editor-external-script
This commit is contained in:
Hugo Bernier
GitHub
commit
26ec9b43cb
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
# Script editor web part for modern pages built in React
|
||||
# Script editor web part for modern pages
|
||||
|
||||
This version works only for SharePoint Online. If you want a version for Sharepoint on-premises go to [react-script-editor-onprem](../react-script-editor-onprem).
|
||||
This version works only for SharePoint Online. If you want a version for SharePoint on-premises go to [react-script-editor-onprem](../react-script-editor-onprem).
|
||||
|
||||
**It's important you read and understand the notes on [deployment](#deploy-to-non-script-sites--modern-team-sites).**
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ By default this web part is not allowed on no-script sites, as it allows executi
|
|||
|
||||
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:
|
||||
|
||||
```
|
||||
```json
|
||||
"requiresCustomScript": false
|
||||
```
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ If you however want to allow the web part for non-script sites like Office 365 G
|
|||
|
||||
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:
|
||||
|
||||
```
|
||||
```json
|
||||
"skipFeatureDeployment": true
|
||||
```
|
||||
|
||||
|
|
@ -171,6 +171,8 @@ This sample is optimally compatible with the following environment configuration
|
|||
|
||||
* [Mikael Svenson](https://github.com/wobba)
|
||||
* [Felix Bohnacker](https://github.com/felixbohnackerfelixbohnacker)
|
||||
* [salascz](https://github.com/salascz)
|
||||
* [Waldek Mastykarz](https://github.com/waldekmastykarz)
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -198,11 +200,12 @@ Version|Date|Comments
|
|||
1.0.19.0|August 31, 2022|Added support for section background color
|
||||
1.0.20.0|October 10, 2022|Added sample html/script with self-executing function
|
||||
1.0.21.0|March 11, 2023|Bump dependencies to allow react-script-editor to build under SPFx 1.16.1
|
||||
1.0.22.0|April 24, 2023|Added support for script in external template
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
### Local testing
|
||||
### Testing
|
||||
|
||||
* Clone this repository
|
||||
* In the command line run:
|
||||
|
|
@ -236,11 +239,11 @@ You can try looking at [issues related to this sample](https://github.com/pnp/sp
|
|||
|
||||
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-script-editor) and see what the community is saying.
|
||||
|
||||
If you encounter any issues while 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-script-editor&template=bug-report.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%20-%20).
|
||||
If you encounter any issues while 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-script-editor&template=bug-report.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%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-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%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-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%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-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba&title=react-script-editor%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-script-editor&template=question.yml&sample=react-script-editor&authors=@wobba%20@salascz%20@felixbohnacker&title=react-script-editor%20-%20).
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
|
|||
|
|
@ -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": "2023-03-11",
|
||||
"updateDateTime": "2023-04-24",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -57,7 +57,17 @@
|
|||
"gitHubAccount": "felixbohnacker",
|
||||
"pictureUrl": "https://github.com/felixbohnacker.png",
|
||||
"name": "Felix Bohnacker"
|
||||
}
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "salascz",
|
||||
"name": "salascz",
|
||||
"pictureUrl": "https://github.com/salascz.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "wobba",
|
||||
"name": "Mikael Svenson",
|
||||
"pictureUrl": "https://github.com/wobba.png"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "Modern Script Editor web part by mikaelsvenson",
|
||||
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"version": "1.0.21.0",
|
||||
"version": "1.0.22.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false,
|
||||
"isDomainIsolated": false,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "pnp-script-editor",
|
||||
"version": "1.0.21",
|
||||
"version": "1.0.22",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "pnp-script-editor",
|
||||
"version": "1.0.21",
|
||||
"version": "1.0.22",
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.16.1",
|
||||
"@microsoft/sp-loader": "1.16.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "pnp-script-editor",
|
||||
"version": "1.0.21",
|
||||
"version": "1.0.22",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"resolutions": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
export interface IScriptEditorWebPartProps {
|
||||
script: string;
|
||||
useExternalScript: boolean;
|
||||
externalScript?: string;
|
||||
title: string;
|
||||
removePadding: boolean;
|
||||
spPageContextInfo: boolean;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import PropertyPaneLogo from './PropertyPaneLogo';
|
|||
export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
|
||||
public _propertyPaneHelper;
|
||||
private _unqiueId;
|
||||
private _externalScriptContent;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
|
@ -22,6 +23,18 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
this._propertyPaneHelper.initialValue = newVal;
|
||||
}
|
||||
|
||||
protected async onInit(): Promise<void> {
|
||||
if (this.properties.useExternalScript) {
|
||||
try {
|
||||
const prefix = this.properties.externalScript.indexOf('?') === -1 ? '?' : '&';
|
||||
const response = await fetch(`${this.properties.externalScript}${prefix}pnp=${new Date().getTime()}`);
|
||||
this._externalScriptContent = await response.text();
|
||||
} catch (e) {
|
||||
this._externalScriptContent = 'Failed to load external script.';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
this._unqiueId = this.context.instanceId;
|
||||
if (this.displayMode == DisplayMode.Read) {
|
||||
|
|
@ -42,7 +55,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
}
|
||||
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
this.domElement.innerHTML = this.properties.script;
|
||||
this.domElement.innerHTML = this.properties.useExternalScript ? this._externalScriptContent : this.properties.script;
|
||||
this.executeScript(this.domElement);
|
||||
} else {
|
||||
this.renderEditor();
|
||||
|
|
@ -108,9 +121,22 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
onText: "Enabled",
|
||||
offText: "Disabled"
|
||||
}),
|
||||
this._propertyPaneHelper
|
||||
PropertyPaneToggle('useExternalScript', {
|
||||
label: 'Use an external HTML Code instead of inline script',
|
||||
onText: "Use external HTML Code",
|
||||
offText: "Use inline script"
|
||||
}),
|
||||
];
|
||||
|
||||
if (this.properties.useExternalScript) {
|
||||
webPartOptions.push(PropertyPaneTextField("externalScript", {
|
||||
label: "External HTML Code URL",
|
||||
value: this.properties.externalScript,
|
||||
}));
|
||||
} else {
|
||||
webPartOptions.push(this._propertyPaneHelper);
|
||||
}
|
||||
|
||||
if (this.context.sdks.microsoftTeams) {
|
||||
let config = PropertyPaneToggle("teamsContext", {
|
||||
label: "Enable teams context as _teamsContexInfo",
|
||||
|
|
|
|||
Loading…
Reference in New Issue