Display Username And Group Name Of A SharePoint Site In A WebPart By Using React In SPFx

In this blog, I am going to describe about that how to display user name and group name of a SharePoint site in a webpart by using react in Spfx.

First create your solution named  “itemwebpart” by using “yo @microsoft/Sharepoint” as given below,

 

 

After that you have to give the information as mentioned below.

• What is your solution name? Listview-webpart
• Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
• Where do you want to place the files? Use the current folder
• Which type of client-side component to create? Web Part
• What is your Web part name? List items
• What is your Web part description? Shows list items from the selected list
• Which framework would you like to use? React

 

 

Then you have to go to your solution.

 

After that you have to import the sp, site users and site groups from @pnp/sp library in your .ts file as given below.

 

import "@pnp/sp/webs";
import "@pnp/sp/site-users";

First step is to declare two collections for site users and site groups in your .ts file, so that you can use them getPropertyPaneConfiguration () method as given below.

 

export default class ListItemsWebPart extends BaseClientSideWebPart < IListItemsWebPartProps > {
        private listsFetched: boolean;
        private userDropDownOptions: IPropertyPaneDropdownOption[];
        private grpDropDownOptions: IPropertyPaneDropdownOption[];

Now use the above two collections getPropertyPaneConfiguration () method as mentioned below,

 

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
        pages: [{
            header: {
                description: strings.PropertyPaneDescription
            },
            groups: [{
                groupName: strings.BasicGroupName,
                groupFields: [
                    PropertyPaneDropdown('userDropDownOptions', {
                        label: strings.userField,
                        options: this.userDropDownOptions
                    }),
                    PropertyPaneDropdown('grpDropDownOptions', {
                        label: strings.grpField,
                        options: this.grpDropDownOptions
                    }),
                ]
            }]
        }]
    };
}

Then you have to create functions for site users and site groups.

 

For site users create a function in your .ts file as mentioned below,

 

private getusersForSite(): Promise < any > {
    var users = sp.web.siteUsers
    return users.get().then((data) => {
        console.log('Total number of lists are ' + data.concat);
        return data;
    });
}

For Site groups create a function in your .ts file as mentioned below,

private getgroupsForSite(): Promise < any > {
    return sp.web.siteGroups.get().then((data) => {
        console.log('Total number of lists are ' + data.concat);
        return data;
    });
}

After that you have to make two dropdown labels for site users and site groups respectively in your en-us. J’s file as mentioned below,

 

define([], function() {
    return {
        "userField": "SiteUsers",
        "grpField": "SiteGroups"
    }
});

Then you have to declare the dropdown labels for site groups and site users in your mystrings.d.ts file as mentioned below,

 

declare interface IListItemsWebPartStrings {
    PropertyPaneDescription: string;
    userFieldlabel: string;
    groupFieldlabel: string;
}
declare module 'ListItemsWebPartStrings' {
    const strings: IListItemsWebPartStrings;
    export = strings;
}

Then you have to call the functions in onPropertyPaneConfigurationStart() function in your .ts file as mentioned below,

 

 

protected onPropertyPaneConfigurationStart(): void {
        this.UserDropdownOptions = !this.listDropDownOptions;
        this.context.propertyPane.refresh();
        this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'users');
        this.getusersForSite().then((response) => {
            for (let i = 0; i < response.length; i++) {
                //now populate the listdropdown array
                this.userDropDownOptions.push({
                    key: response[i].Title,
                    text: response[i].Title
                });
            }
            this.userDropDownOptions = false;
            this.context.propertyPane.refresh();
            this.context.statusRenderer.clearLoadingIndicator(this.domElement);
            this.render();
        });
        this.GrpDropdownOptions = !this.GrpDropdownOptions;
        this.context.propertyPane.refresh();
        this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'groups');
        this.getgroupsForSite().then((response) => {
            for (let i = 0; i < response.length; i++) {
                this.grpDropDownOptions.push({
                    key: response[i].Title,
                    text: response[i].Title
                });
            }
            this.GrpDropdownOptions = false;
            this.context.propertyPane.refresh();
            this.context.statusRenderer.clearLoadingIndicator(this.domElement);
            this.render();
 });

After all above these steps you have to run gulp serve in your solution in command prompt.

 

After that, open web part in your SharePoint site and edit it as mentioned below,

 

 

Then check site users and site groups property pane and notice that site users and site groups on your site are visible in the property pane as mentioned below,

 

 

 

 

 

 

Conclusion

 

Dear viewers of this blog, I am displaying site users and site groups on the SharePoint site in the web part by using react in spfx.