💡 在本文章你將學到：從語法切入並了解如何利用現成的範本進行改造

前言

在上一篇我們已經知道 Adaptive Card 的用途以及優勢了，接下來我們就來學怎麼使用它吧！我們會先從他的語法切入，帶各位認識如何利用現成的範本找到對的地方改造成自己想要的樣子

內文

通常我使用 Adaptive Card 都會先在他的 Designer 介面改造成我想要的樣子，我們會進入到如下畫面，你可以發現，Adaptive Card 是使用 json 語法，因此如果你想選擇 Adaptive Card 做為資料呈現，你需要考慮到所選步驟是否與 Json 語法相容

1. Card Element: 左側選單是可以讓你加入各種不同的物件，你可以依照個人需求增減，以符合你想像的樣子
2. Select host app: 你可以選擇你想 Adaptive Card 呈現的環境，以便預覽他在個別不同介面所呈現的樣子，這邊通常都不會更動，除非你想呈現在比較不一樣的地方，如 Email
3. 這個地方可以說是主工作區，所有更動後的樣子都會同時更新在這個畫面，你可以快速地得到當你變動某個地方時的整體畫面
4. Element Property: 這邊是能讓你針對各式物件的細節微調，也是當你有來自上游資訊要在 Adaptive Card 動態切換時的依循
5. Card Payload Editor: 當你確認好畫面、做好資訊動態轉換的準備後，你只要 Ctrl + C 就可以直接使用它了

列點摘要 by GenAI

• 學習目標:
  • 本文將介紹如何從語法切入，利用現成的範本進行改造，提升 Adaptive Card 的使用效果。
• 前言:
  • 在上一篇文章中了解了 Adaptive Card 的用途與優勢，這篇將深入學習如何使用它。
• 內文:
  • 使用 Adaptive Card 時，建議先在 Designer 介面進行設計，因為 Adaptive Card 使用 JSON 語法。
  1. Card Element: 左側選單可加入不同物件，根據需求增減。
  2. Select host app: 選擇呈現環境以預覽不同介面效果。
  3. 主工作區: 所有更動即時更新，方便查看整體畫面。
  4. Element Property: 微調物件細節，適應來自上游資訊的動態切換。
  5. Card Payload Editor: 確認設計後，可直接複製 JSON 語法以便使用。