Microsoft 365 からデータを表示する
この単元では、他の Microsoft Graph ツールキット コンポーネントを検出し、これらのコンポーネントを使用して Microsoft 365 からデータを表示する方法について説明します。
Microsoft Graph ツールキット コンポーネントとは
Microsoft Graph ツールキット コンポーネント (Web コンポーネント) は、実際には HTML タグです。 コンポーネントはプロバイダーと連携してユーザー アクセス トークンを取得し、Microsoft Graph API を呼び出して必要なデータを取得し、Fluent UI を使用してデータを表示します。 これらの再利用可能な HTML タグは、Microsoft 365 のさまざまな種類のデータを統合するのに役立ちます。
アプリケーションで最も人気のある Microsoft 365 データセットにアクセスするために使用されるコンポーネントは多数あります。 いくつかのコンポーネントについて説明し、さまざまなシナリオでそれらをどのように使用できるかを見てみましょう。
シナリオ 1: 予定表からイベントを取得する
アプリケーションにサインインしたユーザーの今後の予定表イベントを表示するとします。 アプリで コンポーネントを使用して、予定表イベントを mgt-agenda 簡単に実装できます。 既定では、このコンポーネントは Microsoft Graph /me/calendarview API エンドポイントから予定表イベントを返します。
<mgt-agenda></mgt-agenda>
シナリオ 2: プランナーからタスクを表示する
ユーザーのタスクを表示する Web ページを作成するとします。 タスク コンポーネントを使用して、Microsoft Plannerからデータを取得できます。 mgt-tasks では、Microsoft 365 エクスペリエンスに似た事前構築済みの UI を使用して、ユーザーのデータが表示されます。
<mgt-tasks></mgt-tasks>
シナリオ 3: ユーザーの検索を統合する
アプリ内のユーザーの一覧を表示し、特定のユーザーを検索する場合は、Peopleピッカー コンポーネントを使用できます。
<mgt-people-picker></mgt-people-picker>
コンポーネントでサポートされている属性を使用して、結果を mgt-people-picker 処理できます。 たとえば、リストに表示される最大人数を制限できます。
<mgt-people-picker show-max="3"></mgt-people-picker>
要約すると、Microsoft Graph ツールキットのすべてのコンポーネントは同じ構造を共有します。 プロバイダーと連携して認証を処理し、Microsoft Graph API を使用してデータを取得し、ビルド済みの UI を使用して結果を表示します。