Programmieren des WebParts in
Man programmiert das Webpart mit Visual Code mit React
Hierzu wechselt man auf das Verzeichnis, in welchem man das
Webpart mit Yeoman erstellt hat.
In Visual Code
React
Typescript
Das Webpart wird auf Basis von Typescript .ts geschrieben. In
Typescript werden in Javascript Variablen typisiert und mit Klassen gearbeitet.
Das SharePoint Online Webpart wird rein Client-Seitig
geschrieben und mit zusammengefasstem javascript auf dem Client-Browser
ausgeführt.
Webpart Klasse
SharePoint
Webpart in React für SharePoint-Online
Das Webpart befindet sich in src\webparts\webPartName
Als Datei mit der Endung .ts also hier : WebPart01WebPart.ts
Die Datei ist der Einstiegspunkt zum Webpart und erstellt zur
Laufzeit ein Webpart als Instanz/Objekt einer Klasse
Das aktuelle Webpart erweitert das die BaseClientSideWebPart-Klasse
oder leitet sich aus dieser Klasse ab.
|
export default class WebPart01WebPart extends BaseClientSideWebPart<IWebPart01WebPartProps> {
|
Webpart-Eigenschaften
Dabei werden Webpart-Eigenschaften,
Webpart-Kontext das domElement für die Elemente in HTML und die InstanceID zur
Verfügung gestellt.
Die Klasse greift auf die Properties zu durch die Schnittstelle
IWebpartProps
Die Properties sind in der Datei webpart\compontens\IWebPart01Props.ts
|
export interface IWebPart01Props {
description: string;
}
|
Render
HTML
Alles was dargestellt werde muss als HTML wird in der .tsx Datei
webPart\webpartname\components\webpartname.tsx verwaltet
Also hier im Basis-Rumpf der .tsx Datei
Innerhalb der Render()-Methode
|
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 }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}
|