Erstellung eines SPFx Webparts mit AngularJS und Kendo UI

Hallo zusammen,

im heutigen Blogpost möchte ich euch einmal zeigen, wie man ein Webpart mit dem SharePoint Framework erstellt, das AngularJS und das JavaScript UI Framework Kendo UI von Telerik verwendet. Kendo UI bietet eigene Direktiven, die in AngularJS verwendet werden können.

Voraussetzung für das Tutorial ist eine funktionsfähige Entwicklungsumgebung für SharePoint Framework Webparts. Wie ihr die erstellt, könnt ihr hier nachlesen.

Für die Entwicklung des Webparts nutzen wir Visual Studio Code.

Zunächst erstellen wir einen neuen Ordner und öffnen diesen mit VS Code. Über

yo @microsoft/sharepoint

starten wir den Yeoman Generator und erstellen die Grundstruktur für das Webpart wie folgt:

Nachdem der Yeoman Generator alle NPM Packages installiert hat, solltet ihr folgende Rückmeldung in der VS Code Console sehen:


Wir starten unser Webpart zunächst einmal in der lokalen Workbench, um zu sehen, ob es richtig funktioniert. Das machen wir, indem wir den folgenden Befehl in der VS Code Console eingeben:

gulp serve

Die lokale Workbench öffnet sich im Browser und wir fügen unser Webpart hinzu:

Wenn wir alles richtiggemacht haben, sehen wir folgendes Ergebnis:

Nachdem wir festgestellt haben, dass unser Webpart funktioniert, können wir uns nun um die Einbindung von AngularJS und Kendo UI kümmern. Dazu müssen wir die entsprechenden NPM-Packages sowie die Type Definitions für TypeScript installieren.

Wir beginnen zunächst mit AngularJS. Über den folgenden Befehl installieren wir das NPM-Package für AngularJS:

npm install angular --save

Anschließend installieren wir die Type Definitions:

npm install @types/angular --save

Nun müssen wir AngularJS in unserem Webpart referenzieren. Um die Funktionsweise zu testen, fügen wir eine Textbox hinzu und geben den eingegebenen Text direkt darunter aus.

Dazu gehen wir in die Datei src/webparts/kendo/KendoWebpart.ts und passen diese wie folgt an:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './KendoWebPart.module.scss';
import * as strings from 'KendoWebPartStrings';

export interface IKendoWebPartProps {
  description: string;
}

import * as angular from "angular";
angular.module("KendoWebpart", []);

export default class KendoWebPartWebPart extends BaseClientSideWebPart<IKendoWebPartProps> {

