0

I have to retrieve all users and groups from sharepoint online site,it should be displayed in spfx webpart in below format.Provide me any code examples in React JS.

UserName GroupName user1 Approver

user2 Visitors

user3 visitors Editors

For all users this information has to display, whether the user is not part of the group also he can see who are all present in other group. Sharepoint server side code we can achieve this with Runwithelevatedprivileges. how we can achieve this using spfx webpart ?

1

You could use pnp.js in spfx.

Sample code:

import * as React from 'react';
import styles from './GetlistitemsReact.module.scss';
import { IGetlistitemsReactProps } from './IGetlistitemsReactProps';
import pnp, { Web } from 'sp-pnp-js'
import { escape } from '@microsoft/sp-lodash-subset';
import { ClassCustomer, User } from './ClassCustomer';
import {ISPListCustomerItem} from './ICustomers'
import $ from "jquery";


export default class GetlistitemsReact extends React.Component<IGetlistitemsReactProps, any> {

  public constructor(props:IGetlistitemsReactProps,any)
  {
    super(props);
    this.state={
      items:[],
      users:[]
    }
  }
  public render(): React.ReactElement<IGetlistitemsReactProps> {
    return (
      <div className={ styles.getlistitemsReact }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
            <div className={ "ms-Grid" }>
            <div className={ "ms-Grid-row" }>
             {
               this.state.users.map((user) =>{
                return <div>
               <span>{user.name}</span>+++++<span>{user.group}</span><br/>
               <br/>
               </div>
               })

             }
            </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  public componentDidMount()
  {
    this._getListCustomerData();
  }

  private  async _getListCustomerData():Promise<void>
  {    

    let items;
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
    await web.siteGroups.get().then
      ((response)=>{
        items=response.map(item=>{
          return new ClassCustomer(item)});
        this.setState({items});
      }

      )
      let users:Array<User> =[];
      items.forEach(element => {
        web.siteGroups.getByName(element.LoginName).users.get().then((response)=>{
          response.map(item=>{

            let user=new User(item.Title,element.LoginName);

            users.unshift(user)
          })
          this.setState({users});
        })                  
      });

  }

}

Test result: enter image description here

I did not deduplicate the users array, if you need to deduplicate, you need to write it by yourself.

Updated:

IGetlistitemsReactProps.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IGetlistitemsReactProps {
  description: string;
  context:WebPartContext;
}

ClassCustomer.ts

import { ISPListCustomerItem } from "./ICustomers";

export class  ClassCustomer{
    public LoginName:string;


    constructor(item: ISPListCustomerItem) {
      this.LoginName = item.LoginName;


  }
}

export class  User{
public name:string;
public group:string;

constructor(name: string,group:string) {
  this.name = name;
 this.group=group;

}
}
4
  • hi Amos what these file has ClassCustomer and ICustomers.Need to add new file ? ( import { ClassCustomer, User } from './ClassCustomer'; import {ISPListCustomerItem} from './ICustomers') – Elina May 8 '20 at 12:35
  • check the update – Amos May 11 '20 at 10:00
  • thank you Amos without that above files, i have made some changes in code,now its working.I am new to SPFX and React, to filter the username in array and display the user name only once with list of groups name user is present can you share any reference link. – Elina May 11 '20 at 11:37
  • hi this code will return all site,subsite users and groups.If i want to display the users in only site/subsite level how to achieve. – Elina May 18 '20 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.