How to create a teams card using external webservice and post data in power automate(Part 2) - microsoft-teams

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 ...

Related

Power Automate - using variables in adaptive cards

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.

Dynamic ChoiceSet in Adaptive Cards "Post an Adaptive Card to a Teams user and wait for a response"

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"

Microsoft Teams bot: Card including Action.OpenUrl with task deeplink

For our bot in Teams, using the Microsoft Bot Framework, I want the bot to send a card with a button that, when clicked, will open a task module through a deep link
Deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=<card>
Where <card> comes from the example in the docs:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Here is a ninja cat:"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png",
"size": "Medium"
}
],
"version": "1.0"
}
URL encode the JSON to: %7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
We then have deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
Finally, send message through Bot Framework API:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conv_id>/activities
Body:
{
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"text": "Hi 👋<br/><br/>What do you need?",
"textFormat": "xml",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content" : {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"actions": [{
"type": "Action.OpenUrl",
"title": "Display task",
"url": "https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D"
}],
"body": []}}]}
The message appears in Teams as expected, but when clicking the button nothing happens. What am I doing wrong?
The issue was that I was sending my bot id instead of my app id for the APP_ID parameter.
I don't understand this in the docs though:
Note that it's valid for APP_ID and BOT_APP_ID to be the same, and in many cases will be if an app has a bot since it's recommended to use that as an app's ID if there is one.
How is one supposed to achieve this?

Send Hero or Adaptive card & Get User Input on Welcome

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

Bot Framework V3, How to get Adjacent Submit Action buttons in an adaptive card with c#

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
}

Resources