AdaptiveCardsJson - Click to call option without opening new URL - json

I've got a Json AdaptiveCard that presents information on employees in the business with their name, job title, phone number, email etc..
We've set it up to dial their telephone number on a click to call, but clicking the number opens up a new URL which we don't want. We want it as a background action.
How can we achieve this? Here's our code (Look at the section that has FaceSet, then a Telephone value, it's that value that creates the click to call:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Call",
"url": "dial:{{Phone}}"
}
],
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "http://intranet.christiegroup.com/stafflisting/staff/{{Reference}}.jpg",
"size": "medium",
"style": "people"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "{{FullName}}",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "{{JobTitle}}",
"isSubtle": true,
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Telephone:",
"value": "[{{Phone}}](dial:{{Phone}})"
},
{
"title": "Mobile:",
"value": "{{Mobile}}"
},
{
"title": "Email:",
"value": "{{Email}}"
}
]
}
]
}
]
}
]
}

Related

Adaptive Cards ColumnSets with 2 Input.Text can't set the input to the "id"

I've been working on a chatbot and i'm using the Microsoft Adaptive Cards for my bot ui.
Currently i am im trying to create a a row that contains 2 textblocks and 2 input.text.
But when entering a value into these input.text they don't seem to set the value to the given id.
This does work however when the input.text are not in a coulmn set but instead are stacked on top of each other.I think its the Azure BotService not handling the JSON right.
I've tried using diffrent channels. Web-Chat, Teams-Chat. It does work on the adaptive card designer but not with any other service. Anyone else got this problem?
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputOne",
"placeholder": "Placeholder text"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true
},
{
"type": "Input.Text",
"id": "inputTwo",
"placeholder": "Placeholder text"
}
]
}
]
}
]
}
I tried to reproduce the issue and the pattern which was mentioned in the code block is having some blockage due to some input fields calling structure problem. Try to check the below code block for sample and replace with the current requirements.
Data JSON:
{
"title": "Tell us about yourself",
"body": "We just need a few more details to get you booked for the trip of a lifetime!",
"disclaimer": "Don't worry, we'll never share or sell your information.",
"properties": [
{
"id": "myName",
"label": "Your name (Last, First)",
"validation": "^[A-Z][a-z]+, [A-Z][a-z]+$",
"error": "Please enter your name in the specified format"
},
{
"id": "myEmail",
"label": "Your email",
"validation": "^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
"error": "Please enter a valid email address"
},
{
"id": "myTel",
"label": "Phone Number (xxx-xxx-xxxx)",
"validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
"error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers"
}
],
"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
"thumbnailAlt": "Diver in the Great Barrier Reef"
}
Template JSON:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "${title}",
"weight": "bolder",
"size": "medium",
"style": "heading"
},
{
"type": "TextBlock",
"text": "${body}",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "${disclaimer}",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "Container",
"$data": "${properties}",
"items": [
{
"type": "Input.Text",
"label": "${label}",
"id": "${id}",
"regex": "${validation}",
"errorMessage": "${error}",
"isRequired": true
}
]
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "Image",
"url": "${thumbnailUrl}",
"altText": "${thumbnailAlt}",
"size": "auto"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
The result adaptive card looks like below screen as the sample.

Action.ShowCard inheriting width from ColumnSet in which it is called

I have created a MS Teams adaptive card below:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Account Ownership Change Request",
"wrap": true,
"id": "lblHeader",
"size": "Large",
"weight": "Bolder",
"color": "Default"
},
{
"type": "TextBlock",
"text": "Company",
"wrap": true,
"id": "lblCompany",
"separator": true,
"size": "Medium",
"color": "Accent",
"weight": "Bolder",
"horizontalAlignment": "Center"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Current Owner:",
"wrap": true,
"id": "lblCurrentOwner",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "New Owner:",
"wrap": true,
"weight": "Bolder",
"id": "lblNewOwner"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "X",
"wrap": true,
"id": "txtCurrentOwner"
},
{
"type": "TextBlock",
"text": "Y",
"wrap": true,
"id": "txtNewOwner"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Please action using the below buttons.",
"wrap": true,
"spacing": "Large",
"id": "lblActions",
"color": "Default"
},
{
"type": "TextBlock",
"text": "Comments",
"wrap": true,
"id": "lblComments",
"size": "Small",
"color": "Default",
"spacing": "Large"
},
{
"type": "Input.Text",
"placeholder": "Add your comments here",
"id": "txtComments",
"isMultiline": true,
"spacing": "Small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"spacing": "None",
"actions": [
{
"type": "Action.ShowCard",
"title": "Reassign",
"id": "btnReassign",
"card": {
"type": "AdaptiveCard",
"width": "Full",
"body": [
{
"type": "Input.ChoiceSet",
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"id": "ddlEmployeePicker",
"placeholder": "Type an employee name",
"label": "Assign to:",
"isRequired": true,
"spacing": "Medium",
"errorMessage": "Please provide an employee to reassign"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Assign",
"style": "positive",
"id": "btnAssign"
}
],
"spacing": "Small",
"id": "asAssign"
}
]
}
}
]
}
],
"width": "auto",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"spacing": "ExtraLarge"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Reject",
"id": "btnReject",
"style": "destructive"
}
]
}
],
"spacing": "Small",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"id": "btnApprove"
}
]
}
],
"spacing": "Small",
"horizontalAlignment": "Center",
"width": "auto"
}
]
}
]
}
Which looks like this:
Once the Reassign button is clicked:
The issue is that once expanded the action buttons are squished and the dropdown list is displayed within the Reassign column. Is it possible to display the DDL outside and below the Reassign column so that it can be the full width of the adaptive card?
Could you please refer below json which uses factset having Action.ShowCard:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"size": "small",
"style": "person",
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Date",
"id": "dueDate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Set due date2",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Date",
"id": "dueDate2"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK2"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
}
]
}

