microsoft/adaptivecards-templates

A collection of Adaptive Card templates for well-known data models

Adaptive Cards Template Service

The Adaptive Cards Template Service is a proof-of-concept service that allows anyone to find, contribute to, and share a broad set card templates. Templates are great if you want to display some data but want to save time by not having to write a custom adaptive card for it.

To learn more about Adaptive Cards visit https://adaptivecards.io

Check this our for an overview of Adaptive Card Templating

Terms and agreement

This preview service is provided "as-is", with all faults and is not supported in any way. The service does not store or collect any data beyond the default Azure Function collection. Any data collection from the service is subject to the Microsoft privacy statement.

These features are in preview and subject to change. Your feedback is not only welcome, but critical to ensure we deliver the features you need.

How does the service help me?

Let's say I just got a piece of data, maybe it's financial data, Microsoft Graph data, schema.org data, or custom data from within my organization.

Now I want to display the data to a user.

Traditionally that means writing custom UI code in all of the front-end stacks that I deliver to end-users.

But what if there were a world where my app could "learn" new UI templates based on the type of data? A world where anyone could contribute, enhance, and share common UI templates, within their own projects, within an organization, or for the entire internet.

What is the card template service?

The card template service is a simple REST endpoint that helps:

• Find a template by analyzing the structure of your data
• Get a template so you can bind it directly on the client, without sending your data to the server or ever leaving the device
• Populate a template on the server, when client-side data binding isn't appropriate or possible

Behind it all, is:

• A shared, open-source template repository backed by GitHub. (The repo is currently private but will be made public as soon as we tie up some loose ends)
• All the templates are flat JSON files in the repo, which makes editing, contributing, and sharing a natural part of a developer workflow.
• The code for the service will be made available so you can host wherever makes the most sense to you.

Using the service

Get all templates

This endpoint returns a list of all known templates.

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

Response excerpt

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

Find a template

You can find templates one of two ways.

The first is by POSTing your data to the endpoint, which will analyze the structure of your data and see if any templates can be found.

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

The other option is by passing an odata.type via query string, for example:

HTTP GET https://templates.adaptivecards.io/find?odata.type=%23microsoft.graph.user

Example

Let's say I just hit a Microsoft Graph endpoint to get organizational data about me.

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

That API returned JSON data, but how do I display it to users using Adaptive Cards?

First I want to see if a template exists for this type of data, so I make an HTTP request to the /find endpoint with my data in the POST body.

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

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

Response:

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

The service returns a list of any matching templates, along with a confidence indicating how close the match is. Now I can use that template URL to get the template, or populate it server-side.

Get a template

A template retrieved from this endpoint can be populated with data at runtime using the templatng SDKs.

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

You can also include "sample data" with the template, which makes editing in the designer more friendly:

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

Example

Let's get the Microsoft Graph profile template that was returned from /find above.

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

Response excerpt

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

Now use this template with the templating SDKs to create a ready-to-render Adaptive Card.

Populate a template server-side

In some cases it may not make sense to populate a template on the client. For these use cases, you can have the service return a fully-populated Adaptive Card, ready to be passed to any Adaptive Card Renderer.

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

Example

Let's populate the Microsoft Graph profile template that was returned from /find using the data above.

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

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

Response excerpt

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

Notice how the response replaced the text of the first TextBlock with "Megan Bowen" instead of "{name}", as in the GET request. This AdaptiveCard can now be passed to any Adaptive Card renderer without going through client-side templating.

Contributing templates

All templates are stored in this repo, in the templates directory.

Our hope is that by using GitHub as a backing store for the templates, we can "democratize" the process of contributing and sharing templates. Anyone can submit a Pull Request that includes an entirely new template, or make enhancements to existing ones... all within the developer-friendly experience of GitHub.

Self-hosting the service

We realize that not all types of data are appropriate for the "central" Adaptive Cards template service hosted at https://templates.adaptivecards.io.

