SPFx — Application customizer — Festivals

Introduction

3 min readDec 13, 2018

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

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?).

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.