2

I have the following inside my application customizer SPFX extension, the code is responsible to load custom CSS inside the home page https://***.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx:-

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

/**
 * 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 IHelloWorldApplicationCustomizerProperties {
  // This is an example; replace with your own property
  cssurl: string;
  scripturl: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class HelloWorldApplicationCustomizer
  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {

    @override

    public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
  
      const cssUrl: string = this.properties.cssurl;
      this.context.application.navigatedEvent.add(this ,()=>{
      const scriptUrl: string = this.properties.scripturl;

      const url = window.location.href;
      if (cssUrl && 
      (url.toLowerCase()=="https://***.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx"
      ||
      url.toLowerCase()== "https://***.sharepoint.com/sites/customeroperations"
      ) )
      {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
          let customStyle: HTMLLinkElement = document.createElement("link");
          customStyle.href = cssUrl;
          customStyle.rel = "stylesheet";
          customStyle.type = "text/css";

          const head2: any = document.getElementsByTagName("head")[0] || document.documentElement;
          
          head.insertAdjacentElement("beforeEnd", customStyle);
          head2.insertAdjacentHTML("beforeEnd", '<META HTTP-EQUIV="refresh" CONTENT="300">');

          

      }
      else
      {
        const links = document.getElementsByTagName("link");
        for(let i=0; i < links.length;i++ )
        {


          if(links[i].href.indexOf(cssUrl)>-1){
          links[i].remove();
          }

        }


      }
    });
      return Promise.resolve();
    }
}

now the code is working well, except when I create a new page the custom CSS will be applied to the new blank page although it is not the home page. After some reading I realized that my above code will not work on new page creation, where I found this link @ https://www.eliostruyf.com/handling-page-creation-events-spfx-application-customizer to how to handle page creation navigation... but I am not sure how I need to modify my above code to handle the page creation and not load the custom CSS, since the new page url != the url of the home page?

Thanks

1 Answer 1

3
+100

You basically need to add Elio's code to your Application Customizer class. Add both the bindToHistory and handleNewPageReload methods to your class, and call bindToHistory inside onInit, just after the Log call.

2
  • thanks for the reply.. but can you provide a general code to how to do the merge between my code and Elio's code?
    – John John
    Mar 17, 2021 at 20:49
  • are you able to advice more on this ?
    – John John
    Mar 22, 2021 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.