Sanjay Adsure

Sanjay Adsure

  • 1.9k
  • 40
  • 1k

SPFx - React - Set Drop Down & People Picker Control values

Jan 29 2020 12:41 PM
Hi All,
 
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:
  1. export interface IProjectName  
  2. {  
  3. name: string;  
  4. firstdate: Date;  
  5. dpselectedItem?: { key: string | number | undefined };  
  6. dpselectedItems: IDropdownOption[]; pplPickerType:string; userIDs: number[];  
  7. userManagerIDs: number[]; Items:IDropdownOption[];  
  8. }  
In .tsx file I have below code under Constructor,
  1. this.state =  
  2. {  
  3. name: "", firstdate: null,  
  4. dpselectedItem: undefined,  
  5. dpselectedItems: [],  
  6. userIDs: [],  
  7. userManagerIDs: [],  
  8. pplPickerType: "", Items: this._getItems()  
  9. };  
  10. }  
  11. Public componentDidMount()  
  12. {  
  13. this.readItem(itemID);  
  14. }  
  15. }   
To get DropDown values I’ve method as below
  1. private _getItems()  
  2. {  
  3. return [ { key: ABC', text: ABC }, { key: 'DEF', text: 'DEF' }, { key: 'GHI', text: GHI } ]  
  4. }  
Under render:
  1. public render(): React.ReactElement<…>  
  2. {  
  3. return( <div> <Dropdown  
  4. placeHolder="Select an Option" label=""  
  5. defaultValue="Select an Option"  
  6. id="component"  
  7. selectedKey={dpselectedItem ? dpselectedItem.key : undefined}  
  8. ariaLabel="Basic dropdown example"  
  9. options={this.state.getItems}  
  10. onChanged={this._changeState} />  
  11. </div>  
  12. <div>  
  13. <label>Assigned To</label>  
  14. </div>  
  15. <div>  
  16. <PeoplePicker context={this.props.context}  
  17. personSelectionLimit={1}  
  18. groupName={""}  
  19. showtooltip={false}  
  20. isRequired={false}  
  21. selectedItems={this._getManager}  
  22. principalTypes={[PrincipalType.User]}  
  23. ensureUser={true}  
  24. defaultSelectedUsers={[this.state.AssignedTo]} />  
  25. </div> )  
  26. private _changeState = (item: IDropdownOption): void => { this.setState({ dpselectedItem: item }); }  
  27. private readItem(itemID: number): void { pnp.sp.web.lists.getByTitle("List Title").items.getById(itemID).get().then((item: any) => { this.setState({ name: item.Title});  
  28. let strfirstDate = new Date(item.firstDate);  
  29. this.setState({ firstdate: strfirstDate });  
  30. //Get value from SP List Item and set to DropDown  
  31. //Get value from SP List Item and set to PeoplePicker  
  32. });  

Brought to you by: JavaScript SDK for Bold BI dashboard and analytics embedding. Free trial.

Answers (1)