Sliding to heaven – A short story of a SPFx Slider Webpart mit React

Im Zuge unseres neuen Produktes novaWorxx hat man sich nach einer zukunftsträchtigen Technologie umgeschaut und diese mit SharePoint Framework, kurz SPFx, gefunden. Dieses ermöglicht die Erstellung von Webparts oder Extensions auf der Basis von TypeScript.

Alle Webparts sind SPFx Webparts unter Verwendung des React Frameworks. Dies wird nativ in SPFx unterstützt und erlaubt schnelles und leichtgewichtiges Rendering von Komponenten.

Im Folgenden möchte ich gezielt auf den Slider Webpart eingehen, der für novaWorxx geschrieben worden ist.

Konfiguration des Sliders

Bevor es in den Aufbau geht, ist es wichtig zu sehen, was für Informationen der Slider Webpart benötigt.

  • Überschrift – wird über dem Slider angezeigt
  • Anzahl der Slides
  • Automatischer Wechsel
  • Verzögerung zwischen dem Wechseln – Zeit, bis zum nächsten Wechsel
  • Animationstyp
  • Quell-SharePoint-Bibliothek – woher kommen die Nachrichten

Aufbau des Sliders

Der Slider selbst besteht aus mehreren Komponenten.

  • Slider – der Container für den Webpart mit Logik
  • SlideContainer – ein Container für die Slides
  • Slide
  • Control – eine Anzeige mit der Möglichkeit die Slide zu ändern

Der Slider (siehe Abbildung 1) selbst beinhaltet die Logik, um über einen Webservice die Nachrichten abzufragen. Dafür wird ein Rest API Call gestartet. Dieser Aufruf hält sich dann an die Restriktionen der Konfiguration, wie die Anzahl und die Quelle. Darüber hinaus steuert dieser die gesamte Anzeige der richtigen Elemente, indem auch der Index des aktuellen Slides an die abhängigen Komponenten gegeben wird

Bildnachweis maglara | Fotolia

Abbildung 1 – Slider

Der SlideContainer (siehe Abbildung 2) dient als Container der Slides und managet diese, indem die relevanten Eigenschaften weitergegeben werden.

Eine Slide zeigt den Inhalt einer Nachrichtenseite. Dies beinhaltet den Titel, Autor, Veröffentlichungsdatum, einen Textausschnitt und den Link zu dem Artikel. Darüber wird links von der Zusammenfassung das erste Bild des Artikels gezeigt.

Bildnachweis maglara | Fotolia

Abbildung 2 – SlideContainer & Slide

Das Control (Abbildung 3) zeigt den aktuellen Stand, welcher Slide angezeigt wird, an. Darüber hinaus kann man mit den Pfeilen entsprechend zum nächsten bzw. vorherigen Slide wechseln. Das setzt den Automatismus für 5 Sekunden zuzüglich der konfigurierten Verzögerung aus, bevor dieser wieder anspringt. Dies trifft jedoch nur zu, sofern der Automatismus eingeschalten ist.

Bildnachweis maglara | Fotolia

Abbildung 3 – Control

Technische Umsetzung

Hier möchte ich auf ausgewählte React Komponenten eingehen. Zum einfacheren Verfassen der Elemente wurde JSX verwendet. JSX ist eine JavaScript Bibliothek, die erlaubt HTML/XML direkt im JavaScript zu schreiben und es dann zu JS zu parsen. Als kleines Beispiel möchte ich jetzt ein paar Code Fragmente präsentieren:

Die Sliderstruktur selbst besteht aus relativ wenig Code.

Abbildung 4 – Ausschnitt der Rendering Methode des Sliders

Hier kommt eine Besonderheit von React/JSX zum Tragen. Die Variable “controlContainer” beinhaltet jeweils immer das relevante Element, was angezeigt werden soll. Hier in diesem Fall gibt es 3 Möglichkeiten: Ladeanimation, Fehlermeldung oder die Unterkomponenten des Sliders (SliderContainer und Control).

Initial wird die Ladeanimation gezeigt und parallel eine asynchrone Anfrage gestartet. Sobald ein Ergebnis zurückkommt, wird überprüft, ob ein Fehler vorliegt. Falls ja, wird die Fehlermeldung eingeblendet. Andernfalls wird mit den zurückgegebenen Daten der Slider Webpart gerendert.

Als nächstes werfen wir einen Blick auf die “doRender”-Methode des Containers.

Abbildung 5 – Rendering Methode des Containers

Wie vorhin gesagt, dient dieses Control nur als Container. Hier wird ein Array aufgebaut, welches die einzelnen Slides beinhaltet. Dieses wird dann in das HTML eingebettet.

Man hätte dieses Konstrukt, aufgrund der Simplizität, auch in den Slider einbauen können, jedoch hätte dass die Flexibilität für die Zukunft beeinträchtigt.

Als letztes biete ich noch einen kleinen Einblick in das Control.

Abbildung 6 – Ausschnitt der Rendering Methode des Controls

Dieses sieht auch sehr übersichtlich aus, jedoch liegen mehrere Überlegungen dahinter.

Es besteht erstmal aus einem Links- und Rechts-Pfeil sowie einer Liste an Punkten. Die Pfeile jeweils haben eine Funktion zugewiesen, die den Index der angezeigten Slide setzt (+/- 1).

Die Punkte symbolisieren jeweils eine Slide. Der Index der aktuellen Slide wird dort verwendet um die aktuelle Position anzuzeigen. Zusätzlich kann man auch auf einen Punkt klicken um zu der verknüpften Slide zu springen. Dies funktioniert ebenfalls über die Funktion “switchSlide”, wo der Übergabeparameter den neuen Index darstellt.

Die Magie an der Funktion ist, dass diese im Slider liegt. Von dort aus wird dann das Re-Rendern des Webparts angestoßen. Der große Vorteil an React ist, dass nur die geänderten Elemente neugerendert bzw. angepasst werden. In unserem Fall wird fast alles über CSS Klassen gesteuert. Daher muss React dann nur CSS Klassen von Elementen entfernen und an andere anhängen, wie zum Beispiel an einem Punkt des Controls oder einer Slide, damit diese angezeigt wird.

Aktuelle Einschränkungen des Slider

Dieser Slider funktioniert nur mit der Modern Experience, weil dort eine spezielle Eigenschaft, “CanvasContent1”, zur Verfügung gestellt wird, damit man auf den Inhalt einer Modern Site zugreifen kann. ​

Zukunftsvision

Dank des modularen Aufbaus, kann man den Slider relativ einfach erweitern. Zum Beispiel kann ohne weiteres eine neue Eigenschaft in der Konfiguration aufgenommen um das Verhalten des Sliders zu steuern. Aktuell gibt es Pläne einen erweiterten Filter anzubieten, sodass man besser steuern kann, welche Elemente im Slider angezeigt werden können.

Was sonst so die Zukunft bringt, ist noch alles offen.

 

Bildnachweise

By |2018-03-22T16:41:30+00:00March 22nd, 2018|Allgemein, Office 365, SharePoint, Web application|0 Comments

About the Author:

Technology Specialist

Leave a Reply

%d bloggers like this:

novaCapta verwendet Cookies, um die Funktionalität dieser Website zu verbessern. Durch die Nutzung dieser Seite stimmen Sie der Verwendung von Cookies zu. Weiterlesen

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close