0

I am working on a SharePoint online modern team site, and I am following these steps to inject custom CSS inside my pages @ https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ .. now it worked well, where i added this inside my .ts file:-

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 'StartApplicationCustomizerStrings';

const LOG_SOURCE: string = 'StartApplicationCustomizer';

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

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

    @override

    public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
  
      const cssUrl: string = this.properties.cssurl;
      if (cssUrl) {
          // 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";
          head.insertAdjacentElement("beforeEnd", customStyle);
      }
  
      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="Start"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="a7074bac-2326-4ba6-8061-4931c05f47f0"
        ClientSideComponentProperties="{&quot;cssurl&quot;:&quot;/Style%20Library/custom.css&quot;}">
    </CustomAction>
</Elements>

now it is working well on all the pages >> but I am not sure how I can modify my SPFX to do the following:-

  1. only run the extension on the home page of the site?

Is this possible? thanks

John John
  • 1
  • 72
  • 238
  • 501

1 Answers1

0

Not sure you still looking for answer. But posting this suggestion for other people. Check for this.context.pageContext.legacyPageContext["isWebWelcomePage"]. If it is true that means it is the homepage of the site.

Render whatever you have to only if you get this flag true else dont.

Krutika
  • 1
  • 2