SharePointFrameworkでPnPPeople PickerControlを使用する

Patterns and Practices（PnP）は、SharePointFrameworkを使用してWebパーツや拡張機能などのソリューションを構築するための再利用可能なReactコントロールのリストを開発者に提供します。

SPFxのReactコントロールのリストを取得するには、このリンクを参照してください。

SPFxWebパーツでPnPPeoplePickerコントロールを使用する方法がわかります。

PnPピープルピッカーコントロール

このコントロールは、SharePointグループまたはサイトから1人以上のユーザーを選択するために使用できるPeoplePickerフィールドをレンダリングします。コントロールは必須として構成できます。フィールドが空の場合、カスタムエラーメッセージが表示されます。詳細については、このリンクを参照してください。

SharePointFrameworkでのPnPPeople Picker Control

次のフィールドを含む簡単なカスタムリストを作成しました。

SharePointFrameworkでのPnPPeople Picker Control

個人またはグループフィールド設定

SharePointFrameworkでのPnPPeople Picker Control

フィールド表示名：ProjectMembers
フィールド内部名：ProjectMembers

ノート

PnP jsを使用して値を設定する場合、フィールド名は<fieldInternalName> Idである必要があります。例-ProjectMembersId

この記事では、次のタスクを実行する方法を説明します。

前提条件
SPFxソリューションを作成する
People PickerControlソリューションを実装する
ソリューションを展開する
Webパーツをテストします

SPFxソリューションを作成する

Node.jsコマンドプロンプトを開きます。

新しいフォルダを作成します。

> md spfx-pnpreact-peoplepicker

フォルダに移動します。

> cd spfx-pnpreact-peoplepicker

次のコマンドを実行して、SPFxWebパーツを作成します。

> yo @ microsoft / sharepoint

新しいソリューションを作成するために必要なすべての詳細を入力します。Yeomanジェネレーターはスキャフォールディングプロセスを実行し、完了したら、次のコマンドを実行してプロジェクトの依存関係のバージョンをロックダウンします。

> npmシュリンクラップ

次のコマンドを実行して、コードエディタでソリューションを開きます。

>コード。

People PickerControlソリューションを実装する

次のコマンドを実行して、PnP React ControlsNPMパッケージをインストールします。

> npm install @ pnp / spfx-controls-react –save

次のコマンドを実行して、pnpspライブラリをインストールします。

> npm install @ pnp / sp –save

コンポーネントフォルダ（src \ webparts \ peoplepickercontrol \ components \ IPeoplepickercontrolState.ts）の下に「IPeoplepickercontrolState.ts」という名前の新しいtsファイルを作成し、以下に示すようにコードを更新します。

import { MessageBarType } from 'office-ui-fabric-react';  
  
export interface IPeoplepickercontrolState {  
    title: string;  
    users: number[];  
    showMessageBar: boolean;  
    messageType?: MessageBarType;  
    message?: string;  
}

小道具ファイル（src \ webparts \ peoplepickercontrol \ components \ IPeoplepickercontrolProps.ts）を開き、以下に示すようにコードを更新します。

import { WebPartContext } from "@microsoft/sp-webpart-base";  
  
export interface IPeoplepickercontrolProps {  
  description: string;  
  context: WebPartContext;  
}

Webパーツファイル「src \ webparts \ datetimepickercontrol \ DatetimepickercontrolWebPart.ts」を開き、renderメソッドを更新します。

