1

I want to inject some CSS to my SharePoint page, so I follow those steps to create SPFX Application customizer extension:-

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://*****.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>

Now when I run gulp serve the extension worked well, where the .CSS file took effect >> but when I deploy the SPFX to the app catalogue >> and I added the app inside the site collection >> the SPFx will not load the custom CSS + my browser console will raise this error:-

enter image description here

so why the SPFx is requesting the hello-world-application-customizer.js from local host? and is this the reason why the SPFX is not loading the custom css?

Thanks in advance for any help.

Regards

1 Answer 1

1

You'll need to run the following commands to ensure things are bundled correctly for production:

gulp clean
gulp bundle --ship
gulp package-solution --ship

Now when you deploy to the App Catalog the confirmation dialog will no longer show Localhost but SharePoint Online.

enter image description here

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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