Set Adaptive Card to Currency With Parameter From Apply to Each?

In the image above it changes the adaptive card to Currency. How can I add this with a parameter from somewhere else? I am trying to do this but it is not working.
"value": "${formatNumber(#{items('Apply_to_each')?['Cost Each']}, 2)}"
How can I get this code to show as currency? It seems to be that when I use "#{items" it will not work. Any suggestions?
Here is the adaptive card. I am looping through Excel data and want to put the Parameters I received from Excel into an Adaptive Card and use the $$ Format.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "**PART APPROVAL**"
}
],
"width": "stretch"
}
]
}
],
"bleed": true
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"text": "New Part Approval",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"spacing": "Large",
"facts": [
{
"title": "Part #:",
"value": "**#{items('Apply_to_each')?['Part Number']}**"
},
{
"title": "Description:",
"value": "#{items('Apply_to_each')?['Description']}"
},
{
"title": "Quantity:",
"value": "#{items('Apply_to_each')?['AOQ']}"
},
{
"title": "Cost Each:",
"value": "#{items('Apply_to_each')?['Cost Each']}"
},
{
"title": "Sell Each:",
"value": "#{items('Apply_to_each')?['Sell Each']}"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Approve",
"style": "positive",
"data": {
"id": "_qkQW8dJlUeLVi7ZMEzYVw",
"action": "approve"
},
"id": "ApproveID"
},
{
"type": "Action.ShowCard",
"title": "Reject",
"style": "destructive",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "RejectCommentID",
"placeholder": "Please specify an appropriate reason for rejection.",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": {
"id": "_qkQ8dJlUeMVi7ZMEzYVf",
"action": "reject"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"id": "RejectID"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
sorry for that.
Just asked a colleague and the new Adaptive Expressions, the one you're using there to format currencies are actually not working on Power Automate yet.
Power Automate is not updated to the latest Adaptive Cards version so some of the things you can do with cards are not available in flows yet.
Tim

In Adaptive Cards, how to create table using data binding to template?

The documentation on using template say that we can bind array data to iterate over a template, I am trying to use it to create a table, but I am not sure how to set this up.
Here is my data, it have 2 rows of data:
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
Here is template, which is just a simple table, notice the {id}, {name}, and {description} data binding language.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"text": "ID"
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"size": "Medium",
"text": "Name"
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Description",
"horizontalAlignment": "Left",
"size": "Medium"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{ID}",
"wrap": true
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"text": "{Name}",
"wrap": true
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "{Description}"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
How can I bind this to create table?
You're not that far off.
Notice that the binding syntax changed in May 2020 from {name} to ${name} https://learn.microsoft.com/en-us/adaptive-cards/templating/
To make it work, give youre data a name, i.e:
{
"properties" :
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
}
and add a simple "$data": "${properties}", into you column-items like this:
...
"columns": [
{
"type": "Column",
"items": [
{
"$data": "${properties}",
"type": "TextBlock",
"size": "Medium",
"text": "${ID}"
}
],
"width": "30px"
},
{
...
But be aware, you're not creating a nice looking table, you don't have connected rows to aline the cells.
All you do is: draw 3 seperated columns next to each other. Adding more lines it will make it look like this:

Adaptive cards are converted to image in Facebook Messenger

I tried following example card picked up from Microsoft's website adaptivecards.io
var msg = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
speak: "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
            "body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate",
"title": "Select due date"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "http://adaptivecards.io"
}
]
}
});
session.send("This is an adaptive card");
session.send(msg);
to see how it appears in Facebook and WebChat.
In WebChat emulator it renderes fine with options to interact with choices.
However, same thing renders as an image in Facebook Messenger, with one separate messsage to view options, which redirects to the website.
Should we assume that adaptive cards will not work on Facebook messenger? Or am I missing something basic here.
Unless Messenger natively supports adaptive cards, the best we can do is render to an image and attempt to map Actions to Messenger buttons. For example, an Action.OpenUrl should render as a button on Messenger. But more advanced scenarios, like input fields, etc, will get dropped as there is no way to express those as Messenger templates today.
This documentation lists the channels and their current support:
https://learn.microsoft.com/en-us/adaptive-cards/get-started/bots#channel-status