  public render(): void {
    if (this.renderedOnce == false) {
      this.domElement.innerHTML = `<div>
              <p>
                Text: <input type="text" ng-model="text" />
              </p>
              <p>
                Your Text: {{ text }}
              </p>
            </div>`;
      angular.bootstrap(this.domElement, ["KendoWebpart"]);
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Vor der Definition unserer Webpart-Klasse binden wir AngularJS ein und erstellen ein neues AngularJS Module mit dem Namen KendoWebpart. Anschließend passen wir noch die Render-Methode des Webparts entsprechend an. Wir erstellen ein Input-Element und geben den Text darunter wieder aus. Außerdem erstellen wir per Bootstrap das AngularJS Module.

Danach starten wir die lokale Workbench mit unserem bekannten Befehl

gulp serve

und testen das Webpart. Das Ergebnis sollte ähnlich der Abbildung aussehen:

Wenn wir etwas in der TextBox eingeben, sollte sich Inhalt darunter ändern.

Nach dem wir AngularJS integriert haben, widmen wir uns nun dem Einbinden von Kendo UI. Dazu installieren wir zunächst das Kendo UI Package. Wir verwenden für unser Beispiel die kostenlose Version Kendo UI Core:

npm install kendo-ui-core --save

Außerdem installieren wir die dazugehörigen Type Definitions:

npm install @types/kendo-ui --save

Anschließend binden wir Kendo UI in unser Webpart ein und wollen eine Kendo UI DatePicker erstellen. Dazu passen wir unsere Webpart-Datei wie folgt an:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { SPComponentLoader } from "@microsoft/sp-loader";
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './KendoWebPart.module.scss';
import * as strings from 'KendoWebPartStrings';

export interface IKendoWebPartProps {
  description: string;
}

import * as angular from "angular";
require("kendo-ui-core");
angular.module("KendoWebpart", ["kendo.directives"]);

export default class KendoWebPartWebPart extends BaseClientSideWebPart<IKendoWebPartProps> {
  
    protected onInit(): Promise<void> {
      const promise: Promise<void> = new Promise<void>((resolve: () => void, reject: () => void) => {
        resolve();
      });
  
      SPComponentLoader.loadCss(`https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-office365.min.css`); 
      SPComponentLoader.loadCss(`https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.office365.min.css`); 
      SPComponentLoader.loadCss(`https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.office365.mobile.min.css`);
  
      return promise;
    }

  public render(): void {
    if (this.renderedOnce == false) {
      this.domElement.innerHTML = `<div>
              <p>
                Date: <input kendo-date-picker />
              </p>
              <p>
                Text: <input type="text" ng-model="text" />
              </p>
              <p>
                Your Text: {{ text }}
              </p>
            </div>`;
      angular.bootstrap(this.domElement, ["KendoWebpart"]);
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Direkt nach dem Laden von AngularJS binden wir Kendo UI ein. Kendo UI benötigt verschiedene CSS-Dateien, die wir aus dem Telerik CDN laden. Dazu überschreiben wir in unserem Webpart die onInit-Methode und binden die CSS-Dateien ein. Den dazu benötigten SPComponentLoader laden wir am Anfang unserer Datei.

Nachdem wir die Änderungen durchgeführt haben, starten wir das Webpart in unserer lokalen Workbench und bekommen folgendes Ergebnis:

Wie wir sehen, wird der Kendo UI DatePicker nicht als solcher dargestellt. Ein Blick in die Developer Console des Browsers verrät uns auch warum:

Die AngularJS Directiven von Kendo UI benötigen jQuery. AngularJS verwendet standardmäßig nur jQuery Lite. Wir müssen also jQuey nun unserem Webpart hinzufügen. Hierfür installieren wir jQuery per NPM:

npm install jquery --save

Zusätzlich müssen wir sicherstellen, dass AngularJS wie in der Fehlermeldung beschrieben, vor Kendo UI geladen wird. In unserem Webpart definieren wir das Laden von AngularJS aber bereits vor Kendo UI. Dies kann also nicht die Lösung sein. Über die Datei config/config.json können wir diese Abhängigkeit wie folgt definieren:

{
    "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
    "version": "2.0",
    "bundles": {
      "kendo-web-part": {
        "components": [
          {
            "entrypoint": "./lib/webparts/kendo/KendoWebPart.js",
            "manifest": "./src/webparts/kendo/KendoWebPart.manifest.json"
          }
        ]
      }
    },
    "externals": {
      "jquery": {
        "path": "node_modules/jquery/dist/jquery.js",
        "globalName": "jQuery"
      },
      "angular": {
        "path": "node_modules/angular/angular.js",
        "globalName": "angular",
        "globalDependencies": [
          "jquery"
        ]
      },
      "kendo": {
        "path": "node_modules/kendo-ui-core",
        "globalName": "kendo",
        "globalDependencies": [
          "jquery",
          "angular"
        ]
      }
    },
    "localizedResources": {
      "KendoWebPartStrings": "lib/webparts/kendo/loc/{locale}.js"
    }
  }
  

Starten wir nun unser Webpart neu, können wir folgende Darstellung sehen:

Nun wird unser Input-Element auch als Kendo UI DatePicker dargestellt.

Wie man sehen konnte, gibt es bei der Einbindung von AngularJS und Kendo UI in ein SharePoint Framework Webpart ein Hürden, die man meistern muss. Anschließend steht einem aber die gesamte Control Collection von Kendo UI zur Verfügung.
Das Beispiel-Projekt steht ihr euch im GitHub Repository der SharePointJungs zur Verfügung.

Leave a Comment

Your email address will not be published. Required fields are marked *