Microsoft Graph Toolkit の People ピッカー コンポーネント

Web コンポーネントを mgt-people-picker 使用して、ユーザー、グループ、またはその両方を検索できます。 既定では、コンポーネントは組織内のすべてのユーザーとユーザーを検索しますが、動作を変更してグループを検索することも、グループのみを検索することもできます。 また、特定のグループに絞り込んで検索することもできます。 また、ユーザーが任意のメール アドレスを入力して選択できるようにすることもできます。

例

次の使用例では mgt-people-picker コンポーネントを表示します。 名前の検索を開始してレンダリングされた結果を表示し、コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。

プロパティ

既定値では、mgt-people-picker コンポーネントは /me/people および /users エンドポイントからユーザーを取得します。 次の属性を使用して、この動作を変更します。

次の例は、 属性を show-max 示しています。

<mgt-people-picker show-max="4"> </mgt-people-picker>

選択済みのユーザー

コンポーネントの選択済みのユーザー セクションは、開発者またはユーザーによって選ばれた各ユーザーを表示します。

選択したユーザー データに次のオプションを設定できます。

• 以下の例のように、selectedPeople プロパティを直接設定します。

  // personObject is the User or Person object from Microsoft Graph
  document.querySelector("mgt-people-picker").selectedPeople.push(personObject);
  

• selectUsersById() Microsoft Graph ユーザー ID の配列を受け入れる メソッドを使用して、選択に関連するユーザーの詳細を検索します。

  注：id のユーザーが見つからない場合、その id のデータはレンダリングされません。

  // id = Microsoft graph User "id"
  document.querySelector("mgt-people-picker").selectUsersById(["id", "id"]);
  

• selectGroupsById() Microsoft グラフ グループ ID の配列を受け入れる メソッドを使用して、関連付けられているユーザーのグループを検索します。

  // groupid = Microsoft graph group "id"
  document
    .querySelector("mgt-people-picker")
    .selectGroupsById(["groupid", "groupid"]);
  

CSS カスタム プロパティ

mgt-people-picker コンポーネントは、以下の CSS カスタム プロパティを定義します。

<mgt-people-picker class="people-picker"></mgt-people-picker>

.people-picker {
  --people-picker-selected-option-background-color: orange;
  --people-picker-selected-option-highlight-background-color: red;
  --people-picker-dropdown-background-color: blue;
  --people-picker-dropdown-result-background-color: yellow;
  --people-picker-dropdown-result-hover-background-color: gold;
  --people-picker-dropdown-result-focus-background-color: green;
  --people-picker-no-results-text-color: orange;
  --people-picker-input-background: gray;
  --people-picker-input-border-color: yellow;
  --people-picker-input-hover-background: green;
  --people-picker-input-hover-border-color: red;
  --people-picker-input-focus-background: purple;
  --people-picker-input-focus-border-color: orange;

  --people-picker-input-placeholder-focus-text-color: yellow;
  --people-picker-input-placeholder-hover-text-color: gold;
  --people-picker-input-placeholder-text-color: white;
  --people-picker-search-icon-color: yellow;
  --people-picker-remove-selected-close-icon-color: blue;

  /** Style for the avatar-size in the people-picker **/
  --people-picker-result-person-avatar-size: 50px;
  --people-picker-selected-person-avatar-size: 30px;

  /** You can also change the person tokens **/
  --person-line1-text-color: blue;
  --person-line2-text-color: red;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

イベント

コンポーネントから次のイベントが発生します。

イベントの処理の詳細については、「 イベント」を参照してください。

テンプレート

mgt-people-picker は、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネント内に 要素を <template> 含め、 を data-type 次のいずれかの値に設定します。

次の例では、テンプレートの使用方法を error 示します。

<mgt-people-picker>
  <template data-type="error">
    <p>Sorry, no people were found</p>
  </template>
</mgt-people-picker>

Microsoft Graph のアクセス許可

このコンポーネントは、構成と状態に応じて多くのクエリを実行する場合があります。 次の表では、わかりやすくするために必要な Microsoft Graph API とアクセス許可を 3 つのセクションに分割します。 呼び出される API ごとに、ユーザーには少なくとも 1 つのアクセス許可が一覧表示されている必要があります。

ユーザー入力状態に関係なく

ユーザー入力がない場合

ユーザーが検索語句を指定した場合

サブコンポーネント

コンポーネントは mgt-people-picker 1 つ以上のサブコンポーネントで構成され、前に一覧に示した権限以外のアクセス許可が必要な場合があります。 詳細については、各サブコンポーネントのドキュメント mgt-person を参照してください。

認証

この制御は、認証ドキュメント に記述されているグローバル認証プロバイダーを使用します。

キャッシュ

キャッシュを構成する方法の詳細については、「 キャッシュ」を参照してください。

より制御を行うために拡張する

より複雑なシナリオや真にカスタムな UX のために、このコンポーネントは、コンポーネント拡張でオーバーライドするためのいくつかのprotected render* メソッドを公開しています。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。 ローカライズの詳細については、「 コンポーネントのローカライズ」を参照してください。