Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx:

January 25, 2021
Posted by: Softree Technology

No Comments

At first create your solution named as “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? WebPart
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 after 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 in getPropertyPaneConfiguration () method as given below.

export default class ListItemsWebPart extends BaseClientSideWebPart<IListItemsWebPartProps> {

private listsFetched: boolean;

private userDropDownOptions: IPropertyPaneDropdownOption[];

private grpDropDownOptions: IPropertyPaneDropdownOption[];

Now use above two collections in 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.js 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: