- At first create your solution named as “itemwebpart” by using “yo @microsoft/sharepoint” as given below:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd1-1.png)
- 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
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd2-1.png)
- 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.
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd3-1.png)
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.
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd5-1.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd6-1.png)
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 :
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd7-1.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd8-2.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd9-1.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd10-1.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd11.png)
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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd12-1024x406.png)
- 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:
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd13.png)
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd14.png)
![](https://www.softreetechnology.com/wp-content/uploads/2021/01/dd15.png)
Conclusion:
Dear viewers in this blog I am displaying site users and site groups of the SharePoint site in the web part by using react in spfx.
Keyword :
“Retrieve site users and site groups in spfx”.