Tutorium: Visual Studio 2017 + Angular 4 = SharePoint-Online-Add-in

Doch was ist mit dem „richtigen“ Visual Studio? Werden wir bei seiner Verwendung im Vergleich zu den anderen leichten Code-Editoren wie VS-Code irgendetwas gewinnen?
Im vorliegenden Artikel würde Oleksandr Shapoval, .NET-Experte bei Infopulse gerne Licht in die Vorteile des neuesten Visual Studio 2017 von Microsoft für die Softwareentwickler bringen, die mit Angular 4 im Kontext der SharePoint-Add-in-Entwicklung arbeiten.

Setup der Entwicklungsumgebung

PSA: Der Quellcode des Demoprojekts ist auf GitHub verfügbar.

Beginnen wir als Erstes mit dem Aufbau unserer Entwicklungsumgebung.

Visual Studio 2017. Das Wichtigste zuerst: Wir brauchen die neueste Version von Visual Studio, die Sie von der offiziellen Webseite herunterladen können. Sie können die für Ihre Bedürfnisse am besten geeignete Version auswählen, bitte schauen Sie sich dazu den detaillierten Versionsvergleich auf der entsprechenden Seite. Wir empfehlen VS Professional, weil man damit auch mit kommerziellen Projekten arbeiten kann und es viele mitgelieferte Projektvorlagen für die häufigsten Aufgaben gibt.

Visual Studio 2017 bietet eine Reihe von vorgefertigten Projektvorlagen für SharePoint und unterstützt verschiedene SharePoint-Versionen. Anhand dieser Vorlagen können Sie sowohl eine klassische On-Premise-Lösung für SharePoint 2010/2013/2016 als auch ein leichtes Add-in für SharePoint Online erstellen. Allerdings sind diese Vorlagen meist eher für die ASP.NET-basierte oder „saubere“ Web-Entwicklung geeignet.

Um eine fertigeUmgebung für die Angular-basierte App-Entwicklung vorzubereiten, müssen wir einige zusätzliche Komponenten installieren und die Projektstruktur etwas verbessern.

Node.js + NPM. Laden Sie den Node Package Manager (NPM) herunter und installieren Sie ihn zusammen mit Node.js von der offiziellen Webseite. Beide Komponenten werden in einer einzigen Installationsdatei mit einem einfachen Installationsansatz mit dem Weiterklicken zur Verfügung gestellt. Daher sollten Sie keine Probleme mit der Installation in der Windows-Umgebung bekommen.

Webpack. Nun werden Sie einen Modulbündler benötigen. Aus unserer Erfahrung heraus raten wir zu Webpack. Um es zu installieren, führen Sie den folgenden Befehl in Command Prompt oder Package Manager Console in Visual Studio aus:

npm install –save-dev webpack

Erweiterte Setup-Einstellungen finden Sie auf der offiziellen WebPack-Seite auf npmjs.com.

SharePoint Online. Das Allerwichtigste kommt zum Schluss: Wir brauchen einen Sandkasten in Form von einer neuen und glänzenden SharePoint-Online-Seite. Für diese Demo verwenden wir die kostenlose Testversion der Office-365-E3-Umgebung. Eine detaillierte Beschreibung dazu können Sie in der wunderbaren von Chris O’Brien geschriebenen Anleitung finden. Sie können den zweiten Teil des Artikels über Azure VM überspringen, wenn Sie Ihren eigenen Desktop als Entwicklungsumgebung verwenden wollen.

Wichtig! Bitte beachten Sie, dass Sie zu Entwicklungszwecken eine separate Seitensammlung anhand der Vorlage für die Entwicklungsseiten anlegen müssen. Dieser Schritt ist für das fehlerfreie Deployment von Visual Studio erforderlich.

Was den Aufbau der lokalen IIS für das neue SharePoint-Framework angeht, so ist er nun überflüssig, da wir einen reinen Client-Code schreiben wollen.

Projekt-Setup

Nun ist es an der Zeit, die Projektstruktur für das Add-in zu bestimmen.

Vorlagenbasierte Erstellung

Als Grundlage für die Angular-basierten Add-ins verwenden wir derzeit die Standardvorlage “SharePoint Add-in”. Nach der Verbindung mit der Sandkastenseite, der Auswahl des Hosting-Modells (für diese Demo wurde ein SharePoint-gehostetes Add-in ausgewählt) und der Bestätigung der SharePoint-Version (momentan werden SharePoint 2013, 2016 und Online unterstützt) erhalten wir die folgende Lösungsstruktur, wie auf der Abbildung 1 unten dargestellt:

