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, React
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
}
|
