Tag: customizer

I want to inject some CSS to my SharePoint page, so I follow those steps @ https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ to create SPFX Application customizer extension, where i did the following:-

md app-extension
cd app-extension
yo @microsoft/sharepoint

What is your solution name?: app-extension
Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
Which type of client-side component to create?: Extension
What is your Application Customizer name? HelloWorld
What is your Application Customizer description? HelloWorld description

then i added the following code inside the .ts:-

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;
      const scriptUrl: string = this.properties.scripturl;

      const url = window.location.href;
      if (cssUrl && url.toLowerCase()=="https://t****.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx") {
          // 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">');

          

      }
      
      return Promise.resolve();
    }
}

and the following inside the elements.xml:-

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="HelloWorld"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="e1b2d761-b43b-4006-8838-a4ba934e053f"
        ClientSideComponentProperties="{&quot;cssurl&quot;:&quot;/Style%20Library/custom.css&quot;}">
    </CustomAction>
</Elements>

So as shown in the above code I am specifying to only attach the cusotm css if the window.location.href = the url of the home page which is https://t****.sharepoint.com/sites/customeroperations/sitepages/dashboard.aspx in our case. now the above is working on most cases but is failing on the following cases:-

1. let say i am inside the Pages library >> then I click on the “Home” link to open the home page, as follow:-

this will do a partial update to the page and will load the home page content without causing the whole page to load >> where in this cases the SPFX extension will not run.

2. second case>> if I am inside the home page and the SPFX has loaded the custom css file correctly >>then i click on a page inside the news web part >> this will open the news page without refreshing the page >> which will cause the SPFX to run on the news page (which is not the home page)…

so my question is how I can force the SPFX extension to run on partial updates to check the page url, to avoid the above 2 issues?

Thanks in advance for any help.

Regards