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

  • 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:

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”.

Leave a Reply

Your email address will not be published. Required fields are marked *