How to apply styles dynamically In SPFx web part?

Introduction:

We implemented an intranet portal for a Real Estate Agency based out of Bellevue, Washington, United States. We came across a requirement to apply styles dynamically in the custom SPFx webpart based on the color selected in the property panel of the SPFx webpart. Let's see how this functionality can be achieved.

Requirement:

We need to apply the color of text based on the color selected in the property panel. In the property panel, we have added a textbox, where users can add a color code or a color name that they want as the text color.

Implementation:

We have applied the class name for the div where we are showing texts. In the CSS file, we need to define the color of the text using variables. 

The CSS will be as below:

 .ProjectTitle{  
      color: var(--projectTitleColor);  
 }  

And our HTML will be as below:

 <div className="ProjectTitle">  
      Intranet Portal       
 </div>  

As we can see, in the CSS we have used a variable for applying the color. Now we will assign the value to this variable. First, we will get the value from the text box of the property panel as below:

 var colorName = this.props.TextColor;  

Now we will use colorName variable, to assign a color to the style’s variable. 

 let div = document.createElement('style');  
 div.innerHTML = ':root {-- projectTitleColor: ' + colorName + ' }';  
 document.getElementsByTagName('head')[0].append(div);  

So here we created a new element for style and appended this element in the head element of the page.

Whatever value we assign to the variable – projectTitleColor, it will assign to the color style in the CSS file. Here in this example, we have used a CSS file, but you can also use the same steps for SCSS file as well.

Conclusion:

This is how we can apply dynamic styles. Hope this helps you!

If you have any questions you can reach out our SharePoint Consulting team here.

[Resolved] - "[webpack] 'dist': web-part.js from UglifyJs Unexpected token: name" while building the SPFx package

Introduction

We implemented a Training Management System in SharePoint Online using SharePoint Framework (SPFx) for a Postal and Parcel company based out of Melbourne, Victoria, Australia. We were using all the latest npm packages in the web part and the web part was also working in an expected manner while testing in the workbench. But when we started building the package, it started throwing the error regarding UglifyJs for compiling ES6 code.

So, In this blog, we will learn how to resolve this error and what packages we can install so that it can compile ES6 code.

Issue

When we started with the deployment process and while running the "gulp bundle --ship" command, it throws an error message as "[webpack] 'dist': web-part.js from UglifyJs Unexpected token: name". The reason was the web part was using ES6 code for managing the array objects and UglifyJs was unable to compile the ES6 code.

Resolution

We will be using the below two npm packages as followed.

1. terser-webpack-plugin

This npm package uses "terser" which is itself a JavaScript parser and a compressor toolkit for ES6+. So, by using this package and adding its required dependencies in our solution, it will remove the UglifyJs plugin from the build chain and will also compile the ES6 code which will help us in building our package successfully.

2. webpack-merge

This npm package basically merges the array objects by converting them into a function, then performs its process, and returns the function again, this will help in compiling the ES6 code and helps us in building our package successfully.

Now, let us start with the steps to be followed.

Step 1: In the package.json file, add inside the "devDependencies" section, add the below two packages.

 "terser-webpack-plugin-legacy": "1.2.3",

    "webpack-merge": "4.2.1"

Step 2: In the gulpfile.js, add the below two import lines.

const merge = require('webpack-merge');

const TerserPlugin = require('terser-webpack-plugin-legacy');

Step 3: Now, we need to add the below code in the gulpfile.js just before the line "build.initialize(gulp)". This is the custom configuration code that will help in the process of compiling.

build.configureWebpack.setConfig({

  additionalConfiguration: function (config) {

    let newConfig = config;

    config.plugins.forEach((plugin, i) => {

      if (plugin.options && plugin.options.mangle) {

        config.plugins.splice(i, 1);

        newConfig = merge(config, {

          plugins: [

            new TerserPlugin()

          ]

        });

      }

    });

    return newConfig;

  }

});

Step 4: Finally run the command "npm i" and this will install both the packages which we have added in the package.json file.

Conclusion:

Now, we are all set to build our package by running the command "gulp bundle --ship" and our issue will be resolved. Happy Coding!!

If you have any questions you can reach out our SharePoint Consulting team here.

[Issue Resolved]: Default value of custom property in SPFx web part Property pane is not showing while running in Workbench Mode

Issue:

When we set the default value of custom property in the SPFx web part, it is not getting displayed in the Property pane while code is running in the Workbench mode (debug mode).

As shown below, We've set the default value of "SharePoint Training Custom List Name" custom property as "Training", but it is not displaying in the property pane while code is running mode.

Solution:

When we do any changes in “webpart.manifest” file, it will not reflect directly in the web part if it is in running mode.

To resolve this issue, please follow the below steps:

• Stop the project execution if it is in running mode.
• Re-build the project solution and re-run the project.
• To rebuild the project please run the below-mentioned command respectively:
• gulp clean
• gulp build
• gulp serve
• Navigate to the SharePoint Workbench. Remove the existing web part from the page and add it again to reflect the changes.
• Now, you will be able to see the default value of the custom property which we added for the "SharePoint Training Custom List Name" property in the property pane.

If you have any questions you can reach out to our SharePoint Consulting team here.

Performance issues with SPFx web parts [Solution: Fix it with implementing renderCompleted & isRenderAsync methods]

We mostly encounter performance related issues, like - Page takes very long time to load all features while working with highly customized SharePoint site. To identify performance issue of Custom SPFx web parts, Microsoft suggests to implement RenderCompleted method.

I searched over the internet but did not find any good documentation on how to implement it. After spending time on analysis & research, finally I was able to implement it successfully.

Here, I am providing you with detailed steps to implement renderCompleted & isRenderAsync methods to identify performance of custom webparts.

Solution - To implement such methods, open custom web part source code - solution in Visual studio.

• Open Interface file and add below property to it.
  asynccompfunc:() => void;

• Now, go to the ".ts" file of your custom webpart and add below highlighted code in "Render" Method.

          public render(): void

            {
               const element: React.ReactElement<ISubmitNewsProps> = React.createElement(                                 SubmitNews,

                 {
                    // other properties...,
                    asynccompfunc:this.renderCompleted
                  });

                ReactDom.render(element, this.domElement);   
            }

• Also, add below code after "Render" Method.

           protected renderCompleted(): void { 
                super.renderCompleted();   
           }

           protected get isRenderAsync(): boolean { 
               return true;   
           }

• Now open ".tsx" file and add below code in "componentDidMount" method.

         //Init Function of component mount 

           public async componentDidMount() {
           

            //your code

           

           this.props.asynccompfunc();
         }

After applying all changes in your web part, deploy package and open the page where you have added the webpart.

Click "Ctr + F12". to see the performance of your web part.

Note: This method requires "BaseClientSideWebPart" class to be extended. Application Customizer does not extend this class. So we cannot implement this method in Application Customizer.

If you have any questions you can reach out our SharePoint Consulting team here.