Extending People Picker page to include form items like labels, input boxes and buttons

AlHal2
AlHal2 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial