テンプレートを使用してデータの表示を変更する
Microsoft Graph ツールキットは、コンポーネントでデータの表示方法を変更できるカスタム テンプレートの作成をサポートしています。
たとえば、サインインしているユーザーに今後のイベントを表示する Web アプリケーションをビルドすることを計画しているとします。 このプロジェクトでは、Microsoft Graph ツールキットの Login コンポーネントの既定のエクスペリエンスを使用する代わりに、ユーザーのプロファイルを表示するサインイン ボタンを変更することが必要です。
Login コンポーネントのテンプレートを使用して、サインイン済みユーザーのプロファイルの表示を簡単に変更することができます。 また、ユーザーの表示名、名前、役職、メール、電話番号など、表示する具体的なデータを選択することもできます。
Microsoft Graph ツールキットのコンポーネントにテンプレートを追加するには、<template> HTML 要素を使用します。 たとえば、Login コンポーネントにテンプレートを追加することができます。
<mgt-login>
<template>
</template>
</mgt-login>
テンプレート化するコンポーネントの一部を定義する
各コンポーネントのテンプレートでは、複数のデータ パーツが使用可能です。
<template> 要素で data-type 属性を使用して、テンプレート化するパーツを定義することができます。 たとえば、Login コンポーネントでサインイン ボタンのパーツをテンプレート化したい場合は、data-type 属性に signed-in-button-content の値を追加します。
<mgt-login>
<template data-type="signed-in-button-content">
</template>
</mgt-login>
テンプレートにバインドするデータの選択
Microsoft Graph ツールキット コンポーネントのテンプレートは、アプリで特定のデータ コンテキストを選択して表示するのに役立ちます。 テンプレートのデータ型の値として signed-in-button-content を定義したので、サインイン ボタンにユーザーの名前を表示するとします。
Login コンポーネントは、実行時に {personDetails} オブジェクトをコンポーネントに渡します。
{personDetails} オブジェクトには、ユーザーに関するすべての詳細情報が用意されています。
{personDetails} オブジェクトをテンプレートで使用して、任意のユーザー データを表示することができます。 たとえば、ユーザーの名前を表示する場合は、{personDetails.givenName} をテンプレートに追加します。
<mgt-login>
<template data-type="signed-in-button-content">
<div>{{personDetails.givenName}}</div>
</template>
</mgt-login>
ヒント
テンプレートにどのようなデータがあるかを確認するには、{{ this }} と入力します。 この手順により、テンプレートにバインドされたオブジェクト全体が表示されます。 値が {personDetails.givenName} の場合、ボタンの内容は Waldek次の例のようになります。
次の演習では、Microsoft Graph ツールキット コンポーネントでテンプレートを使用してデータの表示を変更する方法を学びます。