SPFx — Application customizer — Festivals

This blog post explains how to create an SPFx extension (Application customizer) which adds a festival animation to the pages. At the moment this extension has capability of display 2 festivals (Christmas and Diwali) however, more can be added very easily.

Demo of the extension showing Christmas lights and Diwali
Santa Walking

The way the extension works is pretty straightforward. It uses html and css to display the lights, fireworks and text. I have used the code from the below 3 codepens (or codepen repos?).

  1. Christmas1
  2. Christmas2
  3. Diwali

React components

There is a component for each festival which renders the required HTML. The associated css (scss) does all the hard work of adding some animation.

Festival name property

The extension has a property called “festivalName”. The code checks the value of this property and renders the appropriate component.

Code

The code for this is present in github. Please follow the instructions in readme.md to test it first.

I have submitted a PR in the sp-dev-fx-extensions repo as well. I will update the link once it is merged to the master.

Testing the extension

  • Clone this repository
  • Update the pageUrl properties in the config/serve.json file
  • The pageUrl should be a modern page
  • This property is only used during development in conjunction with the gulp serve command
  • In the command line navigate to the repository folder and run:
  • npm install
  • Run “gulp serve --config=Christmas1” or “gulp serve --config=Diwali
  • If more festival components are added the update the serve.json file accordingly

Deployment

The PnP team produce great videos around SPFx. One of those videos shows how to deploy SPFx extensions globally (tenant wide). Here is the video.

The instructions in that video show how to deploy a sample SPFx extension and the same can be followed for the “Festivals” extension.

Setting the festival name

Once the extension is deployed (see the video in the appendix section below), the name of the festival can be cnnaged by navigating to the “Tenant wide extensions” list in the app catalog site and updating the “festivalName” component properties of “Festivals” extension.

Setting “festivalName” to “Christmas1” will change the UI as shown below

SharePoint developer at Content+Cloud.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store