AlHal2
asked on
Extending People Picker page to include form items like labels, input boxes and buttons
I've got the PeoplePicker from https://www.c-sharpcorner.com/article/pnp-people-picker-control-for-spfx/ to work.
Now I'd like to add other controls like labels, textboxes and drop downs to populate the other fields in my Sharepoint list.
How do I do this?
Below is my render method which includes a label, textbox and default button. I don't know how to update the Sharepoint lists with what is in the textbox when I press the default button? The People Picker works.
Now I'd like to add other controls like labels, textboxes and drop downs to populate the other fields in my Sharepoint list.
How do I do this?
Below is my render method which includes a label, textbox and default button. I don't know how to update the Sharepoint lists with what is in the textbox when I press the default button? The People Picker works.
public render(): React.ReactElement<IPnPPeoplePickerProps>
{
const txtFirstName = getId('anInput');
return (
<div className={ styles.pnPPeoplePicker }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<div>
<Label required={true}>I'm a required Label</Label>
<Label htmlFor={txtFirstName}>A Label for An Input</Label>
<TextField id={txtFirstName} />
</div>
<PeoplePicker
context={this.props.context}
titleText="People Picker"
personSelectionLimit={3}
groupName={""} // Leave this blank in case you want to filter from all users
showtooltip={true}
isRequired={true}
disabled={false}
ensureUser={true}
selectedItems={this._getPeoplePickerItems}
showHiddenInUI={false}
principalTypes={[PrincipalType.User,PrincipalType.SharePointGroup]}
resolveDelay={1000} />
<DefaultButton
data-automation-id="addSelectedUsers"
title="Add Selected Users"
onClick={this.addSelectedUsers}>
Add Selected Users
</DefaultButton>
</div>
</div>
</div>
</div>
);
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.