Added support for script in external template

This commit is contained in:
Cevela, Jiri 2023-04-24 13:29:15 +02:00
parent da1b5b0932
commit f6696d80c3
5 changed files with 35 additions and 6 deletions

View File

@ -198,6 +198,7 @@ Version|Date|Comments
1.0.19.0|August 31, 2022|Added support for section background color 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.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.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 ## Minimal Path to Awesome

View File

@ -3,7 +3,7 @@
"solution": { "solution": {
"name": "Modern Script Editor web part by mikaelsvenson", "name": "Modern Script Editor web part by mikaelsvenson",
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294", "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
"version": "1.0.21.0", "version": "1.0.22.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": false, "skipFeatureDeployment": false,
"isDomainIsolated": false, "isDomainIsolated": false,

View File

@ -1,6 +1,6 @@
{ {
"name": "pnp-script-editor", "name": "pnp-script-editor",
"version": "1.0.21", "version": "1.0.22",
"private": true, "private": true,
"main": "lib/index.js", "main": "lib/index.js",
"resolutions": { "resolutions": {

View File

@ -1,5 +1,7 @@
export interface IScriptEditorWebPartProps { export interface IScriptEditorWebPartProps {
script: string; script: string;
useExternalScript: boolean;
externalScript?: string;
title: string; title: string;
removePadding: boolean; removePadding: boolean;
spPageContextInfo: boolean; spPageContextInfo: boolean;

View File

@ -11,6 +11,7 @@ import PropertyPaneLogo from './PropertyPaneLogo';
export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> { export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEditorWebPartProps> {
public _propertyPaneHelper; public _propertyPaneHelper;
private _unqiueId; private _unqiueId;
private _externalScriptContent;
constructor() { constructor() {
super(); super();
@ -22,6 +23,18 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
this._propertyPaneHelper.initialValue = newVal; 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 { public render(): void {
this._unqiueId = this.context.instanceId; this._unqiueId = this.context.instanceId;
if (this.displayMode == DisplayMode.Read) { if (this.displayMode == DisplayMode.Read) {
@ -42,7 +55,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
} }
ReactDom.unmountComponentAtNode(this.domElement); 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); this.executeScript(this.domElement);
} else { } else {
this.renderEditor(); this.renderEditor();
@ -66,7 +79,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
); );
ReactDom.render(element, this.domElement); ReactDom.render(element, this.domElement);
} }
protected get dataVersion(): Version { protected get dataVersion(): Version {
return Version.parse('1.0'); return Version.parse('1.0');
} }
@ -108,9 +121,22 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
onText: "Enabled", onText: "Enabled",
offText: "Disabled" 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) { if (this.context.sdks.microsoftTeams) {
let config = PropertyPaneToggle("teamsContext", { let config = PropertyPaneToggle("teamsContext", {
label: "Enable teams context as _teamsContexInfo", label: "Enable teams context as _teamsContexInfo",
@ -173,7 +199,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
// //
// Argument element is an element in the dom. // Argument element is an element in the dom.
private async executeScript(element: HTMLElement) { private async executeScript(element: HTMLElement) {
// clean up added script tags in case of smart re-load // clean up added script tags in case of smart re-load
const headTag = document.getElementsByTagName("head")[0] || document.documentElement; const headTag = document.getElementsByTagName("head")[0] || document.documentElement;
let scriptTags = headTag.getElementsByTagName("script"); let scriptTags = headTag.getElementsByTagName("script");
for (let i = 0; i < scriptTags.length; i++) { for (let i = 0; i < scriptTags.length; i++) {