Initialize PeoplePicker with users in list item

[mwahlia]

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [ 1.9.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Question

Is there any way of populating the PeoplePicker from a list field? I have a form where I register activities and assign people to it. This works fine, but in edit mode, the PeoplePicker control will not load the registered assignees.

Have I missed something or do you have any suggestions on how to solve this?

Thanks!

[AsishP]

Yeah, this is a known current limitation of Peoplepicker I think (even in 1.9.0) because the component lifecycle methods don't align properly with loading of defaultselectedusers. I have recently added an enhancement item for it at #135. For near term, the idea is to fix it by moving the binding from ComponentWillMount to ComponentDidMount lifecycle so that the values are ready before the people picker control is loaded. The next enhancement would be to receive props update.

If you need an urgent solution below is how I have fixed it. Basically I am force updating the control on a state variable which is set after all the data fetch is done for the web part

private _getPerson(ManagerEmail)
  {
      return(<div>
          <PeoplePicker
                    context={this.props.context}
                    titleText="Manager"
                    personSelectionLimit={1}
                    groupName={""}
                    showtooltip={true}
                    tooltipMessage="Manager"
                    selectedItems = {this._getSelectedManagers} 
                    defaultSelectedUsers = {[ManagerEmail]} />
      </div>);
  }
{this.state.objEditMode ? this._getPerson(this.ManagerEmail) : 
                <PeoplePicker
                    context={this.props.context}
                    titleText="Manager"
                    personSelectionLimit={1}
                    groupName={""}
                    showtooltip={true}
                    tooltipMessage="Manager"
                    selectedItems = {this._getSelectedManagers} 
                    />
          }

Happy to provide more details if needed

[AsishP]

@mwahlia , I was able to fix the above issue in the latest PR, please test it once @estruyf pushes the changes to beta. Thanks, please let me know if it works.

[mwahlia]

@AsishP , any word on when your fix will be pushed to beta? I am in dire need of a working solution... I could not get your suggested workaround to run properly. The component does not seem to re-render when state changes. Could you perhaps elaborate how you implemented your workaround?

[AsishP]

@mwahlia , sorry don't have an idea about the beta. Have to check with @estruyf .
@estruyf , hopefully there is nothing holding up the merge and release to beta. if anything, please let me know.

Regarding the workaround, below is a brief explanation of the code above. PS: It is not recommended but could use it as a short term resolution till the fix is released.

1. In the render method, use a react state switch this.state.objEditMode to switch between a new control or edit control.
2. The new control is part of the render method and called when objEditMode = false. The edit control is returned through a function, which is called only the state object changes (objEditMode = true).
3. In the component load, set the value of the default user for eg. this.ManagerEmail, then set objEditMode = true in the setState method when all loading values are complete, in this case it is this.ManagerEmail. The example code is below (please ignore any syntax issues as I am writing directly here)

constructor()
{
this.state = {
objEditMode : false
}
} 
public componentWillMount()
{
this.ManagerEmail = xyz@gmail.com
this.setState({
objEditMode : true
})
}

4. When the objEditMode is set to true, the function with the ManagerEmail value is called and thus return the edit control with value set and the control is binded when ManagerEmail is ready.

Hopefully the above makes sense. Please let me know if there are any queries,

[estruyf]

The PR is merged and will be available in the latest beta version. Follow this guide in order to test out a beta version: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[estruyf]

This is now available in version 1.10.0.