I'm new to bot framework and learning. Here I'm looking for a solution I'm facing in Adaptive card that I using for my chatbot. I learn that we can design that adaptive card as per our need using adaptivecards.io/designer where we get the card as json code.
so here is my json code for adaptive card
{
"type": "AdaptiveCard",
"$schema":
"http://adaptivecards.io/schemas/adaptivecard.json",
"version": "1.2",
"msTeams": {
"width": "full"
},
"body": [
{
"type": "TextBlock",
"text": "Adaptive Card Example",
"wrap": true,
"size": "large",
"weight": "bolder",
"id": "title"
},
{
"type": "Input.Text",
"placeholder": "Provide your thoughts",
"separator": true,
"isMultiline": true,
"id": "thoughts"
},
{
"type": "ActionSet",
"separator": true,
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"style": "positive",
"id": "submit"
}
]
}
]
}
so when I run my bot and see the output in emulator, I can see the adaptive card
adaptive card
when i give the input and click the submit button it showing the error as System.NullReferenceException Object reference not set to an instance of an object.
Please explain in detail to resolve this
I used the same Adaptive card & worked fine
Read value from the adaptive card use the value property ${turn.activity.value}
Related
I want to mention a user in Input.Text field of Adaptive Card. Whenever we type "#" in Input.Text, I want a list of all the members of channel to appear like in a normal mention. Is this possible?
Currently the mention feature is not working.
Code of my Adaptive Card -
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"speak": "Your meeting about \"Adaptive Card design session\" is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pmDo you want to snooze or do you want to send a late notification to the attendees?",
"body": [
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Please Enter Your Comment"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Comment",
"data": {
"x": "comment"
}
}
]
}
The card looks like this:
Thank you for the help.
This is not possible in Teams. To make a feature request, please contact Teams support directly. You can do this through the Teams app or by posting an issue in the Teams docs repo: https://github.com/MicrosoftDocs/msteams-docs/issues
I have a chatbot that sends an adaptive card asking a question that looks like this.
Adaptive Card
When an option is pressed, I want to be able to use the data from this card inside of my code.
The JSON file for my card is this:
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"speak": "Somone is trying to take your session.",
"body": [
{
"type": "TextBlock",
"text": "Someone is taking your session!"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Allow",
"data": {
"Value": "allow"
}
},
{
"type": "Action.Submit",
"title": "Deny",
"data": {
"Value": "deny"
}
}
]
}
I know the bot is receiving something from the card as the event OnMessageActivityAsync is being raised. When I use this bot in the bot framework emulator, it shows here that it IS returning a value.
JSON Response
How can I use this data in my program for a task such as deciding whether the session can be taken in C#?
I solved It by using
var val = turnContext.Activity.Value;
string value = Convert.ToString(val);
return value;
I was using strings and because of the conversion issue I could not find how to access this. By switching it to var solved the issue.
In Microsoft Teams for Windows the Adaptive Cards look like this:
And in Microsoft Teams for Android the same Adaptive Cards look this way:
I'm using LG-files (Microsoft Language Generation files) and Microsoft.Bot.Builder.Dialogs.
Is there a solution to prevent that adaptive cards were being cropped in Microsoft Teams for Android?
Here is the code of the first part:
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Ja, einverstanden.",
"data": {
"msteams": {
"type": "messageBack",
"text": "Ja, einverstanden.",
"displayText": "Ja, einverstanden."
}
}
}
]
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Nein",
"data": {
"msteams": {
"type": "messageBack",
"text": "Nein",
"displayText": "Nein"
}
}
}
]
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Weitere Infos",
"data": {
"msteams": {
"type": "messageBack",
"text": "Weitere Infos",
"displayText": "Weitere Infos"
}
}
}
]
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Thank you Tim Cadenbach. Your example looks like this on Android:
This means that only the first button was displayed and it was cropped.
On Windows, it Looks like this:
The first and second buttons have been cropped.
All buttons are located one above the other and not side by side.
I considered adding a case distinction and programming other adaptive cards for mobile devices. How can I find out what device it is? With channels from Microsoft.Bot.Connector I can find out that the channel is MS Teams. But how the device?
This is the default behaviour of Mobile adaptive card actions. Adaptive card renders the buttons according to the width of the screens and provides you a scroll bar below to scroll through the buttons.
Updated Answer:
This is a known issue in the MS Teams Mobile App already raised with the team here:
https://github.com/microsoft/AdaptiveCards/issues/3919
Someone is working on it and it should be solved in the next month.
I have a bot made using framework v4 in c#. I want that my bot take user feedback once the bot goes idle, or in the case user doesn't responded to bot.I have made my card but not getting any logic to implement above mention feature in my bot. I am also attaching the code of card i made. Also the image of my card.
Can any look into it and help me out with this implementation.
enter image description here
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "awful"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Awful"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "bad"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Bad"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "normal"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "normal"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "good"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Good"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "terrific"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Terrific"
}
],
"width": "stretch"
}
]
},
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Add a comment",
"isMultiline": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions":
[
{
"type": "Action.Submit",
"title": "OK",
// "data": "ok"
}
]}
There isn't a built-in way to do this, nor is there a "standard" suggestion. However, we typically recommend:
On each message, start an asynchronous timer. You can do this in the bot, but it would be better to do outside of the bot, like with Azure Functions or something. The rest of this answer will assume the timer is outside of the bot. Ensure the timer also keeps track of the conversationReference related to the timer.
Restart the timer each time the user matching that conversationReference sends a message
Once the timer expires, send an event to the bot with the user and conversation information (maybe through ChannelData), letting the bot know the timer has expired. You could also create a separate endpoint and monitor there, so you don't need the activity scheme; instead of /api/messages, you could use something like /api/expiredTimers.
Once the expired timer event is received, send a proactive message to the user to either 1) see if they're still there, or 2) end the conversation.
You could utilize the code that ShowTypingMiddleware uses. Upon receiving a message activity, it then sets a timer, when the timer is triggered, execute your pro-active activity.
I just implemented this for a "are you still there?" functionality. Pretty straightforward.
Just have to modify the SendTypingAsync to execute whatever activity you want to send to the user at that time.
I'm trying to create a water fall model with the help of Adaptive cards in C# version 4.0.
My scenario is like following:
On loading bot following cards will be shown:
1. SharePoint
2. Azure
3. O365
Once I click on any of them then new set of cards will be shown like:
On selecting "SharePoint" following cards will be shown:
1. Create a Site
2. Create a sub site.
and on selecting any of the above choices a form is called with set of questions like:
1. what is site title
2. site owner
and so on..
UI as shown below:
I tried creating the structure on https://adaptivecards.io/, but couldnt find any relevant code related to this type of scenario.
If any one has done it before please share the documentation or code snippet.
Thanks
Here's a basic card with Input.ChoiceSet:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "Input.ChoiceSet",
"id": "first",
"placeholder": "Placeholder text",
"choices": [
{
"title": "SharePoint",
"value": "SharePoint"
},
{
"title": "Azure",
"value": "Azure"
},
{
"title": "O365",
"value": "O365"
}
],
"style": "expanded"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Then, in your bot, follow these answers for dealing with User Input:
Using Adaptive Cards in Waterfall Dialogs
(optional) Dynamically Changing The Card Before Sending
Basically, you'll want to:
Send the card
Capture the card's input by sending a blank text prompt right after sending the card (as explained in the first link)
Use if or switch statements in the next step to determine which card to display next based off of the user's input. You could optionally create the card more dynamically using the second link
The AdaptiveCards Designer is pretty good, but it lacks the ability to set the actions property. You can do so manually, by adding (like I did above):
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
Using Images
If you'd like to use images instead of a ChoiceSet, you can do something like this:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "Image",
"id": "choice1",
"selectAction": {
"type": "Action.Submit",
"title": "choice1",
"data": {
"choice": 1
}
},
"url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
"altText": ""
},
{
"type": "Image",
"id": "choice2",
"selectAction": {
"type": "Action.Submit",
"title": "choice2",
"data": {
"choice": 2
}
},
"url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
"altText": ""
},
{
"type": "Image",
"id": "choice3",
"selectAction": {
"type": "Action.Submit",
"title": "choice3",
"data": {
"choice": 3
}
},
"url": "https://acuvate.com/wp-content/uploads/2017/02/Microsoft-Botframework.fw_-thegem-person.png",
"altText": ""
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
The important part is making sure that the Action.Submit:
Is on the image
Has data that you would use to capture which choice the user selected