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

[アーティクル]
02/08/2024

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

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

mgt-person の使用例

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

HTML
React

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

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

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

HTML
React

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

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

MgtPersonCard クラスは、アプリケーション内のすべての個人カードコンポーネントを構成する静的な config オブジェクトを公開します。 Config オブジェクトは、Microsoft Graph からユーザーの詳細を取得するために個人カードがどのセクションと API を使用するかを構成します。

既定値では、すべてのセクションと API が有効になっています。次の例では、Config オブジェクトを使用してセクションや API を無効にする方法を示しています。

import { MgtPersonCard } from `@microsoft/mgt`;

MgtPersonCard.config.useContactApis = false;
MgtPersonCard.config.sections.profile = false;

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

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

個人カードセクション

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

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

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

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

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

import { MgtPersonCard } from `@microsoft/mgt`;

MgtPersonCard.config.sections.profile = false;

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

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

個人カードコンポーネントが Teams の LIB を検出できない場合、コンポーネントは代わりに 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	コンポーネントを`person-card`ホバーまたはクリックしたときに、コンポーネントをポップアップカードとして表示できるホエーターを`mgt-person`指定します。許可される値は `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` の値に設定し、 `config.useContactApis` をに `true` 設定します (既定値)	Contacts.Read、Contacts.ReadWrite	/me/contacts/*	既定値
`personQuery` 以外の値 `me` に設定し、 `config.useContactApis` をに設定します。 `false`	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	Files
`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`	ユーザーのユーザー情報	が指定されているか、 `personQuery` がに設定されている場合`userId`に使用されます。`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-カードセクションでローカライズすることもできます。

Contact

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

Files

文字列名	既定値
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-カードを使用する例

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

個人カードセクション

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

プロパティ

CSS カスタムプロパティ

テンプレート

イベント

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

Contact

Files

メッセージ

組織

プロファイル

フィードバック

フィードバック

その他のリソース

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

mgt-person の使用例

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

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

個人カード セクション

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

プロパティ

CSS カスタム プロパティ

テンプレート

イベント

Microsoft Graph のアクセス許可

サブコンポーネント

認証

キャッシュ

ローカリゼーション

Contact

Files

メッセージ

組織

プロファイル

フィードバック

フィードバック

その他のリソース

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

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

個人カードセクション

CSS カスタムプロパティ