Sliding to heaven – SPFx Slider Webpart mit React umsetzen

Datum

22.03.2018

Dieser Beitrag wurde verfasst von:

Simon Nocher

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

Abbildung 1 – Slider
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.

 

Abbildung 2 – SlideContainer & Slide
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.

Abbildung 3 – Control
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
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
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
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.

Erfahren Sie mehr

novaCapta auf der Fachtagung für Interne Revision
Event
Event

novaCapta auf der Fachtagung für Interne Revision

Das Expertenteam der novaCapta präsentiert am 15. und 16. November ihre innovative Audit Management Lösung auf dem DIIR-Kongress in Dresden. Besuchen Sie unsere...

Valo ist neuer Partner der novaCapta für Intranets
News
News

Valo ist neuer Partner der novaCapta für Intranets

Durch die Partnerschaft mit Valo, dem Ready-2-Go Intranet-Baukasten aus Finnland baut die novaCapta ihr Angebot bei der Umsetzung von schnellen und funktionalen...

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

SharePoint Framework Client-Side Webparts mit React
Blog
Blog

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zur Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts...

Bundesliga-Tippspiel

Bundesliga-Tippspiel

Fußball ist in Ihrem Unternehmen jeden Montag Gesprächsthema Nummer eins? Dann holen Sie sich die Fußball Bundesliga in Ihr Intranet!

novaBirthday

novaBirthday

novaBirthday erweitert Ihr SharePoint-Intranet um ein soziales Feature und kann damit die Akzeptanz und Reichweite verbessern.

Jan
17
Webinar Azure DevOps und Docker Machine
Webinar
Webinar

Webinar Azure DevOps und Docker Machine

DevOps ist in aller Munde, doch was genau verbirgt sich eigentlich hinter dem so viel beschworenen Konzept der IT-Zusammenarbeit? Im Webinar am 17.01.2019 erfah...

End of Life – Eine Applikation wird abgelöst
Blog
Blog

End of Life – Eine Applikation wird abgelöst

Die Stilllegung einer Applikation im Application Lifecycle Management nicht beachtet. Dennoch sollten sie in einem ganzheitlichen Ansatz beachtet werden.

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

SharePoint Fachapplikationen

SharePoint Fachapplikationen

Fachapplikationen für Microsoft SharePoint erweitern den Funktionsumfang von SharePoint in vielfältiger Weise, lassen sich auf individuelle Bedürfnisse zuschnei...

Junge mit rotem Herz aus Filz in der Hand als Symbol der Nächstenliebe
Referenz: Caritasverband Köln

Referenz: Caritasverband Köln

Dem hohen Anspruch an das Qualitätsmanagement wurde nun mit einer neuen SharePoint 2013 basierten Lösung der novaCapta Rechnung getragen.

Strukturen lernen und leben – Praxis Informationsarchitektur
Blog
Blog

Strukturen lernen und leben – Praxis Informationsarchitektur

Teil 1 – Strukturen lernen – Informationsarchitektur erfolgreich vertreten