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="{"cssurl":"/Style%20Library/custom.css"}">
</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:-
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