Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Programmieren des SharePoint WebParts in TypeScript React

13.03.2020 (👁9195)

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>

    );

  }

}