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

ユーザー コンポーネントは、写真、名前、電子メールアドレス、またはその他のユーザーの詳細を使用して、ユーザーまたは連絡先を表示するために使用されます。

ユーザー コンポーネントは、mgt-person-card を使用して、ユーザーに関する追加情報を含むポップアップ カードを表示します。 詳細については、「ユーザー カード」のセクションを参照してください。

例

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

ユーザー情報の設定

3 つのプロパティを使用して、ユーザーの詳細を設定できます。 インスタンスごとに以下のプロパティの 1 つのみを使用してください。

• user-id属性またはuserIdプロパティを設定して、ID を使用して Microsoft Graph からユーザーをフェッチします。

• person-query属性またはpersonQueryプロパティを設定して、Microsoft Graph で特定のユーザーを検索します。 使用可能な最初のユーザーを選択し、ユーザーの詳細を取得します。 電子メールは、適切な人に質問するのに最適ですが、名前も同様に機能します。

• person-presence 属性または personPresence プロパティを設定して、個人アバターにプレゼンス バッジを手動で追加します。

• avatar-size属性またはavatarSizeプロパティをsmallまたはlargeに設定して、アバターのサイズを決定します。 これにより、アバターに 正しいプレゼンス バッジ を追加できます。 アバターのサイズをさらにカスタマイズするには、次に示す適切な対応する css カスタム プロパティを選択する必要があります。 既定では、値はautoに設定されており、viewプロパティに基づいてプレゼンスをレンダリングする方法を自動的に決定します。 アバターが 32 pxx 32 px より小さい場合は、smallを使用することをお勧めします。

• 次の例に示すように、person-details属性またはpersonDetailsプロパティを使用して、ユーザーの詳細を手動で設定します。

  let personControl = document.getElementById('myPersonControl');
  personControl.personDetails = {
      displayName: 'Nikola Metulev',
      mail: 'nikola@contoso.com',
      personImage: 'url'
  }
  

  イメージが指定されていない場合は、イメージがフェッチされます (使用可能な場合)。

• 既定では、person コンポーネントは、標準の Microsoft Graph ユーザー セットのプロパティのみを要求 します。 追加のプロパティを要求するには、 line(x)Propertyの任意の部分として宣言します。

プロパティ

いくつかのプロパティを使用して、コンポーネントをカスタマイズできます。

CSS カスタム プロパティ

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

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

.person {
  --person-background-color: #616161;
  --person-background-border-radius: 30%;
  --person-avatar-size: 40px;
  --person-avatar-border: 3px solid yellow;
  --person-avatar-border-radius: 54%;
  --person-initials-text-color: white;
  --person-initials-background-color: blue;
  --person-line1-font-size: 32px;
  --person-line1-font-weight: 600;
  --person-line1-text-color: red;
  --person-line1-text-transform: capitalize;
  --person-line1-text-line-height: 20px;
  --person-line2-font-size: 28px;
  --person-line2-font-weight: 500;
  --person-line2-text-color: orange;
  --person-line2-text-transform: full-width;
  --person-line2-text-line-height: 16px;
  --person-line3-font-size: 24px;
  --person-line3-font-weight: 400;
  --person-line3-text-color: blue;
  --person-line3-text-transform: uppercase;
  --person-line3-text-line-height: 12px;
  --person-line4-font-size: 20px;
  --person-line4-font-weight: 300;
  --person-line4-text-color: green;
  --person-line4-text-transform: lowercase;
  --person-line4-text-line-height: 12px;
  --person-details-spacing: 30px;
}

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

イベント

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

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

テンプレート

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

次の例では、person コンポーネントのテンプレートを定義しています。

<!-- Retemplate the entire person component -->
<mgt-person>
  <template>
    <div data-if="personImage">
      <img src="{{personImage}}" />
    </div>
    <div data-else>
      {{person.displayName}}
    </div>
  </template>
</mgt-person>

<!-- Retemplate the line properties -->
<mgt-person view="threeLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Super cool
    </div>
  </template>
  <template data-type="line3">
    <div>
      Loves MGT
    </div>
  </template>
</mgt-person>

<mgt-person view="fourLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Musician
    </div>
  </template>
  <template data-type="line3">
    <div>
      Calif records
    </div>
  </template>
  <template data-type="line4">
    <div>
      {{person.mail}}
    </div>
  </template>
</mgt-person>

<!-- Person-card template -->
<mgt-person person-query="me" view="twolines" person-card="hover">
	<template data-type="person-card">
		My custom person card experience
	</template>
</mgt-person>

ユーザー カード

mgt-personコンポーネントは、ホバーまたはクリックのいずれかでmgt-person-cardを表示できます。

HTML ページにコントロールを追加します

<mgt-person person-query="me" person-card="hover"></mgt-person>

テンプレート、スタイル、および属性の詳細については、「ユーザー カード コンポーネント」を参照してください。

グローバル コンポーネント構成

MgtPerson クラスは、アプリケーション内のすべてのユーザー カード コンポーネントを構成する静的な config オブジェクトを公開します。

次の例は、config オブジェクトの使用方法を説明しています。

import { MgtPerson } from '@microsoft/mgt-components';

MgtPerson.config.useContactApis = false;

config オブジェクトでは、以下のプロパティが利用可能です。

Microsoft Graph のアクセス許可

このコントロールは、以下の Microsoft Graph API とアクセス許可を使用します。 呼び出される API ごとに、ユーザーには少なくとも 1 つのアクセス許可が一覧表示されている必要があります。 一部の構成では、Microsoft Graph が複数呼び出される可能性があります。 これらの呼び出しで異なるアクセス許可を使用できる場合、各 API とアクセス許可セットは別々の行に配置されます。

サブコンポーネント

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

認証

このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。

キャッシュ

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

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

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

ローカリゼーション

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