顯示來自 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>
![Microsoft Graph 工具組的 [日程] 元件的螢幕擷取畫面。](../../m365-developer/msgraph-toolkit-intro/media/05-agenda.png)
案例 2：從規劃工具顯示工作
假設您想要建立網頁以顯示使用者的工作。 您可以使用工作元件從 Microsoft Planner 取得數據。
mgt-tasks 會使用類似於 Microsoft 365 體驗的預先建置 UI 來顯示使用者的數據：
<mgt-tasks></mgt-tasks>
![Microsoft Graph 工具組的 [工作] 元件的螢幕擷取畫面。](../../m365-developer/msgraph-toolkit-intro/media/05-tasks.png)
案例 3：整合人員搜尋
如果您想要在應用程式中顯示人員清單並搜尋特定人員，您可以使用人員選擇器元件。
<mgt-people-picker></mgt-people-picker>
![Microsoft Graph 工具組的 [人員選擇器] 元件的簡短動畫。](../../m365-developer/msgraph-toolkit-intro/media/05-people-picker.png)
您可以使用元件支援的 mgt-people-picker 屬性來處理結果。 例如，您可以限制清單中顯示的人數上限：
<mgt-people-picker show-max="3"></mgt-people-picker>
![[人員選擇器] 元件中 show-max 屬性的螢幕擷取畫面。](../../m365-developer/msgraph-toolkit-intro/media/05-people-picker-max.png)
總結來說，Microsoft Graph 工具組的所有元件都共用相同的結構。 這些元件可與提供者合作處理驗證、使用 Microsoft Graph API 取得資料，以及使用預先建置的 UI 顯示結果。