The technical implementation of the smarter advent calendar for O365/SharePoint

With today’s second part of our blog series (first part you can read here: A smarter advent calendar for more user acceptance in O365 / SharePoint), we would like to introduce you to the technical implementation of our smarter advent calendar. Basically, as mentioned in our first blog entry, it is based on SharePoint and O365 and is generally available for the cloud and OnPremise.

The technical architecture of the smarter SharePoint Advent calendar is basically composed of two lists, an SPFx web part and an O365 flow (OnPremise = Powershell script).

Two SharePoint Lists for the Advent Calendar

We use a SharePoint page library in the background, where you can manage one page for your content per box. This means that you can write the content in the WYSIWYG Editor per day via the Modern Pages of SharePoint Online (or normal pages for OnPremise). This applies, of course, to images, videos, text or even Microsoft Forms for surveys, and so on. Additional metadata, such as date, is used to determine when and how the content is displayed.

You can also define whether it is a sweepstakes (ParticipantAds – Yes/No) and thus determine whether the user can win on that day if there is a price defined.

SharePoint Advent Calendar List for Content and Prizes

If it is a sweepstakes, there is a participation button as mentioned earlier. For this button there is a separate list in the background where you can log, on which day and which game which user participated.

SPFx Web Part for the Advent Calendar

The best thing about an advent calendar are of course the boxes with a few small surprises behind it. In the technical implementation of our smart advent calendar, we wanted to design them in such a way that they look three-dimensional and work accordingly.

The basic idea is that a div spans the scene and creates the perspective. Inside, the door frame sits with the wing in the form of the front and back. The contents of the frame remain visible when the door is opened. Since the back of the door is cut out from behind with visibility, only the right part of the content becomes visible. When the door is rotated, the contents of the back must be rotated 180° around the Y axis. What the exact implementation looks like is found out in one of the next blog posts.

O365 Flow for prizes determination

Afterwards, a flow selects a winner from this list.

The idea is that you can use the website page as an additional column to indicate how many winners there are for the day. The Flow or Powershell script gets them and informs the people about their profit.

Further interest in the SharePoint Advent Calendar and its technical implementation?

If you’re interested in code, you’ll see a lot more in our next posts! Among other things, we want to show you the random determination of the winner with the O365 Flow and the SPFx Web Part. So stick to it, log in to the form below and don’t miss a post!

We would be very happy if the Smarter Advent Calendar can also be used in your company. Our goal is to be able to contribute so that your users will love SharePoint (a little more)!

Here you can subscribe to our newsletter with your e-mail address in order to be immediately informed about news about the Smarter.Rocks Advent Calendar: