I'm trying to build a flow that operates in Teams that does the following:
A user posts a new message to a channel
The flow reads the message and gathers some variables (userId, messageBody, etc.)
The flow bot posts an adaptive card to gather more information from the user.
I am able to insert variables from higher up in the flow into the adaptive card, but I'm having a hard time using them with "$when" conditions in the card. Here is the JSON:
{
"type": "AdaptiveCard",
"data": {
"postContainsLink": "#{variables('postContainsLink')}",
"testNum": "#{variables('testNum')}",
"otherTestNum": "100"
},
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "#{variables('messageBody')}",
"$when": "${postContainsLink == true}"
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "If you're seeing this text block, something went wrong. Bummer.",
"$when": "${testNum < 100}"
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "If you're seeing this text block, something else went wrong. Bummer.",
"$when": "${otherTestNum < 50}"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
None of the "$when" values are preventing any of these textblocks from appearing. But the first one is able to display the message body successfully.
How can I use variables to show or hide text blocks within the adaptive card?
could you please try this sample. It explains how to hide/show the text blocks.
Related
This is a continuation of my other question:
My first question
What I am trying to accomplish:
User enters a mention
My web service creates an adaptive card form with custom data (same schema)
presents the card to my user
user enters some data
Submit sends this form data to my web service for processing
Here is the card (the result of the 1st http) I am sending in reply to mention
$var = '{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.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"
}
]
}
]
}
';
How do i get to the value of input.text with the id of thoughts? everything i see, it ends up blank.
I am not sure what else you need to help, i can edit/post anything else.
*EDIT
this is my dynamic dropdown.
You should be able to make use of the dynamic content presented to you that is taken directly from your adaptive card definition ...
If the dynamic property doesn't exist, the easiest way to get the result is to simply refer to it using an expression ...
body('Post_adaptive_card_and_wait_for_a_response')?['data']?['thoughts']
... you could do the work to fully qualify the dynamic properties but in this case, it seems like overkill.
This is the output after I completed the card in my Teams channel ...
I have the following JSON code for an Adaptive Card. I put this into a "Compose" Data operation, and then used the "Post your own adaptive card as the Flow bot to a user" and it successfully works. However, using this REST API doesn't work when you want to wait for a response. So I tried to use "Post an Adaptive Card to a Teams user and wait for a response", but when I try to use the following JSON code below, it is giving me an error of... "[Validation] An Input.ChoiceSet must have at least one choice defined."
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Input.Text elements",
"horizontalAlignment": "Center",
"wrap": true
},
{
"type": "TextBlock",
"text": "Part #",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "choiceSelect",
"choices": #{variables('ArrayTest')}
},
{
"type": "TextBlock",
"text": "Due Date",
"wrap": true
},
{
"type": "Input.Date",
"id": "DateVal"
},
{
"type": "TextBlock",
"text": "Start time",
"wrap": true
},
{
"type": "Input.Time",
"id": "TimeVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
So after receiving this error, I tried to manipulate the code and I ended up changing the ChoiceSet to this
{
"type": "Input.ChoiceSet",
"id": "choiceSelect",
"choices": [
{
"title": "#{variables('ArrayTest')}",
"value": "#{variables('ArrayTest')}"
}
]
}
And I did not receive in a error in the Adaptive Card, but rather a Power Automate error of...
"The request failed. Error code: 'InvalidJsonInBotAdaptiveCard'. Error Message: 'Microsoft.Azure.ProcessSimple.Data.Entities.Exceptions.ProcessSimpleDataException: The specified Teams flowbot adaptive card request is missing or invalid. The tracking Id is '{0}'. ---> Newtonsoft.Json.JsonReaderException: After parsing a value an unexpected character was encountered: t. Path 'body[2].choices[0].title', line 1, position 356."
My question is... How can I use a dynamic ChoiceSet while also utilizing the "wait for a response"? I successfully can get it in a "Post your own adaptive card as the Flow bot to a user" but not a "Post an Adaptive Card to a Teams user and wait for a response"
I am developing Bot in .NET Core 3.1 C#. I want to send Hero card with 4 buttons & welcome prompt as soon as user joins /activates bot. I have tried it in OnMembersAddedAsync
if (member.Id != turnContext.Activity.Recipient.Id)
{
var welcomeCard = CreateAdaptiveCardAttachment();
var response = MessageFactory.Attachment(welcomeCard);
await turnContext.SendActivityAsync( response, cancellationToken);
}
This will display adaptive card where type is Action.Submit. But I am not sure how to get values of the button which customer click on. I tried it on OnMessageActivityAsync
if (turnContext.Activity.Value != null)
{
var mainMenu = turnContext.Activity.Value;
}
But values are always null. Json for adaptive card is :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"spacing": "medium",
"size": "default",
"weight": "bolder",
"text": "Welcome to ABC Bank !",
"wrap": true,
"maxLines": 0
},
{
"type": "TextBlock",
"size": "default",
"isSubtle": true,
"text": "Please select user type from below ....",
"wrap": true,
"maxLines": 0
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Consumer"
},
{
"type": "Action.Submit",
"title": "Client"
},
{
"type": "Action.Submit",
"title": "Merchant"
}
]
}
Yes. As said in comments you need to add data property. This is not required. But if you want to collect which option user has provided you need to specify it. Since you don't have any other input field. This will act as an input to carry further operations.
Note: For any input element you need to use id property to identify collected input when submit action is performed.
Similarly for Submit action data. Make sure value in data for each action is unique. If you want 2 buttons to perform same action (nativate to same dialog) then you can specify same value in data
Here is the official link which gives you an idea.
Submit action
Hope this helps
I am developing BOT where I am sending some files to bot which seems working but the icon that is appearing in the chat window during send is just the file name rather then icon/logo of respective file extension.
So this is how its looking currently.
I want it to look like a rectangle kind of shape with respective icon effect like how any other char platform works.
This is not something that is native to the bot framework, mainly because all the channels handle it differently. For example, uploading a document on Teams shows the icon you're looking:
but webchat does not:
If you want the icon like the one that appears in Teams to appear in webchat, you're going to have to do it manually. The easiest way to do this is to have a check in your code for a successful upload, and then create a card with the icon, the file name, and an 'upload successful!' message.
Here's a rough idea:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"type": "AdaptiveCard",
"speak": "<s>Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM</s>",
"body": [
{
"type": "TextBlock",
"text": "Upload Successful!",
"weight": "Bolder"
},
{
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://lh3.googleusercontent.com/proxy/gg1rCqkRVyyJ_wt67HExRIjYf4NvaRYVUXpg3crwUK7joCyVSeYmEJ3EgnLI3QbtX-1ulZYPF_6THsjituT2OG2z",
"size": "Small",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"size": "ExtraLarge",
"color": "Accent",
"text": "cat-2.5.gcode",
"spacing": "None"
}
]
}
]
}
]
}
I am trying to get adjacent submit actionsDesired submit action,rather than the default action buttons(one below the other) that we get in an adaptive carddefault submit action buttons. Please refer the images attached.
It would be helpful if you can let me know how can we achieve this using C#. Thanks for the help in advance.
Unfortunately, the button orientation in the Botframework is channel specific. The only channels where it is possible to align buttons on the same line is WebChat and DirectLine, but the process to change the button alignment in those two channels is quite complicated.
A simple way to solve your issue would be to create two columns and add a selectAction attribute to each column. That way when the user clicks on the column it will invoke the corresponding action. This approach works with the OpenUrl and Submit actions but doesn't work with the ShowCard action. The only other downside to this approach is that each column will not be formatted the same as the other buttons (there's no way to put an outline around each column), but you can add an image to each column to get the desired UI.
Hope this helps.
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.microsoft.com/"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"text": "Set due date"
}
],
"width": 1
},
{
"type": "Column",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.microsoft.com/"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"text": "Comment"
}
],
"width": 1
}