none
Check users corresponding to Sharepoint list RRS feed

  • Question

  • Hi,

    I have a web part having one simple textbox, when we enter email of user, we have to check whether that name is already in a list of onboarded users(there is one list in sharepoint environment which contain names of onboarded user)..so how to do that using react or javascript. Also user can enter multiple emails in textbox so first we have to split those emails by comma or semicolon..




    • Edited by varshagupta Thursday, October 3, 2019 10:27 AM
    Thursday, October 3, 2019 10:24 AM

Answers

  • Hi,

    If you use React in SPfx, please modify the code as below.

    IReactcheckusersProps.ts:

    import { SPHttpClient } from '@microsoft/sp-http';
    export interface IReactcheckusersProps {
      description:string;
      spHttpClient: SPHttpClient;
      siteUrl: string;
    }
    

    Reactcheckusers.tsx:

    import * as React from 'react';
    import styles from './Reactcheckusers.module.scss';
    import { IReactcheckusersProps } from './IReactcheckusersProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
    
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      User: {
        Title:string;
        EMail:string;
      };
      Title: string;
    }
    export default class Reactcheckusers extends React.Component<IReactcheckusersProps,{}> {
      public render(): React.ReactElement<IReactcheckusersProps> {
        return (
          <div className={ styles.reactcheckusers }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <input id="userbox" type="textbox" className={ styles.textbox }/><input id="checkBtn" type="button" value="CheckOnboarded"/>     
                <br/>
                <div id="onboardListContainer" />             
                <br/>
                <div id="noOnboardListContainer" />
              </div>
            </div>
          </div>
        );  
      }
      public componentDidMount(): void {
        this._setCheckBtnEventHandlers();
      }
      private _renderList(items: ISPList[]): void {
         
        let userboxVal: string=(document.querySelector('#userbox') as  HTMLInputElement).value;
        let usersVal:string[];
        usersVal=userboxVal.split(';');
        if(usersVal.length>0){
          let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          onboardHtml += `<th>UserName</th><th>Email</th>`;
          noOnboardHtml += `<th>Email</th>`;
          let isOnboard:boolean=false;
          usersVal.forEach((useremail: string) =>{
            isOnboard=false;
            items.forEach((item: ISPList) => {
              if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
                onboardHtml += `
                <tr>
                <td>${item.User.Title}</td>
                <td>${item.User.EMail}</td>         
                </tr>
                `;
                isOnboard=true;
              }         
            });
            if(!isOnboard){
              noOnboardHtml += `
              <tr>
              <td>${useremail}</td>      
              </tr>
              `;
            }
          });
          
          onboardHtml += `</table>`;
          noOnboardHtml += `</table>`;
          const onboardList: Element = document.querySelector('#onboardListContainer');
          onboardList.innerHTML = onboardHtml;
          const noOnboardList: Element = document.querySelector('#noOnboardListContainer');
          noOnboardList.innerHTML = noOnboardHtml;
        }
      }
      private _getListData(): Promise<ISPLists> {
        return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
              //debugger;
              return response.json();
            });
      }
      private _renderListAsync(): void {    
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
      private _setCheckBtnEventHandlers(): void {
          document.querySelector('#checkBtn').addEventListener('click', () => {         
              this._renderListAsync();          
          }); 
      }
    }
    

    ReactcheckusersWebPart.ts:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    
    import * as strings from 'ReactcheckusersWebPartStrings';
    import Reactcheckusers from './components/Reactcheckusers';
    import { IReactcheckusersProps } from './components/IReactcheckusersProps';
    
    export interface IReactcheckusersWebPartProps {
      description: string;
    }
    
    export default class ReactcheckusersWebPart extends BaseClientSideWebPart<IReactcheckusersWebPartProps> {
    
      public render(): void {
        const element: React.ReactElement<IReactcheckusersProps > = React.createElement(
          Reactcheckusers,
          {
            description:'',
            spHttpClient: this.context.spHttpClient,
            siteUrl: this.context.pageContext.web.absoluteUrl
          }
        );
    
        ReactDom.render(element, this.domElement);
      }
    
      protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
      }
    
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
    
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }
    

    Best Regards,

    Dennis



    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Tuesday, October 15, 2019 9:54 AM
    Tuesday, October 15, 2019 9:02 AM
    Moderator
  • Hi,

    Using $top=3000 to get more than 100 items in REST API.

    ${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id&$top=3000`

    To validate the email address, please refer to the article below.

    JavaScript: HTML Form - email validation

     If you have new question, I would suggest you post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Wednesday, October 16, 2019 4:42 AM
    Wednesday, October 16, 2019 1:39 AM
    Moderator
  • Hi,

    Thanks for marking my reply as answer. I’m pleased to know that the information is helpful to you. I hope you are delighted with the service we provided you.
    Here I will provide a brief summary of this post for your information.

    Requirement

    Create SPFx web part with one simple textbox, when we enter email of user need check whether that name is already in a list of onboarded users.

    Solution:

    Write an example to achieve it.

    IReactcheckusersProps.ts:

    import { SPHttpClient } from '@microsoft/sp-http';
    export interface IReactcheckusersProps {
      description:string;
      spHttpClient: SPHttpClient;
      siteUrl: string;
    }

    Reactcheckusers.tsx:

    import * as React from 'react';
    import styles from './Reactcheckusers.module.scss';
    import { IReactcheckusersProps } from './IReactcheckusersProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
    
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      User: {
        Title:string;
        EMail:string;
      };
      Title: string;
    }
    export default class Reactcheckusers extends React.Component<IReactcheckusersProps,{}> {
      public render(): React.ReactElement<IReactcheckusersProps> {
        return (
          <div className={ styles.reactcheckusers }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <input id="userbox" type="textbox" className={ styles.textbox }/><input id="checkBtn" type="button" value="CheckOnboarded"/>     
                <br/>
                <div id="onboardListContainer" />             
                <br/>
                <div id="noOnboardListContainer" />
              </div>
            </div>
          </div>
        );  
      }
      public componentDidMount(): void {
        this._setCheckBtnEventHandlers();
      }
      private _renderList(items: ISPList[]): void {
         
        let userboxVal: string=(document.querySelector('#userbox') as  HTMLInputElement).value;
        let usersVal:string[];
        usersVal=userboxVal.split(';');
        if(usersVal.length>0){
          let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          onboardHtml += `<th>UserName</th><th>Email</th>`;
          noOnboardHtml += `<th>Email</th>`;
          let isOnboard:boolean=false;
          usersVal.forEach((useremail: string) =>{
            isOnboard=false;
            items.forEach((item: ISPList) => {
              if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
                onboardHtml += `
                <tr>
                <td>${item.User.Title}</td>
                <td>${item.User.EMail}</td>         
                </tr>
                `;
                isOnboard=true;
              }         
            });
            if(!isOnboard){
              noOnboardHtml += `
              <tr>
              <td>${useremail}</td>      
              </tr>
              `;
            }
          });
          
          onboardHtml += `</table>`;
          noOnboardHtml += `</table>`;
          const onboardList: Element = document.querySelector('#onboardListContainer');
          onboardList.innerHTML = onboardHtml;
          const noOnboardList: Element = document.querySelector('#noOnboardListContainer');
          noOnboardList.innerHTML = noOnboardHtml;
        }
      }
      private _getListData(): Promise<ISPLists> {
        return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id&$top=3000`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
              //debugger;
              return response.json();
            });
      }
      private _renderListAsync(): void {    
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
      private _setCheckBtnEventHandlers(): void {
          document.querySelector('#checkBtn').addEventListener('click', () => {         
              this._renderListAsync();          
          }); 
      }
    }

    ReactcheckusersWebPart.ts:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    
    import * as strings from 'ReactcheckusersWebPartStrings';
    import Reactcheckusers from './components/Reactcheckusers';
    import { IReactcheckusersProps } from './components/IReactcheckusersProps';
    
    export interface IReactcheckusersWebPartProps {
      description: string;
    }
    
    export default class ReactcheckusersWebPart extends BaseClientSideWebPart<IReactcheckusersWebPartProps> {
    
      public render(): void {
        const element: React.ReactElement<IReactcheckusersProps > = React.createElement(
          Reactcheckusers,
          {
            description:'',
            spHttpClient: this.context.spHttpClient,
            siteUrl: this.context.pageContext.web.absoluteUrl
          }
        );
    
        ReactDom.render(element, this.domElement);
      }
    
      protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
      }
    
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
    
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Sunday, October 20, 2019 3:18 PM
    Wednesday, October 16, 2019 9:26 AM
    Moderator

