how to clear client people picker

How to clear a client people picker

ClearClientPeoplePicker("ClientPeoplePicker_TopSpan");

function ClearClientPeoplePicker(controlId)
{
        //var fieldName = id + '_TopSpan';
        var peoplePickerDiv = $("[id$='" + controlId + "']");

        // Get the people picker object from the page.
        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

        var usersobject = peoplePicker.GetAllUserInfo();
        usersobject.forEach(function (index) {
            peoplePicker.DeleteProcessedUser(usersobject[index]);
        });
}

How to get and set People Picker value in react spfx webpart

How to get and set People Picker value in react spfx webpart ?

1.      Add React Webpart as ReactDemo

2.      Open IReactDemoProps.ts file from webpart component folder and  add webpartcontext in webpart interface

import { WebPartContext } from "@microsoft/sp-webpart-base";

// add WebPartContext context on webpart

export interface IReactDemoProps {

                description: string;

                context:WebPartContext;

}

3.      then open .tsx file from component folder

Check below code step by step to add people picker control

import * as React from 'react';

import styles from './ReactDemo.module.scss';

import { IReactDemoProps } from './IReactDemoProps';

import { escape } from '@microsoft/sp-lodash-subset';

//step1 import fabric react, pnp-spfx,pnp  module and, add label and button refrence

import {Label,PrimaryButton} from 'office-ui-fabric-react';

//if this modules is not installed then use the command to install 'npm install @pnp/spfx-controls-react --save'

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

import pnp from 'sp-pnp-js';

//step2 create a interface for controls

export interface IControls

{

  pplControl:any;

}

export interface IPeoplePickerControl

{

  id:string;

  secondaryText:string;

  text:string;

}

//step3 replace IControls Interface with {}

export default class ReactDemo extends React.Component<IReactDemoProps,IControls> {

  //step4 add a constructor

constructor(props)

{

  //step5 define the super method

  super(props);

  //step6 intialize control state to set the default value on page load

  this.state={

    pplControl:[]

  };

  //step9 bind event onchange

  this.PeoplePickerItems=this.PeoplePickerItems.bind(this);

  this.ButtonClick=this.ButtonClick.bind(this);

}

//step7 and 10 add controls in render method

  public render(): React.ReactElement<IReactDemoProps> {

pnp.setup({

  spfxContext:this.props.context

});

    return (

      <div className={ styles.reactDemo }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <Label className={styles.label}>People Picker</Label>

              <PeoplePicker

                context={this.props.context}

                titleText="People Picker"

                personSelectionLimit={3}

                groupName={""} // Leave this blank in case you want to filter from all users

                showtooltip={false}

                isRequired={true}

                disabled={false}

                selectedItems={this.PeoplePickerItems}

                showHiddenInUI={false}

                principalTypes={[PrincipalType.User]}

                resolveDelay={1000}

                />

                <PrimaryButton className={styles.button} onClick={this.ButtonClick} >Get People Picker Value</PrimaryButton>

            </div>

          </div>

        </div>

      </div>

    );

  }

  //step8 to set the state value on changed in people picker control

  private PeoplePickerItems(items: any[])

  {

    this.setState({pplControl:items});

  }

//get people picker value on button click

  private ButtonClick()

  {

   let pplValue:IPeoplePickerControl[]=this.state.pplControl;

   pplValue.forEach(ppl=>

    {

           //get user’s id

                alert(ppl.id);

    });

  }

}

Result:è

How to get and set TextField value in react

How to get and set TextField value in react spfx webpart ?

1.      Add React Webpart

2.      Once your webpart is ready then open .tsx file from component folder and  Import react component module  in your webpart

import {Label, TextField} from 'office-ui-fabric-react';

3.      Check below code step by step to get and set textfield state in react

import * as React from 'react';
import styles from './ReactDemo.module.scss';
import { IReactDemoProps } from './IReactDemoProps';
import { escape } from '@microsoft/sp-lodash-subset';

//step1 import fabric react module, add label and textfield refrence
import {Label,TextField} from 'office-ui-fabric-react';
//step2 create a interface for controls
export interface IControls
{
  FirstName:string;
  LastName:string;
}
//step3 replace IControls Interface with {}
export default class ReactDemo extends React.Component<IReactDemoProps,IControls> {
  //step4 add a constructor
constructor(props)
{
  //step5 define the super method
  super(props);
  //step6 intialize control state to set the default value on page load
  this.state={
    FirstName:"Mohammed",
    LastName:"Waseem"
  };

  //step9 bind event onchange
  this.FirstNameonchanged=this.FirstNameonchanged.bind(this);
  this.LastNameOnChanged=this.LastNameOnChanged.bind(this);
}

//step7 and 10 add controls in render method
  public render(): React.ReactElement<IReactDemoProps> {
    return (
      <div className={ styles.reactDemo }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <Label className={styles.label}>FirstName</Label>
              <TextField value={this.state.FirstName} onChanged={this.FirstNameonchanged}></TextField>
              <Label className={styles.label}>LastName</Label>
              <TextField value={this.state.LastName} onChanged={this.LastNameOnChanged}></TextField>
            </div>
          </div>
        </div>
      </div>
    );
  }


Result1: default value on page load

  //step8 to set the state value on changed in textfield
  private FirstNameonchanged(firstname:any)
  {
    this.setState({FirstName:firstname});
    console.log("FirstName state value is : "+this.state.FirstName);
  }
  private LastNameOnChanged(lastname:any)
  {
    this.setState({LastName:lastname});
    console.log("LastName state value is:"+this.state.LastName);
  }
}

Result 2 :Changed value

How to work on react component

How to use react component in spfx ?

1.      Add React Webpart

2.      Once your webpart is ready then open .tsx file from component folderand  Import react component reference  in your webpart

import {Label} from 'office-ui-fabric-react';

3.      We will add a Label component in render method to show a message on webpart.

public render(): React.ReactElement<IReactDemoProps> {

    return (

      <div className={ styles.reactDemo }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <Label className={styles.title}>Welcome to react component</Label>

            </div>

          </div>

        </div>

      </div>

    );

  }

4.      Result  :è

jQuery datepicker in SPFX

npm install jquery@2 --save
npm install jqueryui --save

npm install @types/jquery@2 --save
npm install @types/jqueryui --save

import { SPComponentLoader } from '@microsoft/sp-loader';
import * as $  from 'jquery';
import 'jqueryui';

 <input type="text" id="txtDate" >

public constructor() {
    super();
    SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
  }

public BindDatePicker()
  {
    $("#txtDate").datepicker();
  }