I want to add hyperlink to adaptive card. I am using markdown features of Text block for it. I have below adaptive card. I referred to the below link https://learn.microsoft.com/en-us/adaptive-cards/authoring-cards/text-features#:~:text=localizing%20the%20text.-,Markdown%20(Commonmark%20subset),of%20the%20Commonmark%20Markdown%20syntax.
{
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "This is some **bold** text"
},
{
"type": "TextBlock",
"text": "This is some _italic_ text"
},
{
"type": "TextBlock",
"text": "- Bullet \r- List \r",
"wrap": true
},
{
"type": "TextBlock",
"text": "1. Numbered\r2. List\r",
"wrap": true
},
{
"type": "TextBlock",
"text": "[Adaptiveards](https://adaptivecards.io)"
}
]
}
But in visualizer the hyperlink is not working. How to add a hyperlink to adaptive card?
may be the link is not proper try correcting your link also try using version 1.2 in adaptive cards
Related
I know in Microsoft's ActionableMessage, one can have ActionSet which is clickable and you can have it open an URL.
But designs I am working with calls for something like this:
| Some Text. [Icon] |
Is there a way I can define AdaptiveColumn/AdaptiveColumnSet clickable UI element, such that one can open url?
I have found a kind of "hackable" way, where I have created a background with just icon.
Then I set the text in a column and set text value as Some Text
That "kind-of" works but now user has to click on that text. Click on the entire element doesn't work!!
There are many elements you can make clickable, check this here as an example:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Clicking this opens google",
"size": "Medium",
"weight": "Bolder",
"id": "googleButton"
},
{
"type": "Image",
"id": "Image",
"url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK2nG24AYDm6FOEC7jIfgubO96GbRso2Xshu1f8abSYQ&s",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
},
{
"type": "Container",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
},
"items": [
{
"type": "TextBlock",
"text": "New TextBlock",
"wrap": true,
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
}
]
}
]}
Many elements such as container, image etc have the "selectAction" property where you can define an onClick action
I'm user adaptive card via React framework. I have an array of complex objects (customer.attributes). I want to filter the array's items and diplay the items that respect a condition ("isVisible": "${attributeCode == ##CC3##}"). This works fine, the adaptive card display only the items I want.
However, all the items that don't respect the condition create a empty div. These divs create blank spaces. How can I get rid of them ?
For information, I also tried to use the $when attribut with the same result
I tried to hard code "isVisible": false in the template. The empty divs are still here but have a "display: none" properties in their css. Therefore, they're not visible, and that's perfect. Why isn't it working with the condition ?
Thank you for your help,
Template :
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${customer.firstName} ${customer.lastName}",
"size": "Large"
},
{
"type": "Container",
"$data": "${customer.attributes}",
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"isSubtle": "true",
"text": "${attributeLabel}",
"isVisible": "${attributeCode == ##CC3##}"
},
{
"type": "TextBlock",
"isVisible": "${attributeCode == ##CC3##}",
"text": "${attributeValue.textValue}",
"weight": "Bolder"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Data:
{
"customer": {
"customerId": "id",
"firstName": "David",
"attributes": [
{
"attributeCode": "CC1",
"attributeType": "TEXT",
"attributeLabel": "Texte libre 1",
"attributeValue": "test1"
},
{
"attributeCode": "CC3",
"attributeType": "TEXT",
"attributeLabel": "Texte libre 3",
"attributeValue": "test3"
}
],
"loyaltyEligible": true,
"loyaltyAccounts": []
}
}
Result div :
I have the following old Adaptive card from a Playbook which I need to update to v1.5. But I stumble upon a problem with the choices which are dynamically generated from a logic app body. I have made the part of the code bold. There is a value that is not JSON proof so it should be required to convert it to JSON that way.
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')}, #THIS IS THE LINE THAT NEEDS TO BE CHANGED
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
Full Code:
{
"msTeams": {
"width": "full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"size": "large",
"color": "accent",
"text": "**Microsoft Sentinel Alert - **#{triggerBody()?['object']?['properties']?['incidentNumber']} - #{triggerBody()?['object']?['properties']?['title']}",
"wrap": true
},
{
"type": "TextBlock",
"text": "Please Select the playbooks to run for the incident:",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Available tagged Logic App playbooks",
"wrap": true,
"weight": "Bolder",
"color": "Accent"
},
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')},
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
Could someone help me converting only that part of the choices to v1.5 so I can properly generate the choices myself? Or do I need to make my card legacy supported and drop it back to v1.2? I really want to use the card designer so I can make it easier.
Thanks in advance.
I have an adaptive card like below.
I want to shown what ever the user inputs in the Input.Text field in the TextBlock (instead of name). Is this even possible?
Note: I am building this with Bot Framework Composer.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"id": "name"
},
{
"type": "TextBlock",
"text": "Your name is <name>",
"wrap": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
I want to change the color of an adaptive card output which comes from the database according to its value eg: if workhour < 6 = color of the adaptive card showing the work hours must be red. if it is greater than 6 hours the work hours must be displayed in green.
Any idea of how I must achieve this?
Below is a part of the JSON code along with data I call from the database.
Also, I will be implementing this on Microsoft Teams.
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Work Hours"
},
{
"$data": "${AttendanceMonthly}",
"type": "TextBlock",
"weight": "bolder",
"separator": true,
"text": "${WorkedHours}"
}
You can use if to set the color to attention or good.
See this example:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"$data": "${AttendanceMonthly}",
"type": "TextBlock",
"weight": "bolder",
"separator": true,
"color": "${if(WorkedHours < 6, 'attention', 'good')}",
"text": "Hours worked: ${WorkedHours}"
}]
Based on your Data this would make the text red for workedHours below 6. Have in mind that you can only set a color to "Attention", "Good" etc and not a color code directly.