SPFx - React - OfficeUI Fabric - Assign value from SharePoint List Item to DatePicker and DropDown Controls

Question

Thank you for your reply. I have values stored in SharePoint list. Now I want to provide edit functionality to user so when user selects particular item, I’m showing user the fields in editable mode with existing values fetched from SharePoint list. In readItem() method, I’m able to set Text field and Date field but not able to set selected value (which is stored in SP list under that column) to Dropdown and PeoplePicker and checkbox.

In .ts file:

export interface IProjectName {
        name: string;    
firstdate: Date;
dpselectedItem?: { key: string | number | undefined };
dpselectedItems: IDropdownOption[];    
pplPickerType:string;
userIDs: number[];
userManagerIDs: number[];
Items:IDropdownOption[]; 

}

In .tsx file I have below code under Constructor,

this.state = {
      name: "",
firstdate: null,
      dpselectedItem: undefined,
      dpselectedItems: [],
      userIDs: [],
      userManagerIDs: [],
      pplPickerType: "",    
      Items: this._getItems()

    };
  }

Public componentDidMount(){

    this.readItem(itemID);
    }
  }

To get DropDown values I’ve method as below

private _getItems() {
    return [
      { key: ABC', text: ABC },
      { key: 'DEF', text: 'DEF' },
      { key: 'GHI', text: GHI }
    ]
}

Under render:

public render(): React.ReactElement<…>
{
return(
<div>
                <Dropdown
                  placeHolder="Select an Option"
                  label=""
                  defaultValue="Select an Option"                  
                  id="component"                                    
                  selectedKey={dpselectedItem ? dpselectedItem.key : undefined}
                  ariaLabel="Basic dropdown example"
                  options={this.state.getItems}
                  onChanged={this._changeState}                  
                />
              </div>

<div>
                <label>Assigned To</label>
              </div>
              <div>
                <PeoplePicker
                  context={this.props.context}
                  personSelectionLimit={1}
                  groupName={""} 
                  showtooltip={false}
                  isRequired={false}
                  selectedItems={this._getManager}
                  principalTypes={[PrincipalType.User]}
                  ensureUser={true}
                  defaultSelectedUsers={[this.state.AssignedTo]}
                />
              </div>

)

private _changeState = (item: IDropdownOption): void => {
     this.setState({ dpselectedItem: item });
}


private readItem(itemID: number): void {

    pnp.sp.web.lists.getByTitle("List Title").items.getById(itemID).get().then((item: any) => {

        this.setState({ name: item.Title});

let strfirstDate = new Date(item.firstDate);
      this.setState({ firstdate: strfirstDate });

    //this.setState({ dpselectedItem: item.TypeofCA }) //Not working
//PeoplePicker

});

Thanks,

Answer 1

All of the controls listed below have numerous more properties than what I have demonstrated. I have only shown the properties necessary to set values from your state into these controls, please refer to the linked docs for the additional required and optional parameters. Also note that each of these will require imports at the top of you component file.

Within the render() method of your react component, you would use the firstDate value from your state with a DateTimePicker as follows:

<DateTimePicker label="DateTimePicker1" value={this.state.firstDate} />

You didn't specify what state value you to use in a dropdown, but Dropdown would look something like this:

<Dropdown selectedItem={this.state.thingWeWantSelected} />

And a PeoplePicker would look something like:

<PeoplePicker selectedItems={this.state.peopleWeWantSelected} />