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,
Render
method so far, we can more accurately show what you need to add or change to pass your values to those controls. – willman Jan 23 '20 at 18:23