All replies

  • Hi,

    Do you want to create a SPFx web part to achieve it?

    We can create People Picker (React) in the web part and then check if the users exists in the list using REST API.

    The following examples with source code for your reference.

    People Picker (React)

    SharePoint CRUD operations

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 4, 2019 8:07 AM
    Moderator
  • Hi,

    Any update on this?




    • Edited by varshagupta Sunday, October 6, 2019 6:01 AM
    Sunday, October 6, 2019 6:01 AM
  • Hi,

    Can you please update with this?




    • Edited by varshagupta Monday, October 7, 2019 1:36 AM
    Monday, October 7, 2019 1:36 AM
  • Hi,

    You can refer to the solution SPFx-OfficeUIFabric-PeoplePicker to build the text box, and modify the OfficeUiFabricPeoplePicker.tsx to check if all the enter users exists in the Onboardings list.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 7, 2019 8:28 AM
    Moderator
  • Hi,

    People picker is implemented on webpart like this:

    <PeoplePicker
    context={this.props.context}
    titleText=" "
    personSelectionLimit={10}
    groupName={""} // Leave this blank in case you want to filter from all users
    showtooltip={false}
    isRequired={true}
    disabled={false}
    selectedItems={this.componentDidMount}
    //errorMessage={(this.state.User.FirstName.length === 0 && this.state.onSubmission === true) ? this.state.required : " "}
    />

    now how to check whether the user we entered is already in the list or it is a new user, I want when I enter name in people picker if name exist then pop up should come "User exist" and if not then user not exist.





    • Edited by varshagupta Monday, October 7, 2019 5:07 PM
    Monday, October 7, 2019 2:21 PM
  • Hi,

    If you don't want to use the solution People Picker (React), and using People Picker control in PnP spfx-controls-react.

    Please use the PeoplePicker control in your code as follows.

    <PeoplePicker
        context={this.props.context}
        titleText="People Picker"
        personSelectionLimit={3}
        groupName={"Team Site Owners"} // Leave this blank in case you want to filter from all users
        showtooltip={true}
        isRequired={true}
        disabled={true}
        selectedItems={this._getPeoplePickerItems}
        showHiddenInUI={false}
        principalTypes={[PrincipalType.User]}
        resolveDelay={1000} />

    And then define a function like below in the code.

    private _getPeoplePickerItems(items: any[]) { console.log('Items:', items);

    //add code to check if the users exists. }

    Then check if the user exists in the _getPeoplePickerItems method.

    More information:

    https://sharepoint.github.io/sp-dev-fx-controls-react/controls/PeoplePicker/

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, October 9, 2019 8:41 AM
    Moderator
  • hi,

    I think people picker will not work in this case, if there are 50 user everytime we have to enter that ,so the requirement is when user click on button ONBOARDED all user whose status in sharepoint list is onBoarded whole list should come at one click, so that we have separate list of boarded user on webpart and separate list of non boarded user on web part.





    • Edited by varshagupta Wednesday, October 9, 2019 1:07 PM
    Wednesday, October 9, 2019 11:10 AM
  • Hi,

    People picker is used to display users from groups and site not from list..I want to display users which are in list and check whether they are onboarded or not. SO I think people picker will not work




    • Edited by varshagupta Thursday, October 10, 2019 6:14 AM
    Thursday, October 10, 2019 6:14 AM
  • Hi,

    Base on your requirement, I write a demo for your reference, I create the SPFx web part with "No javaScript web framework". The code as  below.

    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    import { escape } from '@microsoft/sp-lodash-subset';
    
    import styles from './CheckUsersFromListWebPart.module.scss';
    import * as strings from 'CheckUsersFromListWebPartStrings';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
    
    export interface ICheckUsersFromListWebPartProps {
      description: string;
    }
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      User: {
        Title:string;
        EMail:string;
      };
      Title: string;
    }
    export default class CheckUsersFromListWebPart extends BaseClientSideWebPart<ICheckUsersFromListWebPartProps> {
    
      public render(): void {
        this.domElement.innerHTML = `
          <div class="${ styles.checkUsersFromList }">
            <div class="${ styles.container }">
              <div class="${ styles.row }">
              <input id="userbox" type="textbox" style="width: 500px;"/><input id="checkBtn" type="button" value="CheckOnboarded"/>     
              <br/>
              <div id="onboardListContainer" />
              </div>
              <br/>
              <div id="noOnboardListContainer" />
              </div>
            </div>
          </div>`;
          this._setCheckBtnEventHandlers();
      }
      private _renderList(items: ISPList[]): void {
        let userboxVal: string=(this.domElement.querySelector('#userbox') as  HTMLInputElement).value;
        let usersVal:string[];
        usersVal=userboxVal.split(';');
        if(usersVal.length>0){
          let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          onboardHtml += `<th>UserName</th><th>Email</th>`;
          noOnboardHtml += `<th>Email</th>`;
          let isOnboard:boolean=false;
          usersVal.forEach((useremail: string) =>{
            isOnboard=false;
            items.forEach((item: ISPList) => {
              if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
                onboardHtml += `
                <tr>
                <td>${item.User.Title}</td>
                <td>${item.User.EMail}</td>         
                </tr>
                `;
                isOnboard=true;
              }         
            });
            if(!isOnboard){
              noOnboardHtml += `
              <tr>
              <td>${useremail}</td>      
              </tr>
              `;
            }
          });
          
          onboardHtml += `</table>`;
          noOnboardHtml += `</table>`;
          const onboardList: Element = this.domElement.querySelector('#onboardListContainer');
          onboardList.innerHTML = onboardHtml;
          const noOnboardList: Element = this.domElement.querySelector('#noOnboardListContainer');
          noOnboardList.innerHTML = noOnboardHtml;
        }
      }
      private _getListData(): Promise<ISPLists> {   
        return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
              //debugger;
              return response.json();
            });
      }
      private _renderListAsync(): void {    
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
      private _setCheckBtnEventHandlers(): void {
        this.domElement.querySelector('#checkBtn').addEventListener('click', () => {         
            this._renderListAsync();
        }); 
      }
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
    
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 11, 2019 2:27 AM
    Moderator
  • Hi,

    what if user wants to copy 50names from list and check status of onboarded..using people picker we can select name one by one..but what will be the best solution to check all 50names when copied from list to textbox.




    • Edited by varshagupta Monday, October 14, 2019 8:44 AM
    Monday, October 14, 2019 8:44 AM
  • Hi,

    Did you check my example above?

    In my example, I use a textbox and split the users using ";", then check if the users in the custom list when click the button.

    Best Regards,

    Dennis 


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, October 14, 2019 9:07 AM
    Moderator
  • hi,

    I am writing this code using react using so that I can use fabric ui and all..so what can be come in place of domElement..I am not able to use domElement in .tsx file




    • Edited by varshagupta Monday, October 14, 2019 12:25 PM
    Monday, October 14, 2019 12:25 PM
  • Hi,

    In your reply above, I know you don't want to use the Fabric UI, so I write the example with "No JavaScript web framework".

    Did you modify the code using the solution below?

    https://github.com/giuleon/SPFx-OfficeUIFabric-PeoplePicker/blob/master/src/webparts/officeUiFabricPeoplePicker/components/OfficeUiFabricPeoplePicker.tsx

    In .tsx, we can get the people picker items using "selectedItems" in the "this.state".

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, October 15, 2019 1:41 AM
    Moderator
  • Hi,

    People picker was working but we dont want to use that..its just requiremnet was to do using react..so I tried your code in react but domElement is not working .tsx file.

    I modified your code:I used document.getElementbyId instead of domElement..but its giving null on onboardList.innerHTML

    public render() {
    let userboxVal=this.state.name
    //let userboxVal=(document.getElementById('userbox')["value"])
    let usersVal:string[];
    usersVal=userboxVal.split(';');
    if(usersVal.length>0){
    let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    onboardHtml += `<th>UserName</th><th>Email</th>`;
    noOnboardHtml += `<th>Email</th>`;
    let isOnboard:boolean=false;
    usersVal.forEach((useremail: string) =>{
    isOnboard=false;
    {this.state.items.map(function(item,key){
    if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
    onboardHtml += `
    <tr>
    <td>${item.User.Title}</td>
    <td>${item.User.EMail}</td>
    </tr>
    `;
    isOnboard=true;
    }
    })}
    ;})
    onboardHtml += `</table>`;
    noOnboardHtml += `</table>`;
    const onboardList: Element = document.getElementById('#onboardListContainer');
    onboardList.innerHTML = onboardHtml;
    const noOnboardList: Element = document.getElementById('#noOnboardListContainer');
    noOnboardList.innerHTML = noOnboardHtml;
    return (
    <div>
    <input id="userbox" type="textbox" /><input id="checkBtn" type="button" value="CheckOnboarded"/>
    <br/>
    <br/>
    <div id="onboardListContainer" />
    <br/>
    <div id="noOnboardListContainer" />





    • Edited by varshagupta Tuesday, October 15, 2019 7:07 AM
    Tuesday, October 15, 2019 4:40 AM
  • Hi,

    If you use React in SPfx, please modify the code as below.

    IReactcheckusersProps.ts:

    import { SPHttpClient } from '@microsoft/sp-http';
    export interface IReactcheckusersProps {
      description:string;
      spHttpClient: SPHttpClient;
      siteUrl: string;
    }
    

    Reactcheckusers.tsx:

    import * as React from 'react';
    import styles from './Reactcheckusers.module.scss';
    import { IReactcheckusersProps } from './IReactcheckusersProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
    
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      User: {
        Title:string;
        EMail:string;
      };
      Title: string;
    }
    export default class Reactcheckusers extends React.Component<IReactcheckusersProps,{}> {
      public render(): React.ReactElement<IReactcheckusersProps> {
        return (
          <div className={ styles.reactcheckusers }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <input id="userbox" type="textbox" className={ styles.textbox }/><input id="checkBtn" type="button" value="CheckOnboarded"/>     
                <br/>
                <div id="onboardListContainer" />             
                <br/>
                <div id="noOnboardListContainer" />
              </div>
            </div>
          </div>
        );  
      }
      public componentDidMount(): void {
        this._setCheckBtnEventHandlers();
      }
      private _renderList(items: ISPList[]): void {
         
        let userboxVal: string=(document.querySelector('#userbox') as  HTMLInputElement).value;
        let usersVal:string[];
        usersVal=userboxVal.split(';');
        if(usersVal.length>0){
          let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          onboardHtml += `<th>UserName</th><th>Email</th>`;
          noOnboardHtml += `<th>Email</th>`;
          let isOnboard:boolean=false;
          usersVal.forEach((useremail: string) =>{
            isOnboard=false;
            items.forEach((item: ISPList) => {
              if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
                onboardHtml += `
                <tr>
                <td>${item.User.Title}</td>
                <td>${item.User.EMail}</td>         
                </tr>
                `;
                isOnboard=true;
              }         
            });
            if(!isOnboard){
              noOnboardHtml += `
              <tr>
              <td>${useremail}</td>      
              </tr>
              `;
            }
          });
          
          onboardHtml += `</table>`;
          noOnboardHtml += `</table>`;
          const onboardList: Element = document.querySelector('#onboardListContainer');
          onboardList.innerHTML = onboardHtml;
          const noOnboardList: Element = document.querySelector('#noOnboardListContainer');
          noOnboardList.innerHTML = noOnboardHtml;
        }
      }
      private _getListData(): Promise<ISPLists> {
        return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
              //debugger;
              return response.json();
            });
      }
      private _renderListAsync(): void {    
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
      private _setCheckBtnEventHandlers(): void {
          document.querySelector('#checkBtn').addEventListener('click', () => {         
              this._renderListAsync();          
          }); 
      }
    }
    

    ReactcheckusersWebPart.ts:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    
    import * as strings from 'ReactcheckusersWebPartStrings';
    import Reactcheckusers from './components/Reactcheckusers';
    import { IReactcheckusersProps } from './components/IReactcheckusersProps';
    
    export interface IReactcheckusersWebPartProps {
      description: string;
    }
    
    export default class ReactcheckusersWebPart extends BaseClientSideWebPart<IReactcheckusersWebPartProps> {
    
      public render(): void {
        const element: React.ReactElement<IReactcheckusersProps > = React.createElement(
          Reactcheckusers,
          {
            description:'',
            spHttpClient: this.context.spHttpClient,
            siteUrl: this.context.pageContext.web.absoluteUrl
          }
        );
    
        ReactDom.render(element, this.domElement);
      }
    
      protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
      }
    
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
    
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }
    

    Best Regards,

    Dennis



    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Tuesday, October 15, 2019 9:54 AM
    Tuesday, October 15, 2019 9:02 AM
    Moderator
  • Hi Dennis,

    Thank you it was a great help!

    But here is one problem the url from where we are getting the list,it brings only top 100 items, but what if there are 1000items, so how can we set the limit..

    also how can we apply the validation on emails..that there should be only @.otherwise it should give errors if anyone use any other character.

    ${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id`,





    • Edited by varshagupta Tuesday, October 15, 2019 11:15 AM
    Tuesday, October 15, 2019 9:56 AM
  • Hi,

    Using $top=3000 to get more than 100 items in REST API.

    ${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id&$top=3000`

    To validate the email address, please refer to the article below.

    JavaScript: HTML Form - email validation

     If you have new question, I would suggest you post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Wednesday, October 16, 2019 4:42 AM
    Wednesday, October 16, 2019 1:39 AM
    Moderator
  • Hi,

    Thanks for marking my reply as answer. I’m pleased to know that the information is helpful to you. I hope you are delighted with the service we provided you.
    Here I will provide a brief summary of this post for your information.

    Requirement

    Create SPFx web part with one simple textbox, when we enter email of user need check whether that name is already in a list of onboarded users.

    Solution:

    Write an example to achieve it.

    IReactcheckusersProps.ts:

    import { SPHttpClient } from '@microsoft/sp-http';
    export interface IReactcheckusersProps {
      description:string;
      spHttpClient: SPHttpClient;
      siteUrl: string;
    }

    Reactcheckusers.tsx:

    import * as React from 'react';
    import styles from './Reactcheckusers.module.scss';
    import { IReactcheckusersProps } from './IReactcheckusersProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
    
    export interface ISPLists {
      value: ISPList[];
    }
    export interface ISPList {
      User: {
        Title:string;
        EMail:string;
      };
      Title: string;
    }
    export default class Reactcheckusers extends React.Component<IReactcheckusersProps,{}> {
      public render(): React.ReactElement<IReactcheckusersProps> {
        return (
          <div className={ styles.reactcheckusers }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <input id="userbox" type="textbox" className={ styles.textbox }/><input id="checkBtn" type="button" value="CheckOnboarded"/>     
                <br/>
                <div id="onboardListContainer" />             
                <br/>
                <div id="noOnboardListContainer" />
              </div>
            </div>
          </div>
        );  
      }
      public componentDidMount(): void {
        this._setCheckBtnEventHandlers();
      }
      private _renderList(items: ISPList[]): void {
         
        let userboxVal: string=(document.querySelector('#userbox') as  HTMLInputElement).value;
        let usersVal:string[];
        usersVal=userboxVal.split(';');
        if(usersVal.length>0){
          let onboardHtml: string = 'OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          let noOnboardHtml: string = 'No OnBoard List<br/><table id="TFtable1" class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
          onboardHtml += `<th>UserName</th><th>Email</th>`;
          noOnboardHtml += `<th>Email</th>`;
          let isOnboard:boolean=false;
          usersVal.forEach((useremail: string) =>{
            isOnboard=false;
            items.forEach((item: ISPList) => {
              if(useremail.trim().toLowerCase()==item.User.EMail.trim().toLowerCase()){
                onboardHtml += `
                <tr>
                <td>${item.User.Title}</td>
                <td>${item.User.EMail}</td>         
                </tr>
                `;
                isOnboard=true;
              }         
            });
            if(!isOnboard){
              noOnboardHtml += `
              <tr>
              <td>${useremail}</td>      
              </tr>
              `;
            }
          });
          
          onboardHtml += `</table>`;
          noOnboardHtml += `</table>`;
          const onboardList: Element = document.querySelector('#onboardListContainer');
          onboardList.innerHTML = onboardHtml;
          const noOnboardList: Element = document.querySelector('#noOnboardListContainer');
          noOnboardList.innerHTML = noOnboardHtml;
        }
      }
      private _getListData(): Promise<ISPLists> {
        return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/GetByTitle('Onboardings')/Items?$select=Title,User/Title,User/EMail&$expand=User/Id&$top=3000`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => { 
              //debugger;
              return response.json();
            });
      }
      private _renderListAsync(): void {    
        this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
      }
      private _setCheckBtnEventHandlers(): void {
          document.querySelector('#checkBtn').addEventListener('click', () => {         
              this._renderListAsync();          
          }); 
      }
    }

    ReactcheckusersWebPart.ts:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    
    import * as strings from 'ReactcheckusersWebPartStrings';
    import Reactcheckusers from './components/Reactcheckusers';
    import { IReactcheckusersProps } from './components/IReactcheckusersProps';
    
    export interface IReactcheckusersWebPartProps {
      description: string;
    }
    
    export default class ReactcheckusersWebPart extends BaseClientSideWebPart<IReactcheckusersWebPartProps> {
    
      public render(): void {
        const element: React.ReactElement<IReactcheckusersProps > = React.createElement(
          Reactcheckusers,
          {
            description:'',
            spHttpClient: this.context.spHttpClient,
            siteUrl: this.context.pageContext.web.absoluteUrl
          }
        );
    
        ReactDom.render(element, this.domElement);
      }
    
      protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
      }
    
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
    
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Sunday, October 20, 2019 3:18 PM
    Wednesday, October 16, 2019 9:26 AM
    Moderator
  • Hi,

    It correctly checks for email ID of user..but if user wants to check using user ID suppose abc12..which is in Active directory also..then it always give not on boarded..so how to check using both email and its user ID.




    • Edited by varshagupta Sunday, October 20, 2019 3:23 PM
    Sunday, October 20, 2019 3:23 PM