Teams bot framework - composeExtensions does not display buttons on adaptive card - botframework

Two compose extension commands are defined in the manifest. These trigger a request to bot framework, which responds with an adaptive card.
When the adaptive card is displayed, it's rendered correctly except the button is missing. If I send the exact same adaptive card as a chat activity, it displays correctly.
handleTeamsMessagingExtensionFetchTask Code
// enableInboundCard = below json
const card = this.renderAdaptiveCard(enableInboundCard, { channel })
return {
task: {
type: 'continue',
value: {
card,
height: 500,
title: 'Enable Inbound',
width: 600
}
}
};
Command (in manifest).
{
"id": "enableInbound",
"context": [
"compose"
],
"description": "Enable inbound SMS to channel",
"title": "Enable Inbound",
"type": "action",
"fetchTask": true,
"parameters": [
{
"name": "test",
"title": "test",
"inputType": "text",
"value": "test"
}
]
}
Adaptive Card
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"wrap": true,
"style": "heading",
"text": "Enable Inbound SMS"
},
{
"type": "TextBlock",
"text": "A wholeeeeeeee bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch bunch of txt",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Current Channel",
"value": "${channel}"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "Enable Inbound SMS",
"verb": "enable_inbound",
"fallback": "Action.Submit"
}
]
}
]
}

Related

Incoming Webhook for Microsoft Teams - Add to Planner (Task) Tab

Is there any way to create a new task within a Planner (Task) tab within a channel by using webhooks?
Either directly or having a button on the incoming message that then creates the task once the end user presses it?
I'm new to webhooks but having a look on Google, Power Automate is a way of doing it but not sure we have access to that.
I think I went down the wrong rabbit hole of task modules as I want to use what's already configured within the Planner tab and not create something bespoke. The button also doesn't work, comes up with an error message saying "This card action is disabled because it is not supported for Connectors". But this is what I have at the moment:
{
"type":"message",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.adaptive",
"contentUrl":null,
"content":{
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
"type":"AdaptiveCard",
"version":"1.2",
"body":[
{
"type": "Container",
"id": "066de76b-17da-e6f7-8ab3-81d36d8a6162",
"padding": "None",
"items": [
{
"type": "FactSet",
"id": "10eebecd-851c-2080-24f4-9b6044821d90",
"facts": [
{
"title": "**ID**",
"value": "EXAMPLE ID"
},
{
"title": "**Name**",
"value": "EXAMPLE NAME"
}
]
}
]
},
{
"type": "Container",
"id": "879303cd-81de-618a-8e99-e66be9f22ac1",
"padding": "None",
"items": [
{
"type": "TextBlock",
"id": "0833d313-657b-b587-d4d3-f4a961e6434a",
"text": "EXAMPLE ERROR MESSAGE.",
"wrap": true
},
{
"type": "Container",
"id": "de1d9a46-b8d4-443a-5afc-8843c445cf7b",
"padding": "None",
"items": [
{
"type": "ActionSet",
"id": "3b0c8763-dba8-3d88-98f5-7189ced1fe60",
"actions": [
{
"type": "Action.Submit",
"id": "btnCreateTask",
"title": "Create Task",
"card": {
"type": "AdaptiveCard",
"padding": "None",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
]
}
]
}
]
}
}
]
}
Thanks in advance for any help/suggestions

Azure Logic App Post adaptive card and wait for response

I'm trying to grab the input text from a Teams Adaptive Card and use that in my logic app. Currently the response is not recorded in the logic app.
Any help would be appreciated!
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"actions": [
{
"id": "Yes",
"title": "Create Ticket",
"type": "Action.Submit"
},
{
"style": "positive",
"title": "View in SentinelOne Portal",
"type": "Action.OpenUrl",
"url": "#{replace(outputs('URL'), '[', '')}"
}
],
"body": [
{
"size": "Large",
"text": "#{triggerBody()?['subject']}",
"type": "TextBlock",
"wrap": true
},
{
"items": [
{
"text": "#{outputs('Compose_9')}",
"type": "TextBlock",
"wrap": true
}
],
"type": "Container"
},
{
"type": "TextBlock",
"text": "Ticket Info",
"wrap": true
}
],
"msteams": {
"width": "Full"
},
"type": "AdaptiveCard",
"version": "1.5",
"verticalContentAlignment": "Top"
}
Thanks,
Jeremy
Managed to resolve this myself, the output of 'Post adaptive card and wait for response' doesn't give any output options so you have to format it yourself
Parse json, enter input in the expression field: #Outputs('adaptivecardname')?[body]
There are two similar actions to send an Adaptive Card in Power Automated - "Post adaptive card in a chat or a channel" and also "Post adaptive card and wait for a response". You need to use the 2nd one if you expect a response from the card.

How to display images in imageset dynamically from an array object in adaptiev cards?

I have an array object like this:
{
"Items":[
{
"ShortName":"Product short name",
"Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg",
"ManufacturerName":"MMM",
"CatalogName":"cats"
},
{
"ShortName":"Product2 short name",
"Image":"https://www.andrew.cmu.edu/user/cfperron/cats/images/cat7.jpg",
"ManufacturerName":"SSS",
"CatalogName":"Dogs"
}
]
}
how to get Images in ImageSet dynamically in adaptive cards? I was able to get rest of the values in FactSet. But stuck with images.
Ok I figured it out.
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Search Results"
},
{
"type": "Container",
"items": [
{
"type": "ImageSet",
"imageSize": "medium",
"images": [
{
"type": "Image",
"url": "${Image}",
"size": "Medium"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "Short Name",
"value": "${ShortName}"
},
{
"title": "Supplier Name",
"value": "${SupplierName} "
},
{
"title": "Price ",
"value": "${PriceAmount} "
}
]
}
],
"$data": "${$root['Items']}"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
But next issue I am facing is if image url is empty, it throws an error "Adaptive Card Rendered error:
{
"message": "Cannot read property 'style' of null"
}"
How can we give a null check inside adaptive card for Image property?

How to display adaptive card selected option as if the user typed it in?

By default when we use adaptive cards in a waterfall dialog, the bot records the selected action and process the next waterfall step -
how it actually looks
Instead can we display the selected option in the adaptive card as if the user typed in the option like -
What I want it to look like
I have a requirement where we want to display it as if the user typed it in and not like the bot says "you selectd X option".
You can do this by using the 'data' property in your Adaptive Card.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"spacing": "medium",
"size": "small",
"weight": "bolder",
"text": "",
"wrap": true,
"maxLines": 0
},
{
"type": "Container"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Policy",
"data": "Policy"
},
{
"type": "Action.Submit",
"title": "Scheduled",
"data": "Scheduled"
}
]
}

