SPFx Christmas Banner Treat

Fancy a Christmas Banner across your SharePoint sites - of course you do.

Download my SPFx Solution which takes a "banner.png" from your root site collection Site Assets library (e.g. https://marnotechnologycom.sharepoint.com/SiteAssets/banner.png) and displays a wonderful Christmas treat. Update the uploaded items Title field to the height you would like e.g. "48px" (without quotes)

The possibilities are endless... note that the sppkg file is built as an application customiser extension.

Fancy something classier:

Enjoy and have a wonderful Christmas break. (Make sure you test it first before rolling it into production... 🤣 )

Here's a link to the Christmas tree image to get you started

If you want to know how to code your own, follow the guide in 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

This also makes use of pnpjs to get the height attribute from the title field so you'll need to run:

npm install @pnp/sp @pnp/graph --save

on your solution area.

Update the AppCustomizer.module.scss to this:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.fairylights {

  position: absolute ;

  z-index: 100;

}

.themeBackground{

  background-color:  "[theme: themePrimary, default: #0078d7]";

}

.beforeGrad{

  z-index: 101;

  width: 20px;

  background-image: linear-gradient(to left, rgba(0,0,0,0), "[theme: themePrimary, default: #0078d7]")

}

.afterGrad{

  z-index: 101;

  width: 20px;

  background-image: linear-gradient(to right, rgba(0,0,0,0), "[theme: themePrimary, default: #0078d7]")

}

 Update the main .ts file to this:

import { override } from '@microsoft/decorators';

import {

  BaseApplicationCustomizer,

} from '@microsoft/sp-application-base';

import styles from './AppCustomizer.module.scss';

import "@pnp/sp/webs";

import "@pnp/sp/lists";

import "@pnp/sp/items";

import { Web } from "@pnp/sp/webs";

/**

 * If your command set uses the ClientSideComponentProperties JSON input,

 * it will be deserialized into the BaseExtension.properties object.

 * You can define an interface to describe it.

 */

export interface IChristmasBannerApplicationCustomizerProperties {

}

/** A Custom Action which can be run during execution of a Client Side Application */

export default class ChristmasBannerApplicationCustomizer

  extends BaseApplicationCustomizer<IChristmasBannerApplicationCustomizerProperties> {

  @override

  

  async _startBannerRender(bannerUrl, siteUrl, listName, fileName): Promise<void>

  {

    const web = Web(siteUrl);

    const r = await web();

    var bannerItem = await  web.lists.getByTitle(listName).getItemsByCAMLQuery({

      ViewXml: `<View><Query><Where><Contains><FieldRef Name='FileLeafRef' /><Value Type='Text'>`+ fileName +`</Value></Contains></Where></Query></View>`,

    }).then(r =>{this._applyBanner(bannerUrl,  r[0].Title);});

  }

  

  async _applyBanner(bannerUrl, bannerHeight): Promise<void>

  {

    var checkExist = setInterval(function() {

      var node = document.getElementById('TipsNTricksButton_container');

      if (node == null) {

      }

      else {

        clearInterval(checkExist);

        var node = document.getElementById('centerRegion');

        node.insertAdjacentHTML('afterbegin',  `<div id="beforeGrad" class="${styles.beforeGrad}"></div><img class="${styles.fairylights}" style="height:` + bannerHeight +`" src="`+ bannerUrl +`" />`);

        node = document.getElementById('HeaderButtonRegion');

        node.insertAdjacentHTML('beforebegin', `<div id="afterGrad" class="${styles.afterGrad}"></div>`);

               

        node =  document.getElementById("O365_MainLink_Me");

        var backgroundColour = window.getComputedStyle(node, null).getPropertyValue("background-color");

        var beforeGradient =  document.getElementById('beforeGrad');

        beforeGradient.style.backgroundImage = "linear-gradient(to left, rgba(0,0,0,0), "+backgroundColour+")";

        var afterGradient =  document.getElementById('afterGrad');

        afterGradient.style.backgroundImage = "linear-gradient(to right, rgba(0,0,0,0), "+backgroundColour+")";

      }  

    }, 500); // check every 500ms

  }

  

  public onInit(): Promise<void> {

    const head: any = document.getElementsByTagName("head")[0] || document.documentElement;

    head.insertAdjacentHTML('afterbegin', `

      <style>

        #leftRegion{ z-index: 101; }

        #rightRegion{ z-index: 101; }

        #O365_HeaderRightRegion{ z-index: 101; }

        #O365_HeaderLeftRegion{ z-index: 101; }

        #HeaderButtonRegion{ z-index: 101; }

        #sbcId{ z-index: 101; }

        #SuiteNavWrapper{z-index: auto !important; }

        .o365cs-base .o365sx-button{ z-index: 101; }

      </style>

    `);

    var bannerUrl = this.context.pageContext.site.absoluteUrl.split("sharepoint.com")[0] + "sharepoint.com/SiteAssets/banner.png" 

    this._startBannerRender(bannerUrl, (this.context.pageContext.site.absoluteUrl.split("sharepoint.com")[0] + "sharepoint.com"), "Site Assets", "banner.png");

    

    return Promise.resolve<void>();

  }

}

Hope it helps