調適型卡片範本服務

調適型卡片範本服務是一種概念證明服務,可讓任何人尋找、參與及共用一組已知的範本。

如果您想要顯示某些資料,但不想為它撰寫自訂調適型卡片,這非常有用。

請參閱此內容以取得調適型卡片範本化概觀

重要

條款與合約

此 Alpha 層級 服務會以「原狀」提供,且所有錯誤都不受支援。 來自服務的任何資料收集都受限於 Microsoft 隱私權聲明。

這些功能目前為預覽版且隨時可能變更。 您的意見反應不僅歡迎使用,也請務必確保我們提供 您需要 的功能。

服務如何協助我?

假設我剛得到一段資料,可能是財務資料、Microsoft Graph資料、schema.org 資料,或來自我的組織內的自訂資料。

現在我想要向使用者顯示資料。

傳統上,這表示在提供給使用者的所有前端堆疊中撰寫自訂 UI 程式碼。

但是,如果我的應用程式根據資料類型來「學習」新的 UI 範本,該怎麼辦? 一個世界,任何人都可以參與、增強及共用通用 UI 範本、在其自己的專案內、組織內或整個網際網路。

什麼是卡片範本服務?

卡片範本服務是簡單的 REST 端點,可協助:

  • 藉由分析資料的結構來尋找範本
  • 取得 範本,讓您可以將它直接系結在用戶端上, 而不需要將資料傳送到伺服器或離開裝置
  • 當 用戶端資料系結不適合或可能時,填入伺服器上的範本

全部都後方為:

  • GitHub支援的共用開放原始碼範本存放庫。 (存放庫目前為私人,但在我們系結一些鬆散的結尾時,將會立即公開)
  • 所有範本都是存放庫中的一般 JSON 檔案,可讓編輯、參與和共用開發人員工作流程的自然部分。
  • 服務的程式碼將可供使用,因此您可以在最合理的地方裝載。

使用服務

取得所有範本

此端點會傳回所有已知範本的清單。

HTTP GET https://templates.adaptivecards.io/list

回應摘錄

{
  "graph.microsoft.com": {
    "templates": [
      {
        "file": "Files.json",
        "fullPath": "graph.microsoft.com/Files.json"
      },
      {
        "file": "Profile.json",
        "fullPath": "graph.microsoft.com/Profile.json"
      }
   ]
}

尋找範本

此端點會藉由分析資料的結構來嘗試尋找範本。

HTTP POST https://templates.adaptivecards.io/find

範例

假設我存取Microsoft Graph端點,以取得我的相關組織資料。

HTTP GET https://graph.microsoft.com/v1.0/me/

Graph Explorer screenshot

該 API 傳回 JSON 資料,但如何使用調適型卡片向使用者 顯示它 ?

首先,我想要查看此資料類型的範本是否存在,因此我向 /find 端點提出 HTTP 要求,並在 中 POST body 輸入資料。

HTTP POST https://templates.adaptivecards.io/find

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

回應:

[
  {
    "templateUrl": "graph.microsoft.com/Profile.json",
    "confidence": 1
  }
]

此服務會傳回任何相符範本的清單,以及 confidence 指出相符專案有多接近的 。 現在可以使用該範本 URL 來 取得 範本,或 將其填 入伺服器端。

取得範本

從這個端點擷取的範本可以使用範本 化 SDK填入執行時間的資料。

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]

您也可以在範本中包含「範例資料」,讓設計工具中的編輯變得更易記:

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]?sampleData=true

範例

讓我們取得從上述傳 /find 回的 Microsoft Graph設定檔範本。

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

回應摘錄

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "{name}"
    },
    {
        // ...snip
    }
  ]
}

現在,使用此範本搭配範本 化 SDK 來建立現成轉譯調適型卡片。

填入範本伺服器端

在某些情況下,在用戶端上填入範本可能不合理。 針對這些使用案例,您可以讓服務傳回完整填入的調適型卡片,並準備好傳遞至任何調適型卡片轉譯器。

HTTP POST https://templates.adaptivecards.io/[TEMPLATE-PATH]

範例

讓我們填入從上述資料傳 /find 回的 Microsoft Graph設定檔範本。

HTTP POST https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

回應摘錄

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Megan Bowen"
    },
    {
        // ...snip
    }
  ]
}

請注意回應如何將第一個 TextBlock"Megan Bowen" 的文字取代為 ,而不是 "{name}" 在要求中 GET 。 此 AdaptiveCard 現在可以傳遞至任何調適型卡片轉譯器,而不需經過用戶端範本化。

參與範本

範本裝載于adaptivecards-templates存放庫中的GitHub上。

我們希望使用 GitHub 作為範本的備份存放區,我們可以「大眾化」撰寫、增強及共用範本的程式。 任何人都可以提交包含全新範本的提取要求,或對現有範本進行增強功能...全都在GitHub的開發人員易記體驗內。

自我裝載服務

並非所有資料類型都適用于裝載于 https://templates.adaptivecards.io 的「中央」調適型卡片範本服務。

我們想要確定任何人都可以在組織中裝載範本服務,因此原始程式碼可在GitHub上使用,而且可以輕鬆地部署到您自己的 Azure 函式。

➡ 在這裡開始adaptivecards-templates