Microsoft Graph Toolkit のPeople コンポーネント

mgt-people Web コンポーネントを使用すると、写真やイニシャルを使用して、ユーザーや連絡先のグループを表示できます。 既定では、サインインしているユーザーの最も頻繁な連絡先が表示されます。

このコンポーネントは、複数の mgt-person コントロールを使用しますが、一連の People 記述子にバインドできます。 値よりも show-max 表示するユーザーが多い場合は、他の連絡先の数を示す番号が追加されます。

例

次の例は、mgt-peopleコンポーネントを使用して表示される人々のグループを示しています。 コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。

プロパティ

デフォルトでは、mgt-peopleコンポーネントはpersonType/class eq 'Person'フィルターを使用して/me/peopleエンドポイントからイベントをフェッチし、頻繁に連絡するユーザーを表示します。 いくつかのプロパティを使用して、この動作を変更できます。

次の例では、表示する最大人数を設定します。

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

CSS カスタム プロパティ

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

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

.people {
  --people-list-margin: 12px;
  --people-avatar-gap: 8px;
  --people-overflow-font-color: orange;
  --people-overflow-font-size: 16px;
  --people-overflow-font-weight: 600;
  --people-person-avatar-size: 70px;
}

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

テンプレート

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

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

<mgt-people>
  <template>
    <ul>
      <li data-for="person in people">
        <mgt-person person-query="{{ person.userPrincipalName }}"></mgt-person>
        <h3>{{ person.displayName }}</h3>
        <p>{{ person.jobTitle }}</p>
        <p>{{ person.department }}</p>
      </li>
    </ul>
  </template>
</mgt-people>

Microsoft Graph のアクセス許可

このコンポーネントは、以下の Microsoft Graph API とアクセス許可を使用します。 呼び出される API ごとに、ユーザーには少なくとも 1 つのアクセス許可が一覧表示されている必要があります。

サブコンポーネント

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

認証

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

キャッシュ

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

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

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

ローカリゼーション

コントロールでは、ローカライズ変数は公開されません。