How to validate the SPFx Web part through UI components before deploying the app into the site


Manimekalai
Technology Specialist
Published On :   06 May 2018
Visit Count
Today :  1    Total :   431



Yes, there is a way to apply external CSS on SharePoint workbench

Use the below set of code on your render method for react Element of “testwebpart.ts file” to apply external CSS to your workbench

 public render (): void {
 
 if (Environment.type === EnvironmentType.SharePoint) {//Modern SharePoint page
 
 SPComponentLoader.loadScript("/Style%20Library/SCRIPTS/jquery-1.12.2.min.js").then(() => {
 
 SPComponentLoader.loadScript("/Style%20Library/SCRIPTS/bootstrap.min.js").then(() => {
 
 this.test(); // Call your method here
 
 });
 
 });
 
 }
 
 else {
 
 console.log("Entering into the code ..")
 
 this.test();
 
 }
 
 }
 

Once you are applied the above code, run the gulp serve to test your web part.

Here you go!

You are ready to test UI of the web part on your local workbench.

Categories