The source code for the service is authored as a Azure Function in TypeScript. You can take the code as-is and deploy it to your own Function.

Building templating service

Install Azure Functions Tools

On macOS, install using Homebrew

$ brew tap azure/functions
$ brew install azure-functions-core-tools

On Windows, install using npm.

$ npm install -g azure-functions-core-tools

On Linux, follow the instructions in the Azure Functions Core Tools GitHub repository.

Update local.settings.json to point to a Storage account

"AzureWebJobsStorage": "DefaultEndpointsProtocol=https;AccountName=XXXXXXX;AccountKey=XXXXXXXXXX",

The JSON template files get copied from the Git repo into Blob storage and the Function serves them from there.

Build and run

cd src
func extensions sync

Press F5 to run

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

adaptivecards-templates's Issues

[Adaptive Cards] ReactJS with lists of choices are always showing as radio buttons instead of drop down lists

Because of "adaptive-card-fabric" plugin there is issue (converting dropdowns into radio button)

THis is happening from past 2days...Before that I was able to see dropdown.
Below is the adaptive card JSON which I am using
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Please provide more information about the item you want to buy."
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "UNIT PRICE"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "CURRENCY"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"title": "New Input.Toggle",
"placeholder": "",
"id": "freetextUnitPrice"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"placeholder": "Placeholder text",
"id": "freetextServiceCurrency",
"choices": [
{
"title": "EUR",
"value": "EUR"
},
{
"title": "GBP",
"value": "GBP"
}
],
"value": "GBP"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "QUANTITY"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "UoM"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"title": "New Input.Toggle",
"placeholder": "",
"id": "freetextQuantity"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"placeholder": "Placeholder text",
"id": "freetextUom",
"choices": [
{
"title": "EA",
"value": "EA"
},
{
"title": "PC",
"value": "PC"
},
{
"title": "PCK",
"value": "PCK"
},
{
"title": "PU",
"value": "PU"
}
],
"value": "EA"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"selectAction": {
"type": "Action.Submit",
"title": "Edit",
"data": {
"value": "Edit",
"text": "Edit",
"popupData": {
"popupIdString": "DefaultSCDetailsFreetextParamsComponent",
"popupId": "e6308baf-80ca-4321-9e9c-cf76463464f0",
"uomForItemType": "product"
}
}
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"spacing": "None",
"height": "stretch",
"text": "Edit"
}
]
},
{
"type": "Column",
"width": "stretch",
"selectAction": {
"type": "Action.Submit",
"title": "Confirm",
"data": {
"value": "Confirm",
"text": "Confirm",
"newValidations": [
{
"freetextUnitPrice": {
"conditions": [
"required",
"number",
"positiveInteger",
"qtyPriceValidator"
],
"messages": [
"Unit price is required",
"Unit price must be a number",
"Unit price must be a positive value",
"Unit price can contain maximum of 9 digits along with 2 decimal points"
],
"fieldNameUom": [
"price"
]
},
"freetextQuantity": {
"conditions": [
"required",
"number",
"positiveInteger",
"qtyPriceValidator"
],
"messages": [
"Quantity is required",
"Quantity must be a number",
"Quantity must be a positive value",
"Quantity can contain maximum of 10 digits with no decimal points"
],
"fieldNameUom": [
"quantity"
]
}
}
]
}
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"spacing": "None",
"height": "stretch",
"text": "Confirm"
}
]
}
]
}
],
"separator": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"customClass": "freetextProductParamsCard"
}

Share preview page is making tons of HTTP requests per second

Activate browser debug tools and go to Network tab, then create a card, share it, and go to the share page.

E.g., https://adaptivecms.azurewebsites.net/preview/5ea1cdc1ed84bc004f792471/1.0

Observe that the page makes multiple HTTP requests per second

Support for Adaptive Card V1.5 in HealthBot

