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

Person コンポーネントは、ユーザーまたは連絡先を、自分の写真、名前、電子メールアドレス、またはその他の個人情報を使用して表示するために使用されます。The person component is used to display a person or contact by using their photo, name, email address, or any other person details.

また、person コンポーネントは、ユーザーに関する追加情報が表示されるポップアップカードを表示するために、このユーザーカードを使用します。The person component also uses the mgt-person-card to display a flyout card with additional information about the user. 詳細については、「 Person Card 」セクションを参照してください。For details, see the Person Card section.

Example

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

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

個人情報の設定Setting the person details

3つのプロパティを使用して、人物の詳細を設定できます。You can use three properties to set the person details. インスタンスごとに、次のいずれかのプロパティを使用します。Use only one of the following properties per instance:

  • 属性またはプロパティを設定して、 user-id userId ID を使用して Microsoft Graph からユーザーを取得します。Set the user-id attribute or userId property to fetch the user from Microsoft Graph by using their ID.

  • person-query personQuery 特定のユーザーの Microsoft Graph を検索するように、属性またはプロパティを設定します。Set the person-query attribute or personQuery property to search Microsoft Graph for a given person. 最初に使用可能な人物を選択し、ユーザーの詳細を取得します。It will choose the first person available and fetch the person details. 電子メールは、適切な人物に対してクエリを実行することをお勧めしますが、名前も同じように動作します。An email works best to ensure the right person is queried, but a name works as well.

  • person-presence属性またはプロパティを設定して、 personPresence ユーザーアバターに手動でプレゼンスバッジを追加します。Set the person-presence attribute or personPresence property to add a presence badge to person avatar manually.

  • avatar-size avatarSize small large アバターのサイズを決定するには、属性またはプロパティをに設定します。Set the avatar-size attribute or avatarSize property to small or large to determine the size of avatar. これにより、正しいプレゼンスバッジがアバターに追加されます。This helps add the correct presence badge to avatar. アバターサイズをさらにカスタマイズするには、次に示す適切な css カスタムプロパティを選択する必要があります。You will need to choose the correct corresponding css custom properties shown below to further customize avatar size. 既定では、 auto プロパティに基づいてプレゼンスを表示する方法が自動的に決定される値に設定されてい view ます。By default, the value is set to auto which will automatically decide how to render the presence based on the view property. 使用する small アバターが間隔よりも小さい場合は、を使用することをお勧めします。We recommend using small if your avatar is smaller than 32px by 32px.

  • 次の person-details personDetails 例に示すように、属性またはプロパティを使用して手動で個人情報を設定します。Use the person-details attribute or personDetails property to manually set the person details, as shown in the following example.

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

    イメージが指定されていない場合は、取得されます (使用可能な場合)。If no image is provided, one will be fetched (if available).

プロパティProperties

コンポーネントをカスタマイズするには、いくつかのプロパティを使用できます。You can use several properties to customize the component.

属性Attribute プロパティProperty 説明Description
ユーザー iduser-id userIduserId ユーザー id に設定して、Microsoft Graph からそのユーザーの詳細とイメージをフェッチします。Set to a user id to fetch that user's details and image from Microsoft Graph.
person-クエリperson-query 個人クエリpersonQuery ユーザーの名前または電子メールに設定して、Microsoft Graph で個人を検索し、最初の人物の詳細と画像を取得します。Set to a name or email of a person to search for a person in Microsoft Graph and fetch the first person's details and image.
個人-詳細person-details 個人情報personDetails Person を表すオブジェクトに設定します。Set to an object representing a person. ユーザー、ユーザー、連絡先、またはグループのリソースからのオブジェクトと連携します。Works with object from the people, users, contacts, or group, resources.
個人画像person-image 個人画像personImage ユーザーに対して表示する画像を設定します。Set the image to show for the person.
個人プレゼンスperson-presence 個人プレゼンスpersonPresence ユーザーのプレゼンスを設定します。Set the presence for the person.
fetch-imagefetch-image fetchImagefetchImage personImageユーザーが指定したオブジェクトに基づいて Microsoft Graph から自動的にフェッチするフラグを設定し personDetails ます。Set flag to fetch personImage automatically from Microsoft Graph based on the personDetails object provided by the user.
ビューview ビューview ユーザーがどのように表示されるかを制御するように設定します。Set to control how the person is rendered. 既定値はavatarDefault is avatar
avatar-アバターのみ表示avatar - show only avatar
oneline-アバターと最初の線を表示する ( displayName 既定)oneline - show avatar and first line (displayName by default)
twolines-アバターと2行のテキストを表示 displayName します ( mail 既定)。twolines - show avatar and two lines of text (displayName and mail by default)
line1-プロパティline1-property line1Propertyline1Property テキストの最初の行に使用する個人情報のプロパティを設定します。Sets the property of the personDetails to use for the first line of text. 既定値は displayName です。Default is displayName.
line2-プロパティline2-property line2Propertyline2Property 2行目のテキストに使用する個人情報のプロパティを設定します。Sets the property of the personDetails to use for the second line of text. 既定値は mail です。Default is mail.
表示-プレゼンスshow-presence showPresenceshowPresence ユーザーのプレゼンスを表示するフラグを設定 false します。既定値はです。Set flag to display person presence - default is false.
表示名show-name showNameshowName 使用されなくなりました viewDEPRECATED - use view. ユーザーの表示名を表示するフラグを設定 false します。既定値はです。Set flag to display person display name - default is false.
電子メールを表示するshow-email showEmailshowEmail 使用されなくなりました viewDEPRECATED - use view. ユーザーの電子メールを表示するフラグを設定 false します。既定値はです。Set flag to display person email - default is false.

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

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

mgt-person {
  --avatar-size: 48px;
  --avatar-border: 0;
  --avatar-border-radius: 50%;
  --initials-color: white;
  --initials-background-color: magenta;
  --font-family: 'Segoe UI';
  --font-size: 14px;
  --font-weight: 500;
  --color: black;
  --presence-background-color: #ffffff;
  --text-transform: none;
  --line2-font-size: 12px;
  --line2-font-weight: 400;
  --line2-color: black;
  --line2-text-transform: none;
  --details-spacing: 12px;
}

詳細については、「スタイルコンポーネント」を参照してください。To learn more, see styling components.

テンプレートTemplates

コンポーネントは、 mgt-person コンポーネントの特定の部分を置き換えることができるいくつかのテンプレートをサポートしています。The mgt-person component supports several templates that allow you 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
読み込みloading なしnone コンポーネントが laoding 状態にあるときにレンダリングするテンプレート。The template to render while the component is in a laoding state.
データなしno-data なしnone ユーザーイメージまたはデータが利用できない場合に表示されるテンプレート。The template to render when no person image or data is available.
既定値です。default person: person details オブジェクトperson: The person details object
personImage: 画像の URLpersonImage: The URL of the image
既定のテンプレートでは、コンポーネント全体が独自のものに置き換えられます。The default template replaces the entire component with your own.
個人カードperson-card person: person details オブジェクトperson: The person details object
personImage: 画像の URLpersonImage: The URL of the image
ポイントまたはクリックに表示される、ユーザーカードを更新するテンプレート。The template to update the mgt-person-card displayed on hover or click.

次の例では、person コンポーネントのテンプレートを定義します。The following example defines a template for the person component.

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

人物カードPerson Card

mgt-personコンポーネントは、 mgt-person-card ホバーまたはクリックのいずれかでを表示できます。The mgt-person component can show an mgt-person-card on either hover or click.

HTML ページにコントロールを追加するAdd the control to the HTML page

<mgt-person person-query="me" person-card="hover"></mgt-person>
属性Attribute プロパティProperty 説明Description
個人カードperson-card 個人カードの相互作用personCardInteraction フライアウトパネルをアクティブにするために必要なユーザーアクションを決定する列挙 hover clickAn enumeration to determine user action necessary to activate flyout panel - hover or click. 既定値はnoneDefault value is none

テンプレート、スタイル、および属性の詳細については、「 Person Card component」を参照してください。For more information about templating, styling, and attributes, see Person Card component.

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

このコントロールでは、次の Microsoft Graph Api とアクセス許可を使用します。This control uses the following Microsoft Graph APIs and permissions.

リソースResource PermissionPermission
/me/me User.ReadUser.Read
/me¥ photo/$value/me/photo/$value User.ReadUser.Read
/me/people/? $search =/me/people/?$search= People.ReadPeople.Read
/me/contacts/*/me/contacts/* Contacts.ReadContacts.Read
/ユーザー///_/$value/users/{id}/photo/$value User.ReadBasic.AllUser.ReadBasic.All
/me/プレゼンス/me/presence Presence.ReadPresence.Read
/ユーザー/{2}/プレゼンス/users/{id}/presence Presence.Read.AllPresence.Read.All

注: */photo/$value 個人用の microsoft アカウントのリソースにアクセスするには、microsoft Graph ベータ版エンドポイントを使用します。Note: to access the */photo/$value resources for personal Microsoft accounts, use the Microsoft Graph beta endpoint.

認証Authentication

このコントロールは、認証のドキュメントで説明されているグローバル認証プロバイダを使用して、必要なデータをフェッチします。The control uses the global authentication provider described in the authentication documentation to fetch the required data.

拡張して制御する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 when no image or person data is available.
renderAvatarrenderAvatar アバターをレンダリングします。Renders the avatar.
renderDetailsrenderDetails 個人の詳細パーツをレンダリングします。Renders the person details part.