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

  • [アーティクル]

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

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

例

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

プロパティ

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

属性 プロパティ 説明
show-max showMax 会議への出席を許可するユーザーの最大数を示します。 既定値は 3 です。
people people Microsoft Graph person オブジェクトの配列。 このプロパティを使用して、コンポーネントによってロードされたユーザーにアクセスします。 コンポーネントに自分のユーザーを読み込むには、この値を設定します。
group-id groupId Microsoft Entra ID グループの ID。 このプロパティは、グループの直接メンバーを取得するために使用されます。 このプロパティは省略可能です。
user-ids UserIds 表示するユーザー ID の配列。 このプロパティは省略可能です。
people-queries peopleQueries ユーザークエリ応答をカスタマイズするための Microsoft Graph クエリ。
person-card personCardInteraction レンダリングされたユーザーにカードするユーザーを表示する動作を設定します。 既定値は、hover(PersonCardInteraction.hover) でカードユーザーを表示するように設定されています。
show-presence showPresence ユーザー コンポーネントがプレゼンス バッジをレンダリングする必要があるかどうかを判断します。 既定値は False です。
リソース resource Microsoft Graph から取得するリソース URL (例: /me/people)。
scopes scopes コンポーネントに付与するアクセス許可を持つコンマ区切り文字列。 このプロパティは省略可能です。
version version 要求を行うときに使用する API バージョン。 既定値は、v1.0 です。
fallback-details fallbackDetails グラフにユーザー/人/連絡先が見つからない場合に、1 人または複数のユーザーを表す Microsoft Graph 人物オブジェクトの配列。

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

<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 次のいずれかの値に設定します。

データ型 データ コンテキスト 説明
default people: 人物 オブジェクトのリスト デフォルトのテンプレートは、コンポーネント全体を独自のテンプレートに置き換えます。
person person: 人物オブジェクト それぞれの人物をレンダリングするために使用されるテンプレート。
overflow people: 人物 オブジェクトのリスト
max: 表示されている人数
extra: 追加の人数		 最大数を超える数を人物のリストの右側にレンダリングするために使用されるテンプレート。
no-data データ コンテキストはパスされません 連絡可能なデータがないときに使用するテンプレート。
loading データ コンテキストはパスされません コンポーネントが状態をロードするときに使用されるテンプレート。

次の例では、テンプレートの使用方法を 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 つのアクセス許可が一覧表示されている必要があります。

構成 アクセス許可 API
既定の構成 People.Read、People.Read.All /me/people
group-id 設定 GroupMember.Read.All、Group.Read.All、Directory.Read.All、GroupMember.ReadWrite.All、Group.ReadWrite.All /groups/${groupId}/members/microsoft.graph.user
user-ids 設定 User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All /users/$({userId}
people-queries 設定 People.Read、People.Read.All /me/people
resource 設定 で指定されたアクセス許可 scopes で指定 resource
show-presence 設定 Presence.Read.All /communications/getPresencesByUserId

サブコンポーネント

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

認証

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

キャッシュ

オブジェクト ストア キャッシュされたデータ 注釈
people クエリに一致するユーザーに関する情報 指定時に resource 使用されます
users クエリに一致するユーザーに関する情報 、userIds、peopleQueriesまたはプロパティが指定されていない場合groupIdに使用されます
presence 指定した一連のユーザーのプレゼンス を に設定するときに使用されますshowPresencetrue

注:

既定では、コンポーネントは mgt-people コンポーネントを mgt-person 使用してユーザーに関する情報を表示します。 コンポーネントは mgt-person 、各ユーザーの写真を自動的にダウンロードしてキャッシュします。

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

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

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

メソッド 説明
renderLoading 読み込み状態を表示します。
renderNoData 空のデータ状態をレンダリングします。
renderPeople show-max値までの人のリストをレンダリングします。
renderPerson 個々の人物を表示します。
renderOverflow show-max値を超えた残りの人々の表記をレンダリングします。

ローカリゼーション

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