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.
Related
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}
I want to capture of action performed on hyperlink on Microsoft bot adaptive card. Using selection action I can capture the action but it's applicable for whole sentence. However, I want it to capture if it's clicked on link only. Below is my JSON template.
{
"type": "AdaptiveCard",
"body": [{
"type": "Container",
"items": [{
"type": "ColumnSet",
"columns": [{
"type": "Column",
"items": [{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Test header",
"wrap": true
}],
"width": "stretch"
}]
},
{
"type": "ColumnSet",
"columns": [{
"type": "Column",
"items": [{
"type": "TextBlock",
"weight": "Bolder",
"text": "- first test [link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)",
"wrap": true
}],
"width": "stretch",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
}]
},
{
"type": "ColumnSet",
"columns": [{
"type": "Column",
"items": [{
"type": "TextBlock",
"weight": "Bolder",
"text": "- second test [link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)",
"wrap": true
}],
"width": "stretch"
}]
},
{
"type": "ColumnSet",
"columns": [{
"type": "Column",
"items": [{
"type": "TextBlock",
"weight": "Bolder",
"text": "- third test [link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)",
"wrap": true
}],
"width": "stretch"
}]
}
]
}],
"backgroundImage": {
"url": "#",
"fillMode": "RepeatVertically"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"id": "test"
}
Can you please guide me how can I achieve it?
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.
We have an issue with "Horizontal alignment" property in the following adaptive elements: AdaptiveColumn, AdaptiveTextBlock and AdaptiveImage. Setting this property to "Center" or "Right" causing major design issues(see the attached images).
Original:
"Right" alignment:
Here is the JSON:
{
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 15,
"items": []
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png",
"width": "30px",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Previous"
},
"horizontalAlignment": "Left"
},
{
"type": "Column",
"width": 40,
"items": [
{
"type": "Image",
"size": "Large",
"url": "https://aboutflowers.com/wp-content/uploads/2016/10/AboutFlowers_S600Alstroemera_SymphonyMorita_Esmeralda.jpg",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-10-512.png",
"width": "30px",
"horizontalAlignment": "Right",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Next"
}
},
{
"type": "Column",
"width": 15,
"items": []
}
]
}
]
},
{
"type": "TextBlock",
"text": "Image1",
"horizontalAlignment": "Center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
The same design works properly on Android and Desktop client.
Stack Overflow is not for bug reports. You can submit feedback through the Teams app itself or you can have a look at this feedback page: https://learn.microsoft.com/en-us/microsoftteams/platform/feedback
If you do submit feedback, feel free to link to this Stack Overflow post in order to provide the necessary information.
Until the bug is fixed, you will need to find some kind of workaround. Perhaps you can try the "center" alignment instead of left and right. If that doesn't work then you may have to not use any alignment. You may be interested to know that the schema mentions the possibility of image distortion when using the height property, so you might also try omitting width and height specifications: https://adaptivecards.io/explorer/Image.html
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