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.
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?).
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.
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
pageUrlproperties in the config/serve.json file
pageUrlshould be a modern page
- This property is only used during development in conjunction with the
- In the command line navigate to the repository folder and run:
- Run “
gulp serve --config=Christmas1” or “
gulp serve --config=Diwali”
- If more festival components are added the update the serve.json file accordingly
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