如何使用 pnp.sp 人员选取器设置 SharePoint 列表字段 [英] How to set a SharePoint list field using a pnp.sp People Picker

查看：74
本文介绍了如何使用 pnp.sp 人员选取器设置 SharePoint 列表字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不知道在 pnp.sp 库中的人员选取器中选择添加用户的代码.

我已经尝试了下面的代码示例(通过使用 State)，但我理解这不是保存用户选择.

private _getPeoplePickerItems() {pnp.sp.web.siteUsers.get().then((data) =>{this.setState({部门联系人:数据});});}

以及渲染中的人员选择器:

我希望用户能够在人员选择器中输入用户并解决它，然后提交它.然后将该用户添加到共享点列表中的人员"列中.

解决方案

我的测试代码供大家参考(react 框架).

import * as React from 'react';从'./PnpReact.module.scss'导入样式；从'./IPnpReactProps'导入{IPnpReactProps}；从'@microsoft/sp-lodash-subset'导入{转义}；从@pnp/pnpjs"导入 pnp；从@pnp/spfx-controls-react/lib/PeoplePicker"导入 { PeoplePicker, PrincipalType };导出接口 IDefaultData{PeoplePickerDefaultItems:string[];}导出默认类 PnpReact extends React.Component{公共构造函数(道具:IPnpReactProps，状态:IDefaultData){超级(道具)；this.state = {PeoplePickerDefaultItems:[]};}//从peoplepicker获取用户私人 _getPeoplePickerItems(items: any[]) {控制台日志(项目)；}公共组件DidMount(){this.GetDefaultUsers();}私人 GetDefaultUsers() {pnp.sp.web.siteUsers.get().then((items: any[]) =>{var defaultUsers:string[]=[];//获取最后2个用户for(var i=items.length-1;i>items.length-3;i--){defaultUsers.push(items[i].Email);}this.setState({PeoplePickerDefaultItems:defaultUsers});});}公共渲染():React.ReactElement<IPnpReactProps>{返回 (<div className={styles.pnpReact }><div className={styles.container }><div className={styles.row }><人物选择器上下文={this.props.context}titleText="人员选择器"personSelectionLimit={3}组名={''}显示工具提示={假}isRequired={false}禁用={假}selectedItems={this._getPeoplePickerItems}defaultSelectedUsers={this.state.PeoplePickerDefaultItems}showHiddenInUI={false}principalTypes={[PrincipalType.User]}解决延迟={1000}/><div className={styles.column }><span className={styles.title }>欢迎使用 SharePoint！</span><p className={styles.subTitle }>使用 Web 部件自定义 SharePoint 体验.</p><p className={styles.description }>{escape(this.props.description)}</p><a href="https://aka.ms/spfx" className={styles.button }><span className={styles.label }>了解详情</span></a>

);}}

I do not know the code to add the user, selected in a People Picker from the pnp.sp library.

I've tried the below code example (by using State) but this I understand is not saving the users selection.

private _getPeoplePickerItems() {
    pnp.sp.web.siteUsers.get().then((data) =>{
      this.setState({
        DeptContact: data
      });
    });
}

And the people picker in the render:

<PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
          </div>
          </div>

I expect a user to be able to enter a user into the people picker and resolve it and then submit it. This user is then added to a 'Person' column in a sharepoint list.

解决方案

My test code for your reference(react framework).

import * as React from 'react';
import styles from './PnpReact.module.scss';
import { IPnpReactProps } from './IPnpReactProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp from "@pnp/pnpjs";

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";


export interface IDefaultData{ 
  PeoplePickerDefaultItems:string[];
}
export default class PnpReact extends React.Component<IPnpReactProps, IDefaultData> {

  public constructor(props: IPnpReactProps,state: IDefaultData){ 
    super(props); 
    this.state = { 
      PeoplePickerDefaultItems:[] 
    }; 
  }

  //get users from peoplepicker
  private _getPeoplePickerItems(items: any[]) {      
    console.log(items);      
}

public componentDidMount(){
  this.GetDefaultUsers();  
}
private GetDefaultUsers() {    
  pnp.sp.web.siteUsers.get().then((items: any[]) =>{        
    var defaultUsers:string[]=[];
    //get last 2 users    
    for(var i=items.length-1;i>items.length-3;i--){      
      defaultUsers.push(items[i].Email);
    }    
    this.setState({ 
      PeoplePickerDefaultItems:defaultUsers
    });     
  });  
}

  public render(): React.ReactElement<IPnpReactProps> {

    return (
      <div className={ styles.pnpReact }>
        <div className={ styles.container }>
          <div className={ styles.row }>
          <PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}   
            defaultSelectedUsers={this.state.PeoplePickerDefaultItems}          
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这篇关于如何使用 pnp.sp 人员选取器设置 SharePoint 列表字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