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

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

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

mgt-person の使用例

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

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

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

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

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

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

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

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

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

個人カード セクション

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

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

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

セクションを無効にするには、アプリの初期化コードで プロパティを 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 コンポーネントをスタンドアロン コンポーネントとして使用するときに変更できます。

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 を次のいずれかの値に設定します。

たとえば、テンプレートを使用して、 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>

イベント

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

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

Microsoft Graph のアクセス許可

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

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

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

const neededScopes = getMgtPersonCardScopes();

サブコンポーネント

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

• mgt-file-list
• mgt-person

認証

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

キャッシュ

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

ローカリゼーション

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

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

Contact

ファイル

メッセージ

組織

プロファイル