# 如何將 Adaptive Cards Designer 設計好的範本訊息傳送到 Teams 頻道中

微軟有個 [Adaptive Cards](https://adaptivecards.io/) 語言，他可以讓你可以在不同的應用程式之間使用 JSON 宣告出一個跟平台框架無關的 UI 介面，所以針對一些輕量的 UI 介面，例如 Microsoft Teams, Bot Framework, Windows Timeline, Outlook Actionable Messages 之類的介面，就非常適合用 Adaptive Cards 來宣告 UI 介面。這篇文章我打算介紹 Adaptive Cards 如何用在 Microsoft Teams 的頻道中。

以下我用 [Weather large sample](https://github.com/microsoft/AdaptiveCards/blob/main/samples/Templates/Scenarios/WeatherLarge.template.json) 為例進行示範，讓你可以將以下 UI 介面發布到 Microsoft Teams 頻道中。

![Weather large sample](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/75eaa80d26be05fcf3c8-130325811-d9890b1f-e6b2-4cdb-bfb7-062a5980ad4c.png)

1.  開啟 [Weather large sample](https://github.com/microsoft/AdaptiveCards/blob/main/samples/Templates/Scenarios/WeatherLarge.template.json) 範例
    
    你可以從範例頁面看到 **Data JSON** 與 **Template JSON** 兩個區塊，所有的 Adaptive Cards 都是透過這兩塊內容組成的。其中 **Data JSON** 定義顯示在卡片上的資料，而 **Template JSON** 用來定義 UI 配置 ([Schema Explorer](https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/card-schema))。
    
2.  點擊 **Try it Yourself** 開啟 [Adaptive Cards Designer](https://adaptivecards.io/designer)
    
    開啟後你可以調整 **Data JSON** 與 **Template JSON** 的內容，然後按下 **Copy card payload** 取得組合後的 **Payload** 資料到剪貼簿。
    
    ![Copy card payload](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/ab7ccf13017832bce2df-130326086-c9847457-b91b-41ac-8a5c-8ecbce85d9e4.png)
    
3.  到 Microsoft Teams 選擇一個 **頻道** (Channel)，並設定 **連接器** (Connectors)
    
    ![連接器 Connectors](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/402aa37d0ea2cf61e25c-130326189-8d0eab4a-14fd-4de8-90ac-05239a7ab937.png)
    
4.  設定 **傳入 Webhook** (Incoming Webhook) 連接器
    
    ![傳入 Webhook](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/88d3e2e01e1e92d9004b-130326260-cf0380ed-e99c-48a7-8a47-9386905db936.png)
    
    你可以設定一個**連接器名稱** (`TESTAdaptiveCards`)，按下 **建立** 就可以取得一個 **URL** 位址！
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/42fcadd514bd50148ac7-130326353-10aaa9fd-d2e8-4b9d-958f-b27c2a737ec1.png)
    
5.  開啟 [Postman](https://www.postman.com/downloads) 工具
    
    選擇 `POST`
    
    設定 URL ▶ 請設定 **傳入 Webhook 連接器** 複製下來的 URL
    
    設定 Body ▶ 選擇 `raw` 與 `JSON` 並輸入以下內容範本：
    
    ```json
    {
        "type":"message",
        "attachments":[
          {
              "contentType":"application/vnd.microsoft.card.adaptive",
              "contentUrl":null,
              "content":
                  <<放入 Adaptive Cards 的 Payload 到這裡>>
          }
        ]
    }
    ```
    
    請在 `attachments[0].content` 貼上你從 [Adaptive Cards Designer](https://adaptivecards.io/designer) 按下 **Copy card payload** 取得的 **Payload** 資料，這時你就可以按下 **Send** 送出 HTTP POST 要求。
    
    ![Postman](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/123495dcd46c5cf0edc6-130326741-f22d891d-b5f7-4667-a726-21eeef54ed77.png)
    
6.  此時，大概不出兩秒，你的 Microsoft Teams 就會收到 Adaptive Cards 格式化過的訊息，非常的酷！ 👍
    
    ![你的 Microsoft Teams 就會收到 Adaptive Cards 格式化過的訊息](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/fb837b91310980736a83-130326826-894ec7d0-fa68-49b8-a1f0-1ee1af2bb609.png)
    

### 相關連結

-   [Adaptive Cards](https://adaptivecards.io/)
    -   [Adaptive Cards Overview | Microsoft Docs](https://learn.microsoft.com/en-us/adaptive-cards/?WT.mc_id=DT-MVP-4015686)
    -   [Samples and Templates](https://github.com/microsoft/AdaptiveCards/tree/main/samples)
    -   [Schema Explorer](https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/card-schema)
    -   [Designer](https://adaptivecards.microsoft.com/designer)
    -   [microsoft/AdaptiveCards](https://github.com/microsoft/AdaptiveCards): A new way for developers to exchange card content in a common and consistent way.
-   [Microsoft Teams developer documentation](https://learn.microsoft.com/en-us/microsoftteams/platform/)
    -   [Cards and task modules - Teams | Microsoft Docs](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards-and-task-modules)
    -   [Format cards in Microsoft Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cconnector-html#mention-support-within-adaptive-cards-v12)