Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

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 {

  descriptionstring;

}

 

 

 

 

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>

    );

  }

}

 

 

 

Mobile
»
SharePoint Icons
»
SharePoint Web-Elemente: Fabric React und Fabric Core
»
Code zu SharePoint Liste und Webpart Hello World Sample
»
gelöst: SharePoint Style wird nicht angezeigt
»
SharePoint Aussehen von WebPart ändern
»
SharePoint Listen in Webparts verwenden
»
Context des Webparts ermitteln
»
WebPart Manifest
»
Programmieren des WebParts in SharePoint
»
Webpart testen in der Workbench

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de