Microsoft Graph ツールキットの People コンポーネントPeople component in the Microsoft Graph Toolkit

Web コンポーネントを使用し mgt-people て、ユーザーまたは連絡先のグループを写真またはイニシャルを使用して表示できます。You can use the mgt-people web component to display a group of people or contacts by using their photos or initials. 既定では、サインインしているユーザーの最もよく使用される連絡先が表示されます。By default, it will display the most frequent contacts for the signed in user.

このコンポーネントは複数の管理 を使用していますが、一連のユーザー記述子にバインドできます。This component uses multiple mgt-person controls, but it can be bound to a set of people descriptors. 表示するユーザー数がこの値を超える場合は show-max 、追加の連絡先の数を示す番号が追加されます。If there are more people to display than the show-max value, a number will be added to indicate the number of additional contacts.


次の例は、コンポーネントを使用して表示されるユーザーのグループを示して mgt-people います。The following example shows a group of people displayed using the mgt-people component. コードエディターを使用すると、 プロパティ がコンポーネントの動作を変更する方法を確認できます。You can use the code editor to see how properties change the behavior of the component.

この例は、次のようにしてください。Open this example in


既定では、 mgt-people コンポーネントは、頻繁に /me/people 接続された personType/class eq 'Person' ユーザーを表示するために、フィルターを使用してエンドポイントからイベントをフェッチします。By default, the mgt-people component fetches events from the /me/people endpoint with the personType/class eq 'Person' filter to display frequently contacted users. この動作を変更するには、いくつかのプロパティを使用できます。You can use several properties to change this behavior.

属性Attribute プロパティProperty 説明Description
show-maxshow-max showMaxshowMax 表示するユーザーの最大数を示します。Indicates the maximum number of people to show. 既定値は3です。Default value is 3.
peoplepeople peoplepeople コンポーネントによってレンダリングされたユーザーのリストを取得または設定するユーザーの配列。An array of people to get or set the list of people rendered by the component. このプロパティを使用して、コンポーネントによって読み込まれた人物にアクセスします。Use this property to access the people loaded by the component. 自分のユーザーを読み込むには、この値を設定します。Set this value to load your own people.
グループ idgroup-id groupIdgroupId 特定の Microsoft Graph から、それぞれの ID からユーザーを取得します。Retrieves people from a specific Microsoft Graph from the respective ID.
ユーザー iduser-ids UserIdsuserIds Microsoft Graph ユーザーの配列が指定され ids ている場合、コンポーネントはこれらのユーザーを表示します。Given an array of Microsoft Graph user ids, the component will render these users.
人-クエリpeople-queries peopleQueriespeopleQueries Person クエリ (names、upn、電子メール) の配列が指定されている場合、コンポーネントはこれらのユーザーを表示します。Given an array of person queries (names, upns, emails), the component will render these users.
個人カードperson-card 個人カードpersonCard フライアウトパネルをアクティブにするために必要なユーザーアクションを決定する列挙 hover clickAn enumeration to determine user action necessary to activate flyout panel - hover or click. 既定値は、none です。Default value is none.
表示-プレゼンスshow-presence showPresenceshowPresence 人物のプレゼンスバッジを個人イメージに表示するかどうかを決定するブール値。A boolean to determine whether to show person presence badge on person image.

次の例では、表示するユーザーの最大数を設定します。The following example sets the maximum number of people to show.


CSS カスタムプロパティCSS custom properties

mgt-peopleコンポーネントは、次の CSS カスタムプロパティを定義します。The mgt-people component defines the following CSS custom properties.

mgt-people {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */


は、 mgt-people コンポーネントの特定の部分を置き換えるために使用できるいくつかの テンプレート をサポートしています。The mgt-people supports several templates that you can use to replace certain parts of the component. テンプレートを指定するには、 <template> コンポーネント内に要素を含め、 data-type 値を次のいずれかに設定します。To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

データ型Data type データコンテキストData context 説明Description
default people: person オブジェクトのリストpeople: list of person objects 既定のテンプレートでは、コンポーネント全体が独自のものに置き換えられます。The default template replaces the entire component with your own.
person person: person オブジェクトperson: person object 各ユーザーのレンダリングに使用するテンプレート。The template used to render each person.
overflow people: person オブジェクトのリストpeople: list of person objects
max: 表示されているユーザーの数max: number of shown people
extra: 特別なユーザーの数extra: number of extra people
ユーザーの一覧の右側に最大数を超える番号をレンダリングするために使用されるテンプレート。The template used to render the number beyond the max to the right of the list of people.
no-data データコンテキストが渡されないNo data context is passed データが利用できないときに使用するテンプレート。The template used when no data is available.
loading データコンテキストが渡されないNo data context is passed コンポーネントが状態を読み込むときに使用するテンプレート。The template used while the component loads state.

次の例は、テンプレートの使用方法を示して person います。The following examples shows how to use the person 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>

Microsoft Graph のアクセス許可Microsoft Graph permissions

このコンポーネントは、次の Microsoft Graph Api とアクセス許可を使用します。This component uses the following Microsoft Graph APIs and permissions:

リソースResource アクセス許可Permission
/me/ユーザー/me/people People.Read

既定のテンプレートを使用する場合は、追加の Api とアクセス許可が必要です。When using the default templates, additional APIs and permissions are required. このコンポーネントの既定のテンプレートでは、次のものを必要とする、 ユーザー コンポーネントを使用します。The default template for this component uses a mgt-person component, which requires the following.

リソースResource アクセス許可Permission
/users/users User.ReadBasic.AllUser.ReadBasic.All


このコントロールは、 認証のドキュメントで説明されているグローバル認証プロバイダを使用します。The control uses the global authentication provider described in the authentication documentation.

拡張して制御するExtend for more control

より複雑なシナリオまたは厳密なカスタム UX の場合、このコンポーネントは protected render* コンポーネント拡張機能でオーバーライドするためのいくつかの方法を公開します。For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

メソッドMethod 説明Description
renderLoadingrenderLoading 読み込み状態をレンダリングします。Renders the loading state.
renderNoDatarenderNoData 空のデータ状態をレンダリングします。Renders the empty data state.
renderPeoplerenderPeople ユーザーのリストを値の上限までレンダリングし show-max ます。Renders a list of people, up to the show-max value.
renderPersonrenderPerson 個々のユーザーをレンダリングします。Renders an individual person.
renderOverflowrenderOverflow その値を超える残りのユーザーの表現をレンダリングし show-max ます。Renders a representation of remaining people beyond the show-max value.