Wie kann man in einem SharePoint WebPart den Titel oder die URL ermitteln
Das SharePoint WebPart ermittelt über den HTML/URL Context die Eigenschaften einer Webseite.
Damit man den Context ermitteln kann, muss man ihn im Webpart in der render() Methode lesen.
SPFX, Webpart, SharePoint Online
Context des Webparts ermitteln
In der Render() Methode muss der Context zugewiesen werden
public render(): void { const element: React.ReactElement<any > = React.createElement( WebPart01, { description: this.properties.description, ctx: this.context } ); |
Context an HTML übergeben
Damit es zur HTML Ausgabe-Datei WebPart.tsx übergeben werden kann, muss es in die externe Schnittstelle eingefügt werden
export interface IWebPart01WebPartProps { description: string, ctx: WebPartContext; } |
In Webpart-Einstiegsdatei ts:
der WebPartWebPart.ts Datei
export interface IWebPart01WebPartProps { description: string, ctx: WebPartContext; }
export default class WebPart01WebPart extends BaseClientSideWebPart<IWebPart01WebPartProps> {
//IWebPart01Props->any
public render(): void { const element: React.ReactElement<any > = React.createElement( WebPart01, { description: this.properties.description, ctx: this.context } );
ReactDom.render(element, this.domElement); } |
WebPartWebPart.ts
Anzeigen in HTML Ausgabe
In der HTML Render Datei .tsx
this.props.ctx.pageContext.web.absoluteUrl und this.props.ctx.pageContext.web.title |
<p>URL={this.props.ctx.pageContext.web.absoluteUrl}</p> <p>Title={this.props.ctx.pageContext.web.title}</p> |
import * as React from 'react'; import styles from './WebPart01.module.scss'; import { IWebPart01Props } from './IWebPart01Props'; import { escape } from '@microsoft/sp-lodash-subset';
export default class WebPart01 extends React.Component<IWebPart01Props, {}> { public render(): React.ReactElement<IWebPart01Props> { return ( <div className={ styles.webPart01 }> <div className={ styles.container }> <div className={ styles.row }> <div className={ styles.column }> <span className={ styles.title }>SharePoint WebPart React</span> <p className={ styles.subTitle }>Test01: Get Page Context</p> <p className={ styles.description }>Description: {escape(this.props.description)}</p>
<p>URL={this.props.ctx.pageContext.web.absoluteUrl}</p> <p>Title={this.props.ctx.pageContext.web.title}</p>
</div> </div> </div> </div> ); } }
|
Webpart Properties
IWebPartProps.ts
Hierzu muss in den Properties der Context als ctx zur Verfügung stehen
export interface IWebPart01Props { description: string, ctx } |