Link to home
Start Free TrialLog in
Avatar of AlHal2
AlHal2Flag for United Kingdom of Great Britain and Northern Ireland

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.

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>
    );
  }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of AlHal2
AlHal2
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial