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

[アーティクル]
11/07/2024

個人カードコンポーネントは、ユーザーに関するより多くの情報を表示するための応答コンポーネントです。これは、 mgt-person コンポーネントのポップアップとして使用されます。

mgt-person コンポーネントの詳細については、mgt-person を参照してください。

mgt-person の使用例

次の例では、mgt-person コンポーネントを持つ mgt-person-card コンポーネントの使用を表示しています。ユーザーをポイントまたはクリックすると、人物カードが表示されます。

HTML
React

mgt.dev でこの例を開きます。

mgt-person-card をスタンドアロンコンポーネントとして使用する例

次の例は、 mgt-person-card コンポーネントの使用を示しています。コードエディターを使用して、プロパティによってコンポーネントの動作がどのように変化するかを確認します。

HTML
React

mgt.dev でこの例を開きます。

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

MgtPersonCardConfig クラスは、アプリケーション内のすべての人物カードコンポーネントを構成する静的構成プロパティを公開します。クラスは、Microsoft Graph からユーザーに関する詳細を取得するためにユーザーカードによって使用されるセクションと API を構成します。

既定値では、すべてのセクションと API が有効になっています。次の例は、クラスプロパティを使用してセクションまたは API を無効にする方法を示しています。

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

MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;

使用できるプロパティを次に示します。

プロパティ	説明
useContactApis	`boolean` - 人物カードコンポーネントが Microsoft Graph Contact API を使用して連絡先の詳細と写真を検索できるかどうかを示します。既定値は、`true` です。
セクション	`object` - 個人カードに表示されるセクションを構成します。
isSendMessageVisible	`boolean` - 送信メッセージボタンが表示されるかどうかを示します。既定値は、`true` です。

個人カードセクション

個人カードには、ユーザーの詳細を表示するためのいくつかの構成可能なセクションが含まれています。

連絡先 - メール、電話、位置、場所などの連絡先情報。
組織 - 管理者、直属の部下、および関連する人々との組織グラフ。
メッセージ - 現在サインインしているユーザーに最も関連性の高い電子メールメッセージ。
ファイル - 現在サインインしているユーザーに最も関連性の高い共有ファイル。
プロフィール - プロフィール、スキル、言語などのプロフィール情報。

セクションは既定で読み込みされますが、MgtPersonCardConfig.sections オブジェクトプロパティでグローバルに無効にすることができます。使用できるプロパティを次に示します。

プロパティ	説明
組織	`boolean` - 個人カード組織セクションが表示されているかどうかを示します。既定値は、`true` です。
mailMessages	`boolean` - 個人カード組織セクションが表示されているかどうかを示します。既定値は、`true` です。
ファイル	`boolean` - 個人カードファイルセクションが表示されているかどうかを示します。既定値は、`true` です。
プロフィール	`boolean` - 個人カードプロフィールセクションが表示されているかどうかを示します。既定値は、`true` です。
lock-tab-navigation	`boolean` - タブを使用してナビゲーションをロックし、カードセクションから流出しないようにします。既定値は、`false` です。

セクションを無効にするには、アプリの初期化コードでプロパティを false に設定します。

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

MgtPersonCardConfig.sections.profile = false;

Teams の統合のためのセットアップ

個人カードコンポーネントでは、Teams チャットを介することを含めて、対象者に連絡を取ることができます。 Teams タブアプリ内でコンポーネントを使用する場合、TeamsHelper で microsoftTeamsLib を設定することでブラウザーウィンドウを開くのではなく、コンポーネントが直接チャットにディープリンクするようにすることができます。

Person-Card コンポーネントが Teams ライブラリを検出できない場合、コンポーネントは代わりに Teams Web クライアントを開こうとします。

import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";

TeamsHelper.microsoftTeamsLib = microsoftTeams;

プロパティ

既定では、 mgt-person コンポーネントは、ユーザーの詳細を mgt-person-card コンポーネントに渡します。ただし、これらの属性を使用して、 mgt-person コンポーネントをテンプレート化するとき、または mgt-person-card コンポーネントをスタンドアロンコンポーネントとして使用するときに変更できます。

属性	種類	説明
person-details	MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact	Microsoft Graph で定義されているユーザーオブジェクトには、ユーザーに関する詳細が含まれています。
person-image	String	カードに表示されているユーザーに関連する画像の URL。
inherit-details	なし	個人カードが `mgt-person` コンポーネントの親ツリーを移動する場合に、同じ `person-details` と `person-image` のデータを使用できるようにします。
user-id	String	開発者がユーザー ID を指定して、ユーザーカードコンポーネントに表示されるデータを取得できるようにします
person-query	String	開発者がユーザークエリを提供して、人物カードコンポーネントに表示されるデータを取得できるようにします
person-card	String	`mgt-person` コンポーネントをポイントまたはクリックしたときに、`person-card` コンポーネントをポップアップカードとして表示できるかどうかを指定します。許可される値は、 `hover` または `click`。

CSS カスタムプロパティ

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

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

.person-card {
  --person-card-nav-back-arrow-hover-color: green;
  --person-card-icon-color: red;
  --person-card-line1-font-size: 30px;
  --person-card-line1-font-weight: 800;
  --person-card-line1-line-height: 38px;
  --person-card-line2-font-size: 24px;
  --person-card-line2-font-weight: 600;
  --person-card-line2-line-height: 30px;
  --person-card-line3-font-size: 24px;
  --person-card-line3-font-weight: 300;
  --person-card-line3-line-height: 29px;
  --person-card-avatar-size: 85px;
  --person-card-details-left-spacing: 25px;
  --person-card-avatar-top-spacing: 25px;
  --person-card-details-bottom-spacing: 20px;
  --person-card-background-color: pink;
  --person-card-expanded-background-color-hover: blue;
  --person-card-icon-hover-color: magenta;
  --person-card-show-more-color: blue;
  --person-card-show-more-hover-color: green;
  --person-card-fluent-background-color: yellow;
  --person-card-line1-text-color: purple;
  --person-card-line2-text-color: blue;
  --person-card-line3-text-color: green;
  --person-card-fluent-background-color-hover: orange;
  --person-card-base-icons-left-spacing: 110px;

  /** person-card sections tokens */

  /** Organization */
  --organization-active-org-member-target-background-color: blue;
  --organization-title-color: green;
  --organization-sub-title-color: yellow;
  --organization-hover-color: grey;
  --organization-coworker-hover-color: grey;
  --organization-coworker-border-color: purple;
  --organization-active-org-member-border-color: red;
  --organization-coworker-person-avatar-size: 50px;
  --organization-member-person-avatar-size: 60px;
  --organization-direct-report-person-avatar-size: 80px;

  /** Style for the avatar-size in the person-card sections */
  --organization-member-person-avatar-size: 60px;
  --coworker-person-avatar-size: 50px;
  --direct-report-person-avatar-size: 40px;

  /** Files: Uses custom css properties for mgt-file-list and mgt-file */

  /** Messages */

  --message-subject-color: purple;
  --message-from-color: blue;
  --message-color: black;
  --message-hover-color: grey;
  --message-subject-font-size: 18px;
  --message-subject-font-weight: 600;
  --message-subject-line-height: 25px;
  --message-from-font-size: 40px;
  --message-from-font-weight: 800;
  --message-date-color: purple;
  --message-from-line-height: 25px;

  /** Contact */

  --contact-title-color: blue;
  --contact-value-color: green;
  --contact-link-color: red;
  --contact-link-hover-color: purple;
  --contact-background-color: grey;
  --contact-copy-icon-color: yellow;

  /** Profile */

  --profile-title-color: blue;
  --profile-background-color: grey;
  --profile-token-item-color: blue;
  --profile-token-overflow-color: purple;
  --profile-section-title-color: black;
  --profile-token-item-background-color: yellow;
}

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

テンプレート

個人カードコンポーネントでは、テンプレートを使用して、コンポーネントの一部を追加したり置き換えたりすることができます。テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。

データ型	データコンテキスト	説明
no-data	null	連絡可能なデータがないときに使用するテンプレートです。
既定	`person`: ユーザー詳細オブジェクト `personImage`: 画像の URL	既定のテンプレートは、コンポーネント全体を独自のものに置き換えます。
person-details	`person`: ユーザー詳細オブジェクト	個人カードの上部をレンダリングするために使用されるテンプレートです。
additional-details	`person`: ユーザー詳細オブジェクト `personImage`: 画像の URL	追加の詳細コンテナーにカスタムコンテンツを追加するために使用されるテンプレートです。

たとえば、テンプレートを使用して、 mgt-person コンポーネントにアタッチされているコンポーネントをカスタマイズし、テンプレートを使用してカードに追加の詳細を追加できます。

<mgt-person person-query="me" view="twolines" person-card="hover">
  <template data-type="person-card">
    <mgt-person-card inherit-details>
      <template data-type="additional-details">
        <h3>Stuffed Animal Friends:</h3>
        <ul>
          <li>Giraffe</li>
          <li>lion</li>
          <li>Rabbit</li>
        </ul>
      </template>
    </mgt-person-card>
  </template>
</mgt-person>

イベント

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

イベント	いつ出力されるか	カスタムデータ	キャンセル	泡	カスタムテンプレートを使用する
`expanded`	ユーザーがカードの展開された詳細セクションを開いた	なし	いいえ	はい	はい(既定のテンプレートをオーバーライドしない限り)

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

Microsoft Graph のアクセス許可

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

構成	アクセス許可	API	Section
すべての構成で	User.Read、User.ReadWrite	/me	既定値
`personDetails` ユーザーの `id` で設定しますが、電子メールなしで設定するか、 `userId` 設定します	User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All	/users/{id}	既定値
`personDetails` ユーザーの `id` で設定しますが、電子メールなしで設定するか、 `userId` 設定します	User.ReadBasic.All、User.Read.All、User.ReadWrite.All	/users/{id}/photo/$value	既定値
`personQuery` に設定する `me`	User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All	/me、 /users/{id}/photo/$value	既定値
`personQuery` に設定する `me`	User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、User.ReadWrite.All	/me/photo/$value	既定値
`personQuery` 以外の値に設定する `me`	People.Read、People.Read.All	/me/people/?$search=	既定値
`personQuery` `me`以外の値に設定し、`true`に設定`config.useContactApis` (既定値)	Contacts.Read、Contacts.ReadWrite	/me/contacts/*	既定値
`personQuery`を `me` 以外の値に設定し、をに設定`config.useContactApisfalse`	User.ReadBasic.All、User.Read.All、User.ReadWrite.All	/users/{id}/photo/$value	既定値
`showPresence` に設定する `true`	Presence.Read.All	/users/{id}/presence	既定値
`sections.organization` enabled (既定値)	User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All	/users/{id}?$expand=manager($levels=max), /users/${id}/directReports	組織
`sections.organization.showWorksWith` set (既定値)	People.Read.All	/users/{id}/people	組織
`sections.mailMessages` enabled (既定値)	Mail.ReadBasic, Mail.Read, Mail.ReadWrite	/me/messages	メッセージ
`sections.files` enabled (既定値)	Sites.Read.All、Sites.ReadWrite.All	/me/insights/shared and /me/insights/used	ファイル
`sections.profile` enabled (既定値)	User.Read.All、User.ReadWrite.All	/users/{id}/profile	プロファイル

getMgtPersonCardScopes()関数は、グローバルユーザーカードの構成に基づいて人物カードが機能するために必要なスコープの配列を返します。

import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;

const neededScopes = getMgtPersonCardScopes();

サブコンポーネント

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

認証

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

キャッシュ

重要

mgt-person-card コンポーネントは、Microsoft Graph を呼び出さずに親mgt-person コンポーネントから基本的な人物データを取得します。 mgt-person-cardを個別に使用すると、必要なデータ自体が取得され、キャッシュされます。カードのセクションに表示されるデータは個別に取得され、キャッシュされません。

オブジェクトストア	キャッシュされたデータ	注釈
`people`	ユーザーの情報	`personQuery`が指定され、その値がとは異なる場合に使用されます`me`
`photos`	人の写真
`presence`	人のプレゼンス	`showPresence` がに設定されている場合に使用されます。`true`
`users`	ユーザーのユーザー情報	`userId`が指定されているか、`personQuery`がに設定されている場合に使用されます`me`

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

ローカリゼーション

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

文字列名	既定値
endOfCard	`End of the card`
quickMessage	`Send a quick message`
expandDetailsLabel	`Expand details`
renderOverviewSectionLabel	`Render overview section`
sendMessageLabel	`Send message`
emailButtonLabel	`Email`
callButtonLabel	`Call`
chatButtonLabel	`Chat`
videoButtonLabel	`Video`
closeCardLabel	`Close card`

次の変数は、person-card セクションでローカライズすることもできます。

Contact

文字列名	既定値
contactSectionTitle	`Contact`
emailTitle	`Email`
chatTitle	`Teams`
businessPhoneTitle	`Business Phone`
cellPhoneTitle	`Mobile Phone`
departmentTitle	`Department`
personTitle	`Email`
officeLocationTitle	`Office Location`
copyToClipboardButton	`Copy to clipboard`

ファイル

文字列名	既定値
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

メッセージ

文字列名	既定値
emailsSectionTitle	`Emails`

組織

文字列名	既定値
reportsToSectionTitle	`Reports to`
directReportsSectionTitle	`Direct reports`
organizationSectionTitle	`Organization`
youWorkWithSubSectionTitle	`You work with`
userWorksWithSubSectionTitle	`works with`

プロファイル

文字列名	既定値
SkillsAndExperienceSectionTitle	`Skills & Experience`
AboutCompactSectionTitle	`About`
SkillsSubSectionTitle	`Skills`
LanguagesSubSectionTitle	`Languages`
WorkExperienceSubSectionTitle	`Work Experience`
EducationSubSectionTitle	`Education`
professionalInterestsSubSectionTitle	`Professional Interests`
personalInterestsSubSectionTitle	`Personal Interests`
birthdaySubSectionTitle	`Birthday`
currentYearSubtitle	`Current`
socialMediaSubSectionTitle	`Social Media`

次の方法で共有

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

mgt-person の使用例

mgt-person-card をスタンドアロンコンポーネントとして使用する例

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

個人カードセクション

Teams の統合のためのセットアップ

プロパティ

CSS カスタムプロパティ

テンプレート

イベント

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

Contact

ファイル

メッセージ

組織

プロファイル

フィードバック

その他のリソース

次の方法で共有

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

mgt-person の使用例

mgt-person-card をスタンドアロン コンポーネントとして使用する例

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

個人カード セクション

Teams の統合のためのセットアップ

プロパティ

CSS カスタム プロパティ

テンプレート

イベント

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

Contact

ファイル

メッセージ

組織

プロファイル

フィードバック

その他のリソース

mgt-person-card をスタンドアロンコンポーネントとして使用する例

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

個人カードセクション

CSS カスタムプロパティ