Abbildung 1. OOTB-Struktur der Lösung

Strukturmodifizierung

Um unser frisch erstelltes Add-in-Projekt in ein Angular-4-basiertes zu konvertieren, müssen wir ein paar Änderungen vornehmen:

• Konfigurationsdateien hinzufügen (package.json, tsconfig.json, Config-Ordner für verschiedene andere Konfigurationsdateien);
• Angular-App-Ordner hinzufügen, für das Speichern der Komponenten und Module;
• [OPTIONAL] Eine index.html-Seite erstellen, mit dem App-Tag und den Verbindungen zu den Skriptdateien für einige lokale Tests;
• npm installim Add-in-Projektordner ausführen, um alle Pakete herunterzuladen, von denen die Lösung abhängt. Die Liste der Abhängigkeiten ist in der json-Datei.

Nach diesen Handgriffen sollte die Struktur unserer Lösung wie auf der Abbildung 2 aussehen:

Abbildung 2. Modifizierte Lösungsstruktur

Die Hauptidee ist, eine Lösung zu bekommen, deren Quelldateien in TypeScript geschrieben sind, und sie in ausführbare JS-Dateien zu kompilieren, die wiederum in die zugeordneten „Scripts“-Ordner automatisch übertragen werden. Da der Satz der kompilierten Dateien dergleiche ist, können wir sie in die Featuredefinition miteinschließen.

Setup-Abhängigkeiten

Um eine konstante Kompilierung und die Substitution der Dateien im Scripts-Ordner des Projekts zu erreichen, ist die zusätzliche Webpack-Einstellung vorgesehen. In package.json gibt es einen speziellen Abschnitt für die Einstellung der kontinuierlichen Bündelung und der Kopieraktivitäten nach der Ausführung von npm start oder npm build.

"scripts": {
"start": "webpack  --config config/webpack.dev.js --progress --colors  --watch",
"test": "karma start",
"build": "webpack --config config/webpack.prod.js --progress --profile --bail"
}

Die detaillierte Konfiguration dieser Aktion ist, wie Sie sehen, in den Dateien config/webpack.[mode].js (je nach Ausführungsmodus).

Nach dem Ändern einer Projektdatei kann der Entwickler seine Deploymentaktivitäten direkt aus dem Visual Studio heraus starten, ohne zusätzliche Schritte für die Substitution der Dateien vornehmen zu müssen.

Entwicklung der Grundfunktionalität

Zu Demonstrationszwecken werden wir eine Funktionalität zum Lesen von Listen hinzuzufügen.

Wir haben eine benutzerdefinierte Liste erstellt, die einige grundlegende Aufgaben enthalten soll. Die detaillierte Listenstruktur ist in der nachfolgenden Tabelle dargestellt:

Nun wurde unsere App-Struktur durch neue Module/Komponenten erweitert:

• SharedComponents– ein technisches Modul, das leer gelassen wurde, aber später mit den üblichen Composite-Komponenten gefüllt werden kann, die rund um die Module/Komponenten der App verwendet werden können.
• TasklistModule– ein Modul, das die Komponente TasklistComponent enthält, die als Gitterelement für die Anzeige der Aufgaben in Form von einer Liste auf der App-Seite fungiert.
• TaskService– eine Klasse, die die Geschäftslogik für die Datenextraktion aus einer SharePoint-Liste einkapselt.
• TasklistModel– eine Klasse, die die Dienstlogik bedient, um sie auf die anderen App-Komponenten zu übertragen, und den Befehl für den Datenabruf asynchron ausführt.
• ITaskPage, ITask– Modellklassen, die das Domänenmodell der Demo abstrahieren

Die Zusammenhänge zwischen den Komponenten/Modulen sind auf der Abbildung 3 dargestellt:

Abbildung 3. Strukturdiagramm der Demo-App

Also haben wir unserer Lösung die auf der Abbildung 4 dargestellte Form der folgenden Struktur der Projektdateien verliehen:

Picture 4. Project structure with list reading functionality

Setup der Berechtigungen

Vor dem ersten Start müssen wir die Add-in-Berechtigungen definieren, wie die zum Ablesen der Informationen aus den Listen oder SharePoint-Diensten. Eine vollständige Liste der möglichen Berechtigungen und Nutzungsebenen finden Sie in der Office-Dev-Center-Dokumentation. Es kann leicht über Visual Studio in der Datei AppManifest.xml erreicht werden, wie auf der Abbildung 5 zu sehen ist:

