技術標籤：Microsoft Graph MailbagMicrosoft GraphMSGraph ToolkitMicrosoft 365

本篇我們主要介紹 Microsoft Graph Toolkit 中的 mgt-get 元件。

=>關於 Microsoft Graph Toolkit 的資訊<=

Getting started

關於這個元件的介紹，可以檢視之前的文章。

使用 mgt-get 構建你的第一個自定義元件

我們演示一個顯示當前登入使用者姓名和郵箱的自定義元件。該元件需要兩個主要屬性：要查詢的resource和必要的scope。

<mgt-get resource
 
="/me" scopes="User.Read">
  <template>
    Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}
  </template>
</mgt-get>

返回的效果如下圖所示：

使用 mgt-get 展示列表內容

使用 mgt-get 元件不僅能展示特定的物件，還可以展示列表內容。例如我們可以展示郵件的內容，可以自定義展示的格式。

<mgt-get resource="/me/mailFolders/Inbox/messages"
 
 scopes="Mail.Read">
  <template>
    <ul>
      <li data-for="email in value">
        {{ email.sender.emailAddress.address }} : {{ email.subject }}
      </li>
    </ul>
  </template>
</mgt-get>

效果如下圖：

使用 mgt-get 的高階場景

除錯

在開發模板時，我們會想要知道 Microsoft Graph 返回的資料是什麼，我們可以使用下面的程式碼直接顯示返回的資料。

<mgt-get resource="/me" scopes="User.Read">
  <template>
    {{ this }}
  </template>
</mgt-get>

資料轉換

我們還可以基於現有返回的資料進行再加工，對資料擴充或加上自己的邏輯。下面的示例展示瞭如何使用自定義轉換器在結果返回時將資訊輸出到瀏覽器命令列。

<mgt-get id="mgt-get-events" resource="/me/mailFolders/Inbox/messages" scopes="Mail.Read">
  <template>
    <ul>
      <li data-for="email in value">
        {{ getFormattedMessage(email) }}
      </li>
    </ul>
  </template>
</mgt-get>

<script>
  document.querySelector('#mgt-get-events').templateContext = {
    getFormattedMessage: (message) => {
      console.log(message);
      return `${message.sender.emailAddress.address} : ${message.subject}`;
    }
  }
</script>

快取資料

mgt-get 元件有一個 cache-enabled 屬性，通過它可以快取從 Microsoft Graph 請求到的資料，以避免反覆地請求，提高效能。

<mgt-get resource="/me" scopes="User.Read" cache-enabled="true">
  <template>
    Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}
  </template>
</mgt-get>

巢狀 mgt-get 元件

在更復雜的場景中，我們可能需要依次序向 Microsoft Graph 請求一些資料，以獲得更多資訊或相關資訊。如下面的示例，找到當前登入使用者的manager並展示他訪問檔案的趨勢資訊。

<mgt-get resource="/me/manager" scopes="User.Read.All">
  <template>
    Hello, your manager is {{ givenName }} {{ surname }}! Their email is {{ mail }}! The following list is what is trending around them :

    <mgt-get resource="/users/{{ id }}/insights/trending" scopes="Sites.Read.All" cache-enabled="true">
      <template>
        <ul>
          <li data-for="file in value">
            <a href="{{ file.resourceReference.webUrl }}">{{ file.resourceVisualization.title }}</a>
          </li>
        </ul>
      </template>
    </mgt-get>
  </template>
</mgt-get>

使用其他 mgt 元件

不僅 mgt-get 元件自己可以巢狀，還可以巢狀其他元件，我們稍微改一下上面的示例，將 mgt-person 巢狀進來。

<mgt-get resource="/me/manager" scopes="User.Read.All" cache-enabled="true">
  <template>
    Hello, your manager is <mgt-person user-id="{{ id }}" view="oneline" show-presence="true" person-card="hover"></mgt-person> <br />

    The following list is what is trending around them :

    <mgt-get resource="/users/{{ id }}/insights/trending" scopes="Sites.Read.All" cache-enabled="true">
      <template>
        <ul>
          <li data-for="file in value">
            <a href="{{ file.resourceReference.webUrl }}">{{ file.resourceVisualization.title }}</a>
          </li>
        </ul>
      </template>
    </mgt-get>
  </template>
</mgt-get>

本篇就介紹到這。