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.

Get Members of SharePoint Groups in Excel using Power Query

Challenge:

We have several business units. And in that, for each business unit, we have Approvers, Owners, Members and Viewers. The challenge is to get the members of all business units'  "Approvers" SharePoint group in Excel.

Resolution: 

In the previous blog, we have explained about Power Query in Excel and connecting the SharePoint Lists from SharePoint Online.

Now, using Power Query function we would be getting the list members of SharePoint groups. For this, we would be first creating a function which would get the members of any SharePoint group.

• For this, we would go to Data > Get Data > From Other Source(s) > From OData Feed. Then, as per the requirement, we need members of the Approvers groups for all business units. So, in this query, we would be fetching the names of the SharePoint groups having "Approvers" in their names and renaming this as "SPGroups".

https://<domain>/_api/web/SiteGroups?$filter=substringof('Approvers',Title)&$select=Title

• We have the list of SharePoint groups, and now, we would be fetching the members of each SharePoint group, by creating a Power Query function. For this, we would be adding a new blank query and rename it as "GetMemberByGroupName". We know the REST call to get group members is as below:

https://<SiteURL>/_api/web/sitegroups/getbyname('<GroupName>')/users

• So, we would add a parameter "GrpName" as text, which would make a REST Call for each group, and get all the members. The function (in the Advanced Editor) would be like below:

(GrpName as text) as table =>         
let
    Source= OData.Feed("https://<domain>/_api/web/sitegroups/getbyname('"&Text.From(GrpName)&"')/users?$select=Title")
in
    Source

• Now, we would go back to SPGroups (1st query) and in the ribbon Add Column > Invoke Custom function. We would select the function and the column name as a parameter and expand the table we get in Custom column.

• So, here we have the members as per the SharePoint group names.

• Expand "GetMemberByGroupName" column.
  
  
• So, members for the SharePoint group will be extracted here!
  

This way, we can have all the members of the selected SharePoint groups in the Excel file using Power Query.

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