MS Bot framework: Let user post multiple data

I´m trying to find a way to let a user retrieve, edit and post multiple data in a table. Like this:
A user asks for some entity, for e.g. Person
The MS bot returns a table with all the attributes for that Person (for ex: age, name, address etc)
The user can edit the data directly in the table, press send and the data
stored in the DB.
Is there any support for this? Any guidance is appreciated.
You can use Adaptive Cards to provide the user with a 'Form' to fill out. Not all channels support Adaptive Cards, but the list of supported channels is growing. For more information, please see: https://adaptivecards.io/ and howto: send-an-adaptive-card
Here is an example from MS Teams:
The card can be created using the Adaptive Cards library, or loaded from .json file like this:
string cardPath = Path.Combine(_hostingEnvironment.WebRootPath, "testcard.json");
string cardText = File.ReadAllText(cardPath);
var card = AdaptiveCards.AdaptiveCard.FromJson(cardText);
var reply = turnContext.Activity.CreateReply("card");
reply.Attachments.Add(new Attachment()
{
Content = card.Card,
ContentType = AdaptiveCards.AdaptiveCard.ContentType
});
await turnContext.SendActivityAsync(reply);
Note: when the user submits the card, the activity.Value will contain a .json string of values:
Example Card .json:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Tell us about yourself...",
"weight": "bolder",
"size": "large"
},
{
"type": "TextBlock",
"text": "We just need a few more details to get you booked for the trip of a lifetime!",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "Don't worry, we'll never share or sell your information.",
"isSubtle": true,
"wrap": true,
"size": "small"
},
{
"type": "TextBlock",
"text": "Your name",
"wrap": true
},
{
"type": "Input.Text",
"id": "firstlast",
"placeholder": "Last, First",
"style": "text",
"separataion": "none"
},
{
"type": "TextBlock",
"text": "Your email",
"wrap": true
},
{
"type": "Input.Text",
"id": "email",
"placeholder": "youremail#example.com",
"style": "email",
"separataion": "none"
},
{
"type": "TextBlock",
"text": "Phone Number"
},
{
"type": "Input.Text",
"id": "phone",
"placeholder": "xxx.xxx.xxxx",
"style": "tel"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send",
"data": { "personalInfo": "" }
}
]
}

Resources