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 {
  positionabsolute ;
  z-index100;
}

.themeBackground{
  background-color:  "[theme: themePrimary, default: #0078d7]";
}

.beforeGrad{
  z-index101;
  width20px;
  background-imagelinear-gradient(to leftrgba(0,0,0,0), "[theme: themePrimary, default: #0078d7]")
}

.afterGrad{
  z-index101;
  width20px;
  background-imagelinear-gradient(to rightrgba(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(bannerUrlsiteUrllistNamefileName): 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(bannerUrlbannerHeight): 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(nodenull).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 headany = 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

Comments

Popular posts from this blog

Use Power Automate to create a Document Set – The easy way!

Power Automate - Update SharePoint item metadata using only variables