Send Hero or Adaptive card & Get User Input on Welcome - botframework

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

Related

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

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

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"

Cancel button on microsoft adaptive cards for teams

I am using the ms adaptive cards for teams using nodejs. I can see actions has button of type Action.Submit to pass form data. However, I want to understand how to handle cancel case.
Is there a way to simply close the form on clicking cancel button or I have to let it behave like save button and return nothing from server side when the cancel button is pressed.
my card is like below
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "{title}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "{creator.profileImage}",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "{creator.name}",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE({createdUtc},SHORT)}}",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Add a comment",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
},
{
"type": "Action.Submit",
"title": "Cancel"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
There is no exact defined way to handle Cancel functionality.
You have to manage it code behind additionally, Yes you are right like Save Action you also have to set functionality for Cancel
For example what I did is when my user choose sorry, not now (Think
like Cancel) I took that response and under a Switch-Case reply as
required.
//Check Each User Input
switch (checkUserInput.ToLower())
{
case "sorry, not now":
await turnContext.SendActivityAsync(MessageFactory.Text("Okay, Can I help with anything else?"), cancellationToken);
//Send Another Yes/No Card
var yesNoFlow = _customFlowRepository.YesNoFlow();
await turnContext.SendActivityAsync(yesNoFlow).ConfigureAwait(false);
break;
default: //When nothing found in user intent
await turnContext.SendActivityAsync(MessageFactory.Text("What are you looking for?"), cancellationToken);
break;
}
You could have a look the screen shot below:
Hope this would help you to figure out your issue. Let me know if you have any more concern.
There's no way to "Cancel" a card per se, to make it go away - if the user doesn't want to continue, they can simply stop interacting with the card. However, here are some possible alternatives:
You -could- implement a "cancel" button as a submit action, which you could detect in the bot, and reply with an appropriate message
You could look at consider the "ShowCard" action? It basically lets you collapse part of your card, and only open it when a user clicks on a button. That way you could possibly group your card into sections and show each one at a time. See here for more.
Another option in future is the new ToggleVisibility action in AdaptiveCards 1.2, but it's only if your client supports 1.2. (e.g. it's only available in Developer Preview for Teams right now (so very likely/hopefully coming in future, but not available at the moment))
There is nothing such as a cancel button in Adaptive Cards. If you want to close the card/not show the card anymore you could try updating that card with another new card that you would like to show.
From your code, the Cancel Button acts just like that of Submit. It's
because the Submit button will be associated with all the fields and
inputs that you are providing from your Bot and the same applies for
Cancel as it is defaulted to all Inputs.
By adding the changes as that of below, once you hit the Cancel Button,
you will come out of the form and navigate to whichever dialog/flow
that follows.
{
"type": "Action.Submit",
"title": "Cancel",
"associatedInputs": "none"
}
For more information please find this link:
https://adaptivecards.io/explorer/Action.Submit.html.
I believe this might resolve the problem.
another approach is to look for a cancel data object:
new AdaptiveSubmitAction
{
Title = "Login",
Style="positive",
AssociatedInputs = AdaptiveAssociatedInputs.Auto,
Id="ok",
},
new AdaptiveSubmitAction
{
Title = "Cancel",
Style="negative",
AssociatedInputs = AdaptiveAssociatedInputs.None,
Data = CANCEL_VALUE,
Id="cancel"
}
You can then detect the cancel like:
private async Task<DialogTurnResult> SignUserInStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
{
if (stepContext.Context.Activity.AsMessageActivity()?.Text == CANCEL_VALUE)
{
return new DialogTurnResult(DialogTurnStatus.Cancelled);
}
NOTE:It's important to indicate that the cancel button is not associated with the rest of the card's fields, by setting AssociatedInputs = AdaptiveAssociatedInputs.None.

How to handle tap action on adaptive card bot framework v4?

I am having an adaptive card which will be displayed in waterfall dialog. I want to know is it possible to capture the tap action on the adaptive card I don't want to add button to handle click. I am using v4 version of bot framework.
Tap dialog is triggered twice
My adaptive card :
var Card1 = {
"type": "AdaptiveCard",
"selectAction": {
"type": "Action.Submit",
"id": "tap",
"title": "tap",
"data": "data": { tap: 'tap' }
},
"backgroundImage": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
"size": "Stretch"
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"weight": "Bolder",
"color": "Light",
"text": "Click here to play another game of Spider in Microsoft Solitaire Collection!",
"wrap": true
}
],
"width": 1
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "0.5"
};
This is how i have updated the code
Code
// Add prompts that will be used by the main dialogs.
this.dialogs.add(new TextPrompt(TAP_PROMPT, () => true));
// Create a dialog that asks the user for their name.
this.dialogs.add(new WaterfallDialog(PUBLICTRANS, [
this.promptForTap.bind(this),
this.captureTap.bind(this)
]));
async promptForTap(step) {
var Card1 = {
"type": "AdaptiveCard",
"selectAction": {
"type": "Action.Submit",
"id": "tap",
"title": "tap",
"data": "data": { tap: 'tap' }
},
"backgroundImage": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/card_background.png",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://download-ssl.msgamestudios.com/content/mgs/ce/production/SolitaireWin10/dev/adapative_card_assets/v1/tile_spider.png",
"size": "Stretch"
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"weight": "Bolder",
"color": "Light",
"text": "Click here to play another game of Spider in Microsoft Solitaire Collection!",
"wrap": true
}
],
"width": 1
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
};
const reply = {
attachments: [CardFactory.adaptiveCard(Card1)]
};
return await step.prompt(TAP_PROMPT, { prompt: reply });
}
async captureTap(step) {
// Edited from original answer
await step.context.sendActivity(`You selected `);
// Send Back Channel Event
await step.context.sendActivity({ type: 'event', name: 'tapEvent' });
return await step.endDialog();
}
output the card is triggered twice
You can send a Back Channel Event to WebChat from the Bot when the user clicks on an AdaptiveCard to trigger an event on the web page.
Simple AdaptiveCard with Select Action
First, create an AdaptiveCard that has a selectAction. Note, you can either add a selectAction to the whole card or different components in the card like an image or a column. When the user clicks on a part of the card that has a selectAction, it will send an activity to the Bot that contains the data attribute from the action that we can use to determine which action was triggered on the bot side.
Be sure to set the title attribute, the data field, and the type which should be Action.Submit.
{
"type": "AdaptiveCard",
"selectAction": {
"type": "Action.Submit",
"id": "tap",
"title": "tap",
"data": { "tap": "Play again"}
},
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"size": "Medium",
"weight": "Bolder",
"text": "Click Me!"
},
{
"type": "Image",
"url": "https://usercontent2.hubstatic.com/13896379.jpg"
}],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Bot Code - Node Js
Constructor
const TAP_PROMPT = 'tap_prompt';
constructor(conversationState, userState) {
...
// Add prompts that will be used by the main dialogs.
this.dialogs.add(new TextPrompt(TAP_PROMPT, () => true));
// Create a dialog that asks the user for their name.
this.dialogs.add(new WaterfallDialog(WHO_ARE_YOU, [
this.promptForTap.bind(this),
this.captureTap.bind(this)
]));
}
AdaptiveCard Prompt
In one of the steps of your Waterfall, you can create a reply object that has the AdaptiveCard as an attachment. Then you can pass that reply to the prompt. I would recommend using a TextPrompt for this step.
// This step in the dialog sends the user an adaptive card with a selectAction
async promptForTap(step) {
const reply = {
attachments: [CardFactory.adaptiveCard(Card)]
}
return await step.prompt(TAP_PROMPT, { prompt: reply });
}
Capture AdaptiveCard selecteAction
In the next step of the Waterfall, you can get the data attribute sent from the AdaptiveCard by accessing step.value. Here, send an activity to the bot with a type and a name property. These two attributes will be used to filter incoming activities in WebChat and trigger the proper event.
// This step captures the tap and sends a back channel event to WebChat
async captureTap(step) {
// Edited from original answer
await step.context.sendActivity(`You selected ${step.context.activity.value.tap}`);
// Send Back Channel Event
await step.context.sendActivity({type: 'event', name: 'tapEvent'});
return await step.endDialog();
}
WebChat Middleware
In WebChat, we are going to create a custom middleware to check incoming activities. When we encounter an activity that has a name and type that we recognize, trigger your event on the webpage. In the example below, I just alerted the use that they clicked on the AdaptiveCard.
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { name, type } = action.payload.activity;
if (type === 'event' && name === 'tapEvent') {
alert("You tapped on the AdaptiveCard.");
}
}
return next(action);
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
store,
}, document.getElementById('webchat'));
For more details on back channel events and creating a custom middleware in WebChat, checkout this sample in the WebChat Repo.
Hope this helps!

Resources