March 19, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

SPFx – Inject CSS and JS files in SharePoint Modern Pages

Today, I will explain how we can easily inject custom .css and .js files in a modern SharePoint site.

I have to admit, this is not what Microsoft recommends you to do when it comes to customise your SharePoint design.

However, for some very particular scenarios, you might need to step up a bit and add your own CSS and JS codes there.

I had to create a wiki site which had to look very basic (same as the gov.uk site), with mainly content. So I had to strip the sharepoint bars and menus in addition to a very specific requirements, which were around the side navigation.
My task was to dynamically (or recursively)  browse the “SitePages” folders and generate a three levels menus from the content of the “SitePages” library.


 

So, first you will need to create you SharePoint Framework Development environment.

In my previous article, I covered the steps required to prepare the dev environment.

Setting up SharePoint Framework Development Environment

1- Create a project folder

This step is optional, I will create a new folder in my desktop (did not want to overthink this), to host my project file.

2- Using Yeoman Generate, create a new project

Second, using the Yoman Generator, we will scaffold a new SPFx project.

I will call “yo” first, and select “@microsoft/sharepoint” scaffolding template.

3- Define the project type and details

This step is very important, you will need to make sure that you are:

  • Selecting “Extension” as the type of client-side component,
  • and, “Application Customizer” as the type of client-side extension.

 

I will call my solution SPInject (SharePoint-Inject).

4- The magic !

At this stage, you have an brand new SPFx project for an Application Customizer Extension.

You can type “code .” to open the project folder in VS Code, or you can just open the solution in your preferred IDE.

Assuming, you have already created your .css and .js files to the a location in SharePoint.

The next step, is to navigate to

src/extensions/SpInjectApplicationCustomizer.ts” file, and locate the “onInit” function

Now, replace the “onInit” function’s code by the following:

public onInit(): Promise<void> {
     // Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
     let CssURL: string = "/sites/InstituteWiki/SiteAssets/wiki.css";
     let JsURL: string = "/sites/InstituteWiki/SiteAssets/wiki.js";
     if (CssURL) {
       //========= WIKI.CSS ========
       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);
 
       //========= WIKI.JS ========
       let CustomScript: HTMLScriptElement = document.createElement("script");
       CustomScript.src = JsURL;
       CustomScript.type = "text/javascript";
       head.insertAdjacentElement("beforeEnd", CustomScript);
     }
     //this.LoadMenu();
     return Promise.resolve();
   }

 

That’s is! you’re almost done.

5- Package and deploy your solution

Final stage of the process, package and deploy your newly created solution.

5.1 Package the solution

Back to your preferred terminal,

Run the following command to bundle the project

gulp bundle --ship

Next, we need to package the solution to generate the final .sppkg file.

gulp package-solution --ship

5.2 Deploy the solution

Once you have packaged your solution, a new .sppkg file will be created under “sharepoint/solution” folder.

You will need to import the .sppkg file to your SharePoint App catalogue and add the newly created app to your site.

Open source code

The entire code of the solution is available from my GitHub –> https://github.com/samirlogisam/