SharePoint Framework: Erstellen eines Suchwebparts

06. März 2017
SharePoint
Im zweiten Teil der Blogpost Reihe möchte ich euch nun zeigen, wie man die SharePoint Suche in einem SharePoint Framework WebPart anbindet. Der Yeoman Generator unterstützt derzeit nur WebParts ohne irgendwelche Frameworks und dem React Framework. Da ich selbst mit React noch nicht so vertraut bin, verwende ich AngularJS in meinem erstellten WebPart.

1. Erstellen eines zusätzlichen WebParts im Projekt

Um ein neues WebPart in eurem vorher erstellten Projekt zu generieren, geht ihr mit einer Kommandozeile wieder in euren HelloWorldWebPart Ordner und ruft den Yeoman Generator auf mit:
yo @microsoft/sharepoint
Danach werdet ihr gefragt wie ihr euer neues WebPart nennen wollt. Ich nenne es jetzt Beispielhaft SiteSearchResults, da wir mit dem WebPart Suchergebnisse anzeigen wollen. 
 
 
Nachdem alle Dateien erstellt wurden könnt ihr wie im ersten Blog Post beschrieben, mit gulp serve das „SiteSearchResults“ WebPart  anzeigen lassen.

2. Einbinden von AngularJS in WebPart

Da ich AngularJS in meinem erstellten WebPart benutzen möchte muss ich dieses erstmal in dem Projekt installieren mit dem NPM Kommando
npm install angular –save
Im SharePoint Framework wird alles mit TypeScript geschrieben, deswegen müssen zusätzlich die Typings für Angular installiert werden mit
npm install @types/angular –save
Danach kann in eurem WebPart AngularJS einfach importiert und verwendet werden mit der Zeile
import * as angular from 'angular'  

3. Erstellen des WebPart Templates mit AngularJS

Da der folgende Teil sehr Code lastig ist, gehe ich nur auf die Kernkomponenten ein. Den kompletten Source Code könnt ihr im Github finden : https://github.com/S3bb1/SiteSearchResults-SPF-WebPart
 
Zu allererst müssen wir in der render() Methode im WebPart unser Template für die Angular App definieren. Dies passiert einfach indem wir auf der this Variable das innerHTML auf dem domElement setzen:
 
  public render(): void {
    if (this.renderedOnce === false) {
      this.domElement.innerHTML = `
          <div data-ng-controller="WebPartController as vm">
          </div>`;
      angular.module('searchresultapp')
      .constant("webUrl", this.context.pageContext.web.absoluteUrl)
      .constant("webTitle", this.context.pageContext.web.title);
      this.$injector = angular.bootstrap(this.domElement, ['searchresultapp']);
    }
  }
 
Wie ihr bei der Funktion seht, ist um das setzen des domElement’s eine if Abfrage. Diese wird benötigt, weil das SharePoint Framework die render() Methode bei jeder Konfigurationsänderung des WebParts ausführt. Dies würde bei Angular zu Problemen führen, weil man das Framework nur einmal „bootstrappen“ darf.
 
Weiterhin seht ihr verschiedene Konstanten die an der Angular App gesetzt werden. Diese dienen dazu verschiedene Statische Variablen wie die aktuelle Web Url oder den Web Titel vom SharePoint Framework an die Applikation weiterzugeben.
 
Alle vorhandenen Variablen auf dem context findet ihr hier: https://sharepoint.github.io/modules/_sp_client_base_.html 

4. Die Angular Applikation

Um unsere Angular App nun zu erstellen müssen wir zuerst die App Struktur für Angular Applikationen erzeugen. Das bedeutet, dass wir uns Services, Controller etc. mittels TypeScript erstellen. 
 
Ich habe einen Controller für die Anzeige der Suchergebnisse und einen Search Service, der die SharePoint Suche absetzt und parsed, erzeugt.
 
Der Controller setzt beim Starten eine SharePoint Suchquery über den Search Service ab und sucht alle Elemente die auf dem aktuellen SharePoint Web existieren. In dem Search Service werden auch die Konstanten die wir im WebPart definiert haben genutzt.
 
Damit die ganze Angular Applikation erstellt wird müssen wir eine extra TypeScript Datei erstellen die die ganzen Controller und Services in ein Angular Modul packen. Dazu erstellen wir eine app-modules.ts Datei und erstellen dort das Modul:
 
import * as angular from 'angular';
import WebPartController from './WebPartController';
import SearchService from './SearchService';
import 'ng-office-ui-fabric';

const searchResultApp: ng.IModule = angular.module('searchresultapp', [
  'officeuifabric.core',
  'officeuifabric.components'
]);
searchResultApp
  .controller('WebPartController', WebPartController)
  .service('SearchService', SearchService);
 
In dieser Datei importieren wir alle Services und Controller und packen diese in ein Angular Modul zusammen. Die app-modules.ts muss dann nur noch per Import in der WebPart TypeScript Datei importiert werden damit die Applikation geladen und geboostrapped werden kann.
 
Zum Stylen habe ich das Microsoft Framework Office UI Fabric für AngularJS genutzt http://ngofficeuifabric.com/

5. Ergebnis

Wenn nun alles fertig ist, kann mit gulp serve das WebPart kompiliert werden. Auf der SharePoint Workbench sieht es dann so aus:
 
 
Im nächsten Blog Post zeige ich euch dann wie ihr das WebPart in eine SharePoint App verpackt und überall ausliefern könnt.
 
 

Neuen Kommentar schreiben