I am using Adaptive cards for the Microsoft teams. I am trying to use the radio button by using the "Input.ChoiceSet" type to perform two different tasks by clicking on the radio button. However, unable to perform any action on click of the radio button.
We could not find any property to perform the action. Could you please suggest any way through which we can achieve this
{
type: "Input.ChoiceSet",
id: "incType",
style: "expanded",
isMultiSelect: false,
value: "recurrence",
choices: [
{
title: "one Time",
value: "oneTime"
},
{
title: "Recurring",
value: "recurrence"
}
],
verb: "recurrence_radio_btn_action",
}
There is no invoke activity sent when a radio button is selected on an adaptive card, instead you could either..
Have an action button (Action.Submit or Action.Execute if using Universal Actions outside of a messaging extension):
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Choice 1",
"value": "Choice 1"
},
{
"title": "Choice 2",
"value": "Choice 2"
}
],
"style": "expanded"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
Or render each option as an action of its own:
"body": [
],
"actions": [
{
"type": "Action.Submit",
"title": "Option 1"
},
{
"type": "Action.Submit",
"title": "Option 2"
}
],
In either case, you would then handle the invoke activity when the relevant button is pressed.
Related
I need to build an extremely simple message extension, that once it's clicked (in a teams channel conversation, the same way the "gif" button is clicked) just shows a card with a text and a button (and then when enter is pressed, it's just sent).
I'm a beginner when it comes to message extensions development, I used the instructions from this Microsoft page, and now I'm trying to scrap what I don't need from the generated project and just leave / add what I need.
What I have until now (relevant parts)
in the manifest file
"composeExtensions": [
{
"botId": "{botId}",
"commands": [
{
"id": "createCard",
"context": [
"compose"
],
"description": "Command to run action to create a Card from Compose Box",
"title": "Create Card",
"type": "action",
"parameters": [
{
"name": "title",
"title": "Card title",
"description": "Title for the card",
"inputType": "text"
},
{
"name": "subTitle",
"title": "Subtitle",
"description": "Subtitle for the card",
"inputType": "text"
},
{
"name": "text",
"title": "Text",
"description": "Text for the card",
"inputType": "textarea"
}
]
}
],
"messageHandlers": [
{
"type": "link",
"value": {
"domains": [
"*.botframework.com"
]
}
}
]
}
],
in the bot implementation
export class MessageExtensionBot extends TeamsActivityHandler {
public async handleTeamsMessagingExtensionSubmitAction(
context: TurnContext,
action: any
): Promise<any> {
switch (action.commandId) {
case "createCard":
return createCardCommand(context, action);
default:
throw new Error("NotImplemented");
}
}
}
async function createCardCommand(context: TurnContext, action: any): Promise<any> {
const cardJson = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Click the button below to launch Custom Link"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Launch Custom Link",
"url": "https://google.com"
}
]
};
const adaptiveCard = CardFactory.adaptiveCard(cardJson);
const attachment = {
contentType: adaptiveCard.contentType,
content: adaptiveCard.content,
preview: adaptiveCard,
};
return {
composeExtension: {
type: "result",
attachmentLayout: "list",
attachments: [attachment],
},
};
}
What I have working: when I click the message extension button, I get prompted to enter those three properties (title, subtitle, text), and only after that, I do get my dummy card displayed.
What I need to do:
eliminate that properties prompt completely, I don't need those. I would only need to directly display the adaptive card, without prompting/waiting any other user action
I tried clearing that section from the manifest, but then the app does not work at all: after redeployment I still get prompted for the properties and I get an error no matter if/what I enter
How can I achieve that ?
what do I need to remove/add to the manifest ?
what method do I need to implement in the bot class ?
Can anybody help somehow ?
Thank you.
So if you want to make something like GIF messaging extension in Teams then you should try template - Custom Stickers App Template (C#). If you refer this template you will also get manifest, which you just need to configure with your bot Id.
Explanation of manifest -
The part that you need in manifest is only simple composeExtensions with command type query
"composeExtensions": [
{
"botId": "<bot id>",
"canUpdateConfiguration": false,
"commands": [
{
"id": "Search",
"type": "query",
"title": "Search",
"description": "",
"initialRun": true,
"parameters": [
{
"name": "keyword",
"title": "keyword",
"description": "search for a sticker"
}
]
}
]
}
]
As I understand from the question you asked, you want something like this https://i.stack.imgur.com/vSJ8y.png
In the bot handler -
You need to implement handleTeamsMessagingExtensionQuery(context, query). Here you can use argument query to search for the image you want to send. If you want to see how to implement, we have a sample ready for it(not in context of GIF but you will get general idea)- Sample link.
In this method you need to return messaging extension response. In it you will return all the results(attachment).
Attachment is consist of preview and content. Preview get renders in the messaging extension. Once you click on the preview, its content get render in compose box.
Refer this on how to return messaging extension response having preview as thumbnail card and content as adaptive card - link
You can use this Adaptive card JSON as you just want to show image in it
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png"
}
]
}
Refer this for more image related samples.
I'm using the Google Chat API to send daily updates. I want to have a UI like this:
Like this, I want the UI should appear,
https://developers.google.com/hangouts/chat/reference/message-formats/cards I'm referring this sheet to generate those UIs.
Checkbox is not an available card message.
You can use button widget in a card message. But there are only 2 types of buttons that you can use, its either an image button or a text button.
Buttons
a widget may contain one or more buttons.
buttons in the same widget will be laid out horizontally.
buttons in a different widget will be laid out vertically.
there are two types of buttons: ImageButton and TextButton.
A button can specify a URL that will be opened when a user clicks on it, or an action to be handled by the bot's CARD_CLICKED event handler, as shown in Creating interactive cards.
An ImageButton may specify either a built-in icon or a custom image URL.
You can create card message using spaces.messages.create.
Sample Message Request Body: (card message)
In this example, there are 3 widgets created having 1 button in each widget so that the buttons will be aligned vertically.
{
"cards": [
{
"header": {
"title": "ChatBot",
"imageUrl": "https://www.gstatic.com/images/icons/material/system/1x/face_black_24dp.png",
},
"sections": [
{
"widgets": [
{
"buttons": [
{
"textButton": {
"text": "I have a bike",
"onClick": {
"action": {
"actionMethodName": "optionClick",
"parameters": [
{
"key": "mode",
"value": "bike"
}
]
}
}
}
}
]
},
{
"buttons": [
{
"textButton": {
"text": "I have a car",
"onClick": {
"action": {
"actionMethodName": "optionClick",
"parameters": [
{
"key": "mode",
"value": "car"
}
]
}
}
}
}
]
},
{
"buttons": [
{
"textButton": {
"text": "I have a boat",
"onClick": {
"action": {
"actionMethodName": "optionClick",
"parameters": [
{
"key": "mode",
"value": "boat"
}
]
}
}
}
}
]
}
]
}
]
}
]
}
OUTPUT:
For web chat, I am using a simple adaptive card.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Please enter the email id",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.Text",
"placeholder": "abc#abc.com",
"id": "e_mail_id"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
On submit, it does desirable job at the back end but the value entered in text box in adaptive card disappears. How can we retain the values in adaptive cards after submit action is called?
It was an issue with front end. Had to update Web chat from version 4.5.2 to 4.6.0 . Seems like this issue is a fix in the recent version of web chat.
I am trying to combine button + text + button (i.e,.cancel button) in the same adaptive card.
I tried to add "textBlock" after "Actions" block, it was not displaying it as expected!
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Please select the buttons to proceed..",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Button1",
"data": "Button1"
},
{
"type": "Action.Submit",
"title": "Button2",
"data": "Button2"
},
"type": "TextBlock",
"text": "Please press Cancel to exit",
{
"type": "Action.Submit",
"title": "Cancel",
"data": "Cancel"
}
]
Expected is:
Please select the buttons to proceed..
Button1
Button2
Please press Cancel to exit
Cancel (Button)
Actual result is: No particular error. Its not allowing to include "textBlock" after "Action" block.
Request anybody to help me on this issue.
Thank you.
Please find the expected format of Adaptive card image above in the hyperlink (enter image description here).
You can achieve this if you use Containers and ActionSet. As it is, you can't place text blocks inside of the actions property, only the body. However, if you set up a container and place the first text block and button 1 and button 2 within it, you can then follow up it up with a second container with another text block and the cancel button.
This does require you to use version 1.2 as container items only take Actions placed in an ActionSet. If you are set on needing the second text block placed between the second and third button, then this is how you can do it, but be aware that v1.2 has not been implemented everywhere. You will want to specify the fallback to cover those cases.
You can also visit the Adaptive Card Designer to experiment more.
Hope of help!
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Please select the buttons to proceed...",
"wrap": true,
"weight": "Bolder"
},
{
"type": "Container",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Button1",
"data": "Button1"
},
{
"type": "Action.Submit",
"title": "Button2",
"data": "Button2"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Please press Cancel to exit",
"horizontalAlignment": "Center"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Cancel",
"data": "Cancel"
}
]
}
]
}
Hope of help!
I was working with MS Bot framework and wanted to display some inline buttons on telegram after going through the documentation and some related questions i wrote the following but after session.send(temp) I'm not getting any buttons on the channel.
var temp = {
"type": "Message",
"from": { "channelID":"telegram", "address": session.message.from.id},
"to": { "channelID":"telegram", "address": session.message.to.id},
"conversationId": session.message.conversationId,
"channelData": {
"method": "editMessageReplyMarkup",
"parameters": {
"message_id": session.message.id,
"reply_markup": {
"inline_keyboard": [
[{"text": "Show me more options", "callback_data": "next"}],
[{"text": "Start a new search", "callback_data": "quit"}]
]
}
}
}
};
session.send(temp);
Buttons are supported natively in BotFramework so you don't need to use ChannelData. (See Docs)
"buttons":
[
{
"type": "imBack",
"title": "Show me more options",
"value": "next"
},
{
"type": "imBack",
"title": "Start a new search",
"value": "quit"
}
]
If you did want to achieve this through channelData, you must stringify the value of the reply_markup field, e.g.:
"reply_markup": JSON.stringify({
"inline_keyboard": [
[{"text": "Show me more options", "callback_data": "next"}],
[{"text": "Start a new search", "callback_data": "quit"}]
]
})