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
class WebPart01WebPart |
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> ); } } |