Picture 5. SharePoint add-in permissions setup

Nach dem Einrichten der Berechtigungen wird unser Add-in den Zugang zu den Ressourcen bekommen, die es braucht.

Zusätzlich werden Sie im Laufe jedes Deployment-/Installationsprozesses die auf der Abbildung 6 folgende praktische detailierte Frage zu den von der Anwendung angeforderten Ressourcen gestellt bekommen:

Abbildung 6. Vertrauensbestätigung im Add-in

UI-Schnickschnack

Wenn es zu der Präsentation der Add-in-Funktionalität für den Endverbraucher kommt, ist es schön, ein angenehmes und reibungslos funktionierendes Erlebnis zu bieten. Zu Demonstrationszwecken haben wir ein externes Modul Angular-2-Datentabelle genommen, das eine Komponente zur Anzeige von Datenelementen in einem Raster enthält.

Außerdem zeigt dieser Fall auch die Rückwärtskompatibilität einer App auf, die auf Angular 4 mit referenzierten Komponenten basiert, die von Angular 2 noch nicht migriert wurden.

Nachfolgend finden Sie detaillierte Schritte für das Setup dieser Komponente (Weitere Beispiele gibt es auf der offiziellen GitHub-Komponentenseite).

Um die Datentabelle mit der Lösung zu verbinden, müssen wir zuerst die Moduldateien herunterladen. Fügen Sie dafür die folgenden Eigenschaften zu der Datei package.json hinzu:

{
     ...,
       "dependencies": {
     ...
       "angular-2-data-table": "0.1.0",
     ...
     },
...
}

Nun müssen wir den Import der Eigenschaften zu app.module und tasklist.module hinzufügen:

...
  import { DataTableModule } from 'angular-2-data-table';
   @NgModule({
     ...
        imports: [
      ...,
          DataTableModule
     ],
...
})

Wir fügen das Objekt DataTableResource in die Komponente Tasklist component ein, um das Sammeln der Aufgaben für die Anzeige der Daten in der Tabelle vorzubereiten:

...
  import { DataTableResource } from 'angular-2-data-table';

  @Component({
        selector: 'tasklist',
        template: require('./tasklist.html')
  })

  export class TasklistComponent implements AfterViewChecked, OnChanges {
         @Input() tasks: ITask[];
         itemResource = new DataTableResource(this.tasks);
         itemCount = 0;
         items: ITask[];

   constructor() {
         this.itemResource.count().then(count => this.itemCount = count);
   }

  ...
 }

Einfügen der Tabelle ins Tasklist-component-Markup:

<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">

    <data-table id="task-grid"

                 headerTitle="Tasks"
                 [items]="tasks"
                 [itemCount]="itemCount"
                 [rowTooltip]="rowTooltip"
                 (reload)="reloadItems($event)"
                 (rowClick)="rowClick($event)"
                 (rowDoubleClick)="rowDoubleClick($event)">

          <data-table-column [property]="'Title'"
                           [header]="'Title'">
          </data-table-column>
          <data-table-column [property]="'Status'"
                           [header]="'Status'">
          </data-table-column>
    </data-table>
</div>

Zusätzliche Stile für die korrekte Anzeige der Tabelle in Tasklist component:

:host /deep/ .data-table-row {
       cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;
}

Am Ende sollten die Datenelemente in Form einer schicken Tabelle wie auf der Abbildung 7 angezeigt werden:

Abbildung 7

In den heutigen modernen Entwicklungsansätzen für die SharePoint-Plattform gibt es Tendenzen zur Verwendung leichter plattformübergreifender Code-Editoren für die Entwicklung von clientseitigen Add-ins. Allerdings haben wir mit unserem Projekt zeigen können, dass das klassische Visual Studio mit seinen integrierten Funktionen, die von Version zu Version erweitert werden, in Bezug auf die High-End-Erfahrung viel leistungsfähiger ist. Außerdem, wenn Sie als Entwickler Open-Source-Tools und/oder Komponenten von Drittanbietern verwenden müssen, sind Sie mit Visual Studio bestens bedient!

Nicht vergessen: Wir haben den Quellcode des Projekts im GitHub hochgeladen. Wir freuen uns auf Ihre Kommentare oder Ihre Fragen und würden das Thema gerne mit Ihnen sprechen!