1

I have a PeoplePicker Field and a Dropdown with imported Items from a SharePoint List. The default status of PeoplePicker is disabled = {false}, so it is "not visible". I select an item in my Dropdownlist and I want to change it from invisible to visible.

Here ist my idea, which is not working:

  public hidePeoplePicker = (): boolean =>{
const { selectedOption } = this.state;

if(selectedOption === " Sonstige Anrufe"){
 const peoplepickerProps: IPeoplePickerProps =({
  disabled: true,
  context: this.props.context
});
  console.log(peoplepickerProps);
  
}
return true;

and here my People Picker:

<PeoplePicker context={this.props.context}
                      disabled = {this.hidePeoplePicker()}
                      data-automation-id="addSelectedUsers" 
                      placeholder=" Zuständiger" 
                      personSelectionLimit={2} 
                      ensureUser={true} 
                      onChange={this.getPeoplePicker}
                      ref={c => (this.ppl = c)} 
                      {...PeoplePicker} ></PeoplePicker>

It happens nothing. My People Picker is deactived (not visible), but the "Sonstige Anrufe" does not change.

Any idea? Thank you!

2 Answers 2

1

I have found this:

document.getElementById("peoplepicker").style.opacity = "0";
1
  • I'm glad to hear you solve the problem. Thanks for your sharing!
    – Zella_msft
    Jan 26, 2023 at 1:46
1

Based on the code you've provided, it looks like you're trying to change the visibility of the PeoplePicker component based on the value selected in the Dropdown component.

One issue I can see is that you're only updating the peoplepickerProps object within the if statement, but you're not updating the state of the component. The PeoplePicker component's visibility is determined by the disabled prop, which is set to the value returned by the hidePeoplePicker() function.

To make the PeoplePicker component visible when the "Sonstige Anrufe" option is selected in the Dropdown, you need to update the state of the component with the new value of the disabled prop. You can do this by using the setState() method, which allows you to update the state of the component and re-render the component with the updated state.

Here's an example of how you could update the state and change the visibility of the PeoplePicker component:

class MyComponent extends React.Component {
  state = {
    selectedOption: "",
    peoplePickerDisabled: true
  };

  handleDropdownChange = (event) => {
    this.setState({
      selectedOption: event.target.value,
      peoplePickerDisabled: event.target.value !== "Sonstige Anrufe"
    });
  }

  render() {
    const { selectedOption, peoplePickerDisabled } = this.state;

return (
  <div>
    <Dropdown onChange={this.handleDropdownChange} value={selectedOption}>
      <option value="Sonstige Anrufe">Sonstige Anrufe</option>
      <option value="Other Option">Other Option</option>
    </Dropdown>
    <PeoplePicker
      context={this.props.context}
      disabled={peoplePickerDisabled}
      data-automation-id="addSelectedUsers" 
      placeholder=" Zuständiger" 
      personSelectionLimit={2} 
      ensureUser={true} 
      onChange={this.getPeoplePicker}
      ref={c => (this.ppl = c)} 
      {...PeoplePicker}
    />
  </div>
);

} }

In this example, the handleDropdownChange() function is called when the value of the Dropdown is changed, it updates the state with the new value of the selectedOption and also sets the peoplePickerDisabled state to the opposite of the selected option being "Sonstige Anrufe", which will make the PeoplePicker visible when the selectedOption is "Sonstige Anrufe"

Let me know if this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.