New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initialize PeoplePicker with users in list item #138

Closed
mwahlia opened this Issue Sep 21, 2018 · 6 comments

Comments

Projects
None yet
3 participants
@mwahlia

mwahlia commented Sep 21, 2018

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

This comment has been minimized.

Contributor

AsishP commented Sep 21, 2018

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

This comment has been minimized.

Contributor

AsishP commented Sep 22, 2018

@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

This comment has been minimized.

mwahlia commented Oct 1, 2018

@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

This comment has been minimized.

Contributor

AsishP commented Oct 2, 2018

@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
})
}
  1. 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

This comment has been minimized.

Collaborator

estruyf commented Oct 26, 2018

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 comment has been minimized.

Collaborator

estruyf commented Nov 6, 2018

This is now available in version 1.10.0.

@estruyf estruyf closed this Nov 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment