Die technische Umsetzung des smarten Adventkalender für O365/SharePoint

Mit dem heutigen zweiten Teil unserer Blogserie (erster Teil könnt ihr hier nachlesen: Ein smarter Adventkalender für mehr Userakzeptanz in O365 / SharePoint), möchten wir euch gerne die technische Umsetzung unseres smarten Adventkalenders näherbringen. Im Grunde basiert er, wie in unserem ersten Blogeintrag schon erwähnt, auf Basis von SharePoint und O365 und ist generell für die Cloud und OnPremise verfügbar.

Die technische Architektur des smarten SharePoint Adventkalenders setzt sich im Grunde aus zwei Listen, einem SPFx Webpart und einem O365 Flow (OnPremise = Powershell-Script) zusammen.

Zwei SharePoint Listen für den Adventkalender

Wir verwenden im Hintergrund eine SharePoint Seitenbibliothek, in denen du pro Kästchen eine Seite für deine Inhalte selbst verwalten kannst. D.h. über die Modern-Pages von SharePoint Online (bzw. normalen Seiten für OnPremise) kannst du pro Tag den Inhalt im WYSIWYG Editor schreiben. Dies gilt natürlich für Bilder, Videos, Text oder auch Microsoft Forms für Umfragen etc. Über zusätzliche Metadaten, wie z.B. Datum legst du fest wann und wie der Inhalt angezeigt wird.

Weiters kannst du definieren, ob ob es sich um ein Gewinnspiel handelt (TeilnehmenAnzeigen – Ja/Nein) und damit festlegen, ob der Benutzer zu diesem Tag bei etwas Gewinnen kann.

SharePoint Adventkalender Liste fuer Inhalte und Gewinne

Handelt es sich um ein Gewinnspiel, gibt es wie zuvor schon erwähnt einen Teilnahme-Button. Für diesen Button gibt es im Hintergrund noch eine eigene Liste wo geloggt wird, an welchem Tag und welchem Spiel welcher User teilgenommen hat.

SPFx Webpart für den Adventkalender

Das Beste an einem Adventkalender sind natürlich die Kästchen mit ein paar kleinen Überraschungen dahinter. Wir wollten in der technischen Umsetzung unseres smarten Adventkalender diese so gestalten, dass sie dreidimensional aussehen und dementsprechend funktionieren.

Die Grundidee ist, dass ein Div die Szene überspannt und die Perspektive erstellt. Im Inneren sitzt der Türrahmen mit dem Flügel in Form der Vorder- und Rückseite. Der Inhalt des Rahmens bleibt sichtbar, wenn die Tür geöffnet wird. Da die Rückseite der Tür mit Sichtbarkeit von hinten ausgeschnitten ist, wird nur der rechte Teil des Inhalts sichtbar. Wenn die Tür gedreht wird, muss der Inhalt der Rückseite um 180 ° um die Y-Achse gedreht werden. Wie die genaue Umsetzung aussieht erfährt in einen der nächsten Blog-Beiträge.

O365 Flow für die Gewinnermittlung

Im Anschluss wählt ein Flow aus dieser Liste eine Gewinnerin oder Gewinner raus.

Die Idee ist es zuletzt, dass ihr bei der Website-Seite als zusätzliche Spalte angeben könnt, wie viele Gewinnerinnen und Gewinner es für den Tag gibt. Der Flow oder das Powershell-Script holt sich diese und verständigt die Personen über ihren Gewinn.

Weiteres Interesse am SharePoint Adventkalender und dessen technischer Umsetzung?

Falls ihr Interesse am Code habt, seht ihr in unseren nächsten Beiträgen noch einiges mehr! Unter anderem wollen wir euch die Random-Ermittlung des Gewinners mit dem O365 Flow und den SPFx Webpart genauer zeigen. Also bleib dran, melde dich im unteren Formular an und verpasse keinen Beitrag!

Wir würden uns sehr freuen, wenn der Smarter Adventskalender auch in deinem Unternehmen zum Einsatz kommen kann. Unser Ziel ist es einen Beitrag leisten zu können, damit eure User SharePoint (noch ein wenig mehr) lieben werden!

Hier kannst du dich mit deiner E-Mail Adresse für unseren Newsletter anmelden, um bei Neuigkeiten zum Smarter.Rocks Adventkalender sofort informiert zu werden: