I coded a proof of concept terminal calendar week on how to charge a SPFx spider web business office from some other spider web business office which I computer programme to role every bit designing for display templates for a search spider web business office I’m planning. By using SPFx parts every bit homecoming templates nosotros teach amend command of the code, as well as avoid script injection on the page.
I figured this approach powerfulness survive useful for other scenarios as well as thus here’s the code to play amongst :)
The POC loads upwards 2 instances of the Modern Script Editor spider web part, as well as sets information inwards it. Which agency the modern script editor spider web business office has to survive installed on the site you lot are testing on. Or supercede amongst whatsoever of the oob spider web parts as well as laid upwards the right properties.
Issues I haven’t gotten to all the same every bit they are non a draw of piece of job concern for my scenario are:
- How to access spider web business office properties of the dynamic loaded spider web parts inwards edit way – tin survive worked some if the spider web business office has a custom edit UI
- How to persist the spider web business office information as well as shop it inwards the psyche spider web business office – stimulate got a await at the serialize method of the ClientSideWebPartManager.
- The text spider web business office is a especial form of spider web part, as well as thus non certain how to dynamically instantiate it
Full sample tin survive works life at https://github.com/wobba/spfx4fun/tree/master/DynamicLoad
import * every bit React from 'react'; import styles from './HelloWorld.module.scss'; import { IHelloWorldProps } from './IHelloWorldProps'; import { Guid } from '@microsoft/sp-core-library' import { ClientSideWebPartManager, IWebPartManagerContext, IWebPartData } from '@microsoft/sp-webpart-base'; import { DisplayMode } from '@microsoft/sp-core-library'; import { IClientSideWebPartManifest } from '@microsoft/sp-module-interfaces'; permit _webPartManager: ClientSideWebPartManager; permit _sampleIdOne = "mAdcOW" + Guid.newGuid().toString(); permit _sampleIdTwo = "mAdcOW" + Guid.newGuid().toString(); export default course of report HelloWorld extends React.Component<IHelloWorldProps, {}> { world async componentDidMount(): Promise<void> { _webPartManager = novel ClientSideWebPartManager(this.props.context.host); await _webPartManager.fetchWebPartManifests(); // Ensure all manifests are available this.addData(); } mortal async addData() { // local webpart properties - inwards this example props for the modern script editor webpart permit props = { script: "<div>Foo</div>", title: "The Modern Script Editor spider web part!", removePadding: false, spPageContextInfo: imitation } await this.loadWebPart("ScriptEditorWebPart", document.getElementById(_sampleIdOne), props); await this.loadWebPart("ScriptEditorWebPart", document.getElementById(_sampleIdTwo), props); } mortal async loadWebPart(alias: string, domElement: HTMLElement, webPartProperties: any) { permit manifests = _webPartManager.getWebPartManifests(); for (let i = 0; i < manifests.length; i++) { const manifest = manifests[i]; if (manifest.alias === alias) { permit instanceId = Guid.newGuid().toString(); permit wpManifest: IClientSideWebPartManifest<any> = manifest every bit IClientSideWebPartManifest<any>; permit wpData: IWebPartData = { id: wpManifest.id, instanceId: instanceId, title: "", dataVersion: "1.0", properties: webPartProperties }; // Specify whatsoever every bit webpartLoadExtraLogInfo is non defined on the interface as well as has to survive acquaint permit initialize: IWebPartManagerContext & whatsoever = { domElement: domElement, instanceId: instanceId, manifest: wpManifest, displayMode: DisplayMode.Read, webPartData: wpData, webpartLoadExtraLogInfo: { } }; await _webPartManager.loadWebPart(initialize); } } } world render(): React.ReactElement<IHelloWorldProps> { homecoming ( <div className={styles.helloWorld} > <div className={styles.container}> <div className={styles.row}> <div className={styles.column}> <span className={styles.title}>Dynamic loading!</span> <span id={_sampleIdOne}></span> <span id={_sampleIdTwo}></span> </div> </div> </div> </div> ); } } Thanks for reading : Dynamically Charge A Spider Web Utilisation From Unopen To Other Spider Web Part