When can we expect support for Adaptive Card V1.5 in HealthBot as it is still stuck on V1.3?

After Using Adaptive Card Fabric Plugin - Radio buttons are displaying instead of dropdown

After removing this fabric plugin. I am able to see the drop down properly.

Please help me in resolving this issue

App registration details missing for private template services and error validating token

I have been trying to deploy the private service in the dev branch but hit quite a few blocks. The main ones are:

• It looks like there are more details needed on the app registration such as adding the API.
• There are some hard coded settings on the server passport config
• Validation of the token fails in the AzureAD code for the service.

I’m working through these as a PR that is currently in my fork but wanted to check that this is still the route ahead for the service. Really like how you have a private version though - hope that it’s still the plan!

Templates language is not supported in Teams

I have tried to use template language in my adaptive cards posted in Teams chat. However, my $data is simply being ignored and cannot be launched. I basically follow the expense report sample. The following is my adaptive card.
{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Large", "weight": "Bolder", "text": "Please confirm all your projects below" }, { "type": "TextBlock", "wrap": true, "text": "All info below are based on the records you have handed into the online New Project Setup Form and Network Access Request Form. If nothing shows up, please click \"More to submit\" button to transfer all your ongoing projects to the desired users.", "spacing": "Small" }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Project Folder Path", "wrap": true, "weight": "Bolder" } ] } ] } ], "bleed": true, "style": "emphasis" }, { "type": "Container", "items": [ { "type": "ColumnSet", "$data":"${AllAttendedProjects}", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "wrap": true, "id": "projectPaths", "text": "${PPath}" } ], "id": "ProjectFolderPath" }, { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "https://adaptivecards.io/content/down.png", "width": "20px", "id": "chevronDown${$index}" }, { "type": "Image", "spacing": "None", "isVisible": false, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "id": "chevronUp${$index}" } ], "spacing": "None", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent${$index}", "chevronDown${$index}", "chevronUp${$index}" ] } } ] }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Enter the email address who will continue on your this project", "wrap": true, "size": "Small", "weight": "Lighter" }, { "type": "Input.Text", "placeholder": "e.g. [email protected]", "id": "ProjectRecipient" } ], "isVisible": false, "id": "cardContent${$index}" } ] }, { "type": "ActionSet", "actions": [ { "type": "Action.OpenUrl", "title": "More to submit", "url": "https://macrostat365.sharepoint.com/sites/tgbm-all-IT/Lists/Work%20Transition%20Form/AllItems.aspx" }, { "type": "Action.Submit", "title": "Confirm" } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2" }

Here are my sample data:
{ "AllAttendeProjects":[ { "PPath": "\\\\mst13\\Training" }, { "PPath": "\\\\mst13\\Timesheet" }] }

Twitter Template

Trying to work with Power Automate since the Teams Twitter connector was retired.

Manually figuring out templates for the editor is a pain though, so was hoping to find a good Twitter template here that I could use for posting content via Power Automate.

Certificate is expired

Hello! The Graph Explorer team relies on the Adaptive Cards Template Service to display Graph entities as Adaptive Cards. Currently, the service seems to be down :

Is this still a valid service and the certificate should be renewed or we should stop relying on the service?

Thanks! @matthidinger If you can help identify the right person.

Finding templates currently seems to be broken

When sending a post to /find with sample data from the docs:

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

Services responds with Error 500.

GET always returns an empty array

Deploy issue

I got the following error when deploying the CMS

The template deployment '1b12de26-3045-40f1-b7e3-142fd7fdf8cd' is not valid according to the validation procedure. The tracking id is '684a1893-d5e9-4622-8082-2fa6f7b1ad78'. See inner errors for details.

Azure Deploy - Repository URL is invalid

Hi, currently, the deployment is not possible as this error occurs upon clicking the "Deploy to Azure" button:

Invalid repository URL

Is there anything that has changed here on your side which needs to be fixed?

thanks
Stephan

test

test