Historischer Beitrag: Einrichtung und Funktionen beschreiben den Stand bei Veröffentlichung. Das aktuelle Produkt finden Sie unter Smarter Engagement Calendar (vormals Smarter Adventkalender), die Einrichtung in der aktuellen Anleitung.
Im vorigen Beitrag zu unserem Smarter Adventkalender SharePoint Adventskalender – So kann MS FLOW die Gewinne ermitteln haben wir euch einen Einblick in die zufällige Gewinnermittlung mittels Microsoft Flow gegeben. In diesem Beitrag möchten wir euch gerne nähere Informationen zu unserem SPFx Webpart für unseren SharePoint Adventskalender geben.
Grafische Oberfläche im SPFx Webpart
Wir haben für unseren Adventskalender eine grafische Oberfläche mit den zufällig angereihten 24 Kästchen erstellt. Für das Öffnen der Kästchen haben wir eine dreidimensionale Animation eingebaut. Die Türe besteht dabei aus zwei divs, wovon eines für die Vorderseite und eines für die Rückseite der Türe ist. Klickt der Benutzer auf eine Türe, um diese zu öffnen, drehen wir die Tür um 180° um die Y-Achse. Um den dreidimensionalen Effekt darstellen zu können ist es wichtig, dass wir für jedes Kästchen das Hintergrundbild für den jeweiligen Bildausschnitt, welchen wir im Code berechnen, erneut setzen. Dieser wird dann mit der Animation nach hinten geklappt. Hat der User ein Kästchen bereits geöffnet, stellen wir dieses als geöffnet dar und zeigen im Inneren des Kästchen ein weihnachtliches Icon an. Vergangene Tage stellen wir mit einem weißen Overlay dar und den heutigen Tag färben wir mit einem gelben Overlay ein.
Animation des Öffnens der Kästchen
Gewinnspiel unseres Adventskalenders im SPFx Webpart
Öffnet der User ein Kästchen zoomt ein Dialog heran, worin wir den Inhalt des jeweiligen Kästchen darstellen. Die Inhalte der Kästchen pflegen wir in einer SharePoint Liste ein. Es können Fragen, Informationen, Umfragen, etc. eingepflegt werden. Der User kann pro Kästchen an einem Gewinnspiel teilnehmen, indem er im Dialog auf den Button „Teilnehmen“ klickt. Bereits beim Öffnen des Kästchens verbinden wir uns direkt in unserem SPFx Webpart per pnp package zu der SharePoint Liste „SmarterAdventParticipants“ und erstellen einen Eintrag für den User und den jeweiligen Tag. Nachdem der User auf „Teilnehmen“ geklickt hat, bearbeiten wir den bereits erstellen Listeneintrag und setzen das Flag „Teilgenommen“ auf „Ja“.
Haben wir mit unserem SharePoint Adventskalender dein Interesse geweckt? Dann kontaktiere uns noch heute!