public render(): void {  
 const element: React.ReactElement<IPeoplepickercontrolProps> = React.createElement(  
   Peoplepickercontrol,  
   {  
     description: this.properties.description,  
     context: this.context  
   }  
 );  
  
 ReactDom.render(element, this.domElement);

コンポーネントファイル「src \ webparts \ peoplepickercontrol \ components \ Peoplepickercontrol.tsx」を開き、次のモジュールをインポートします。

import { IPeoplepickercontrolState } from './IPeoplepickercontrolState';  
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';  
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
import { autobind } from 'office-ui-fabric-react';  
import { MessageBar, MessageBarType, IStackProps, Stack } from 'office-ui-fabric-react';  
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";  
import { sp } from "@pnp/sp";  
import "@pnp/sp/webs";  
import "@pnp/sp/lists";  
import "@pnp/sp/items";

以下に示すように、renderメソッドを更新します。

 public render(): React.ReactElement<IPeoplepickercontrolProps> {  
  return (  
    <div className={styles.peoplepickercontrol}>  
      {  
        this.state.showMessageBar  
          ?  
          <div className="form-group">  
            <Stack {...verticalStackProps}>  
              <MessageBar messageBarType={this.state.messageType}>{this.state.message}</MessageBar>  
            </Stack>  
          </div>  
          :  
          null  
      }  
      <TextField label="Title" required onChanged={this._onchangedTitle} />  
      <PeoplePicker  
        context={this.props.context}  
        titleText="Project Members"  
        personSelectionLimit={3}  
        showtooltip={true}  
        isRequired={true}  
        disabled={false}  
        selectedItems={this._getPeoplePickerItems}  
        showHiddenInUI={false}  
        ensureUser={true}  
        principalTypes={[PrincipalType.User]}  
        resolveDelay={1000} />  
      <DefaultButton text="Submit" onClick={this._createItem} />  
    </div>  
  );  
}

ノート

ピープルピッカーコントロールで、sureUserがtrueに設定されていることを確認してください。設定されていない場合、値を設定できません。ユーザープロパティがtrueの場合、テナント全体の検索を実行すると、現在のサイトのローカルユーザーIDが返されます。

コンポーネントファイルにコンストラクタを作成します。

constructor(props: IPeoplepickercontrolProps, state: IPeoplepickercontrolState) {  
   super(props);  
   sp.setup({  
     spfxContext: this.props.context  
   });  
  
   this.state = {  
     title: '',  
     users: [],  
     showMessageBar: false  
   };  
 }

コンポーネントファイルにヘルパーメソッドを作成します。

constructor(props: IPeoplepickercontrolProps, state: IPeoplepickercontrolState) {  
   super(props);  
   sp.setup({  
     spfxContext: this.props.context  
   });  
  
   this.state = {  
     title: '',  
     users: [],  
     showMessageBar: false  
   };  
 }  
  
reate the helper methods in the component file.  
@autobind  
 private _getPeoplePickerItems(items: any[]) {  
   let getSelectedUsers = [];  
   for (let item in items) {  
     getSelectedUsers.push(items[item].id);  
   }  
   this.setState({ users: getSelectedUsers });  
 }  
  
 @autobind  
 private _onchangedTitle(title: string) {  
   this.setState({ title: title });  
 }  
  
 @autobind  
 private async _createItem() {  
   try {  
     await sp.web.lists.getByTitle("Project Details").items.add({  
       Title: this.state.title,  
       ProjectMembersId: { results: this.state.users }  
  
     });  
  
     this.setState({  
       message: "Item: " + this.state.title + " - created successfully!",  
       showMessageBar: true,  
       messageType: MessageBarType.success  
     });  
  
   }  
   catch (error) {  
     this.setState({  
       message: "Item " + this.state.title + " creation failed with error: " + error,  
       showMessageBar: true,  
       messageType: MessageBarType.error  
     });  
   }  
 }

Reactコンポーネント（src \ webparts \ peoplepickercontrol \ components \ Peoplepickercontrol.tsx）を更新します。

import * as React from 'react';  
import styles from './Peoplepickercontrol.module.scss';  
import { escape } from '@microsoft/sp-lodash-subset';  
import { IPeoplepickercontrolProps } from './IPeoplepickercontrolProps';  
import { IPeoplepickercontrolState } from './IPeoplepickercontrolState';  
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';  
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
import { autobind } from 'office-ui-fabric-react';  
import { MessageBar, MessageBarType, IStackProps, Stack } from 'office-ui-fabric-react';  
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";  
import { sp } from "@pnp/sp";  
import "@pnp/sp/webs";  
import "@pnp/sp/lists";  
import "@pnp/sp/items";  
  
const verticalStackProps: IStackProps = {  
  styles: { root: { overflow: 'hidden', width: '100%' } },  
  tokens: { childrenGap: 20 }  
};  
  
export default class Peoplepickercontrol extends React.Component<IPeoplepickercontrolProps, IPeoplepickercontrolState> {  
  constructor(props: IPeoplepickercontrolProps, state: IPeoplepickercontrolState) {  
    super(props);  
    sp.setup({  
      spfxContext: this.props.context  
    });  
  
    this.state = {  
      title: '',  
      users: [],  
      showMessageBar: false  
    };  
  }  
  public render(): React.ReactElement<IPeoplepickercontrolProps> {  
    return (  
      <div className={styles.peoplepickercontrol}>  
        {  
          this.state.showMessageBar  
            ?  
            <div className="form-group">  
              <Stack {...verticalStackProps}>  
                <MessageBar messageBarType={this.state.messageType}>{this.state.message}</MessageBar>  
              </Stack>  
            </div>  
            :  
            null  
        }  
        <TextField label="Title" required onChanged={this._onchangedTitle} />  
        <PeoplePicker  
          context={this.props.context}  
          titleText="Project Members"  
          personSelectionLimit={3}  
          showtooltip={true}  
          isRequired={true}  
          disabled={false}  
          selectedItems={this._getPeoplePickerItems}  
          showHiddenInUI={false}  
          ensureUser={true}  
          principalTypes={[PrincipalType.User]}  
          resolveDelay={1000} />  
        <DefaultButton text="Submit" onClick={this._createItem} />  
      </div>  
    );  
  }  
  
  @autobind  
  private _getPeoplePickerItems(items: any[]) {  
    let getSelectedUsers = [];  
    for (let item in items) {  
      getSelectedUsers.push(items[item].id);  
    }  
    this.setState({ users: getSelectedUsers });  
  }  
  
  @autobind  
  private _onchangedTitle(title: string) {  
    this.setState({ title: title });  
  }  
  
  @autobind  
  private async _createItem() {  
    try {  
      await sp.web.lists.getByTitle("Project Details").items.add({  
        Title: this.state.title,  
        ProjectMembersId: { results: this.state.users }  
  
      });  
  
      this.setState({  
        message: "Item: " + this.state.title + " - created successfully!",  
        showMessageBar: true,  
        messageType: MessageBarType.success  
      });  
  
    }  
    catch (error) {  
      this.setState({  
        message: "Item " + this.state.title + " creation failed with error: " + error,  
        showMessageBar: true,  
        messageType: MessageBarType.error  
      });  
    }  
  }  
}

ソリューションを展開する

次のコマンドを実行して、ソリューションをバンドルおよびパッケージ化します。

> gulpバンドル--ship

> gulp package-solution --ship

テナントアプリカタログに移動–例– https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Apps for SharePointライブラリに移動し、パッケージファイル（sharepoint \ solution \ spfx-pnpreact-peoplepicker.sppkg）をアップロードします。[デプロイ]をクリックします。

SharePointFrameworkでのPnPPeople Picker Control

Webパーツをテストします

SharePointサイトに移動し、アプリを追加します。

SharePointFrameworkでのPnPPeople Picker Control

結果

ページに移動して、Webパーツを追加します。すべての詳細を入力して[送信]をクリックすると、SharePointリストに新しいアイテムが作成されます。

SharePointFrameworkでのPnPPeople Picker Control

概要

したがって、この記事では、SharePointFrameworkでPnPPeople PickerControlを使用する方法を説明しました。

リンク: https://www.c-sharpcorner.com/article/pnp-people-picker-control-in-sharepoint-framework/

#frameworks

What is GEEK

Buddha Community