I am looking for solution where I could upload an attachment in message extension.
So far, I am able to get the button in the hero card, but how can:
I use this button to upload a file?, or
Through this button I could open a new Adaptive Card or any card, where I use upload logic?
Attaching image below
As far as i know You can't upload attachment using the actions/buttons functionality of TeamsCards.
However you can use Teams TaskModule which allows you to create modal popup window in your Teams application.
Inside the popup window you can run your own custom HTML/JavaScript code where you can use the <input type="file"> tag to upload your attachment.
To open a popup window you have to include "msteams":{"type":"task/fetch"} into "data" object of the action object of the card.
I used AdaptiveCardDesigner to create an example for you.
But i think it's not necessary to use Adaptive Cards to achieve this, this should work with HeroCards too.
So here's an example:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Request Task"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
{
"type": "Action.Submit",
"title": "Open Task Window",
"data": {
"msteams": {
"type": "task/fetch"
},
"messageId": "12345"
},
}
]
}
Next step is to handle this request on the backend and reply with an URL for the TaskModule window.
Here's an example project from Microsoft.
Hope this helped.
Related
I have been trying to invoke the task module using adaptive card in Microsoft Teams bot by modifying the echo bot sample from botbuilder framework v1.3 in nodejs. I'm using the TeamsActivityHandler as instructed by the docs. Normal buttons seems to work fine, but the button type with task/fetch doesn't seems to be working as expected. Here is the card json:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "TaskModule Card",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Invoke",
"data": {
"msteams": {
"type": "task/fetch"
}
}
}
]
}
]
}
When I click the button, it does not send any data back to the bot's backend to trigger handleTeamsTaskModuleFetch() method. Even the button animation that makes it gray while making call to the backend is not happening here.
Even the same happens with the example provided here github. How to fix this issue?
I want to add a link as a button in google dialogflow chatbot and it was integrated with kommunicate.
Please help me how we add a link as a button.When user clicks that button he has to redirect to another page.
Use the below metadata to render the Link Buttons:
Send custom data to bot platform via rich message response
{
"message": "click on the buttons",
"platform":"kommunicate",
"metadata": {
"contentType": "300",
"templateId": "3",
"payload": [{
"type": "link",
"url": "https://www.google.com",
"name": "Go To Google"
},
{
"type": "link",
"url": "https://www.facebook.com",
"name": "Go To Facebook",
"openLinkInNewTab": false
}
]
}
}
Use openLinkInNewTab: false to open any link in the same tab. Default value is true, which will open the links in the new tab.
Can anyone please help me to include list view in Facebook Channel using Bot framework? I saw examples as shown here List template. I don't know whether this is the exact way in which we need to give the attachments. Also I didn't know the equivalent for sourceEvent method in Bot framework v4. Another useful link is as follows FB Messenger Message Template. See the image given below. I need to put the link for the image and once we click the link it should open another page also the image should be clickable image as in the example for C# Clickable HeroCard images using tap property. Both functionality should work. I tried using HeroCard (but the url that needs to open-up had CORS origin issue. I tried using Adaptive card but it is not supported in Facebook as of now. So, I thought to use List Template for Facebook. Is there anyway to achieve this?
You can send Facebook List Templates through the Microsoft BotFramework by adding the Facebook attachment to the activity's channel data. The list template type doesn't seem to be supported, but you can set the type to generic and add multiple elements to the attachment to get the same result. See the example below.
await turnContext.sendActivity({
channelData: {
"attachment": {
"type": "template",
"payload": {
"template_type": "generic",
"elements": [
{
"title": "Three Strategies for Finding Snow",
"subtitle": "How do you plan a ski trip to ensure the best conditions? You can think about a resort’s track record, or which have the best snow-making machines. Or you can gamble.",
"image_url": "https://static01.nyt.com/images/2019/02/10/travel/03update-snowfall2/03update-snowfall2-jumbo.jpg?quality=90&auto=webp",
"default_action": {
"type": "web_url",
"url": "https://www.nytimes.com/2019/02/08/travel/ski-resort-snow-conditions.html",
"messenger_extensions": false,
"webview_height_ratio": "tall"
},
"buttons": [{
"type":"element_share"
}]
},
{
"title": "Viewing the Northern Lights: ‘It’s Almost Like Heavenly Visual Music’",
"subtitle": "Seeing the aurora borealis has become a must-do item for camera-toting tourists from Alaska to Greenland to Scandinavia. On a trip to northern Sweden, the sight proved elusive, if ultimately rewarding.",
"image_url": "https://static01.nyt.com/images/2019/02/17/travel/17Northern-Lights1/17Northern-Lights1-superJumbo.jpg?quality=90&auto=webp",
"default_action": {
"type": "web_url",
"url": "https://www.nytimes.com/2019/02/11/travel/northern-lights-tourism-in-sweden.html",
"messenger_extensions": false,
"webview_height_ratio": "tall"
},
"buttons": [{
"type":"element_share"
}]
},
{
"title": "Five Places to Visit in New Orleans",
"subtitle": "Big Freedia’s rap music is a part of the ether of modern New Orleans. So what better authentic travel guide to the city that so many tourists love to visit?",
"image_url": "https://static01.nyt.com/images/2019/02/17/travel/17NewOrleans-5Places6/17NewOrleans-5Places6-jumbo.jpg?quality=90&auto=webp",
"default_action": {
"type": "web_url",
"url": "https://www.nytimes.com/2019/02/12/travel/big-freedia-five-places-to-eat-and-visit-in-new-orleans.html",
"messenger_extensions": false,
"webview_height_ratio": "tall"
},
"buttons": [{
"type":"element_share"
}]
}]
}
}
}
});
Hope this helps!
In the condition when there are multiple buttons present on the same chat history, the user may click the button from previous messages, therefore I am not able to identify from which dialog/message the input came from.
Example:
As chat bot is being implemented for multiple channels, I am avoiding to use Slack's interactive messages, so my aim is to handle this on bot framework itself.
I tried getting information from session object as well as event_source but couldn't figure it out for a concrete solution.
Use a unique ID in callback_id in your button attachment to distinguish between different sets of buttons, e.g. between prompt #1 and prompt #2. The callback_id will be included in the request that Slack sends to your app once a button is pressed.
Together with the general context information of a request like Slack Team ID, channel ID, user ID your app should be able to react correctly.
Example for button definition (from official documentation):
{
"text": "Would you like to play a game?",
"attachments": [
{
"text": "Choose a game to play",
"fallback": "You are unable to choose a game",
"callback_id": "wopr_game",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "game",
"text": "Chess",
"type": "button",
"value": "chess"
},
{
"name": "game",
"text": "Falken's Maze",
"type": "button",
"value": "maze"
},
{
"name": "game",
"text": "Thermonuclear War",
"style": "danger",
"type": "button",
"value": "war",
"confirm": {
"title": "Are you sure?",
"text": "Wouldn't you prefer a good game of chess?",
"ok_text": "Yes",
"dismiss_text": "No"
}
}
]
}
]
}
I'm creating buttons for a slackbot using something like:
const messageB = {
"attachments": [
{
"text": "Essa mensagem foi útil?",
"callback_id": "button_feedback",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "button_click_yes",
"text": "sim",
"type": "button",
"value": "yes"
},
{
"name": "button_click_no",
"text": "não",
"type": "button",
"value": "no"
}
]
}
]
};
But the button remain active after the message was sent, and can be used again by the user. I want to deactivate it, or delete it after it was used. But i can't find about it anywhere in the docs.
Clicking on a button will always fire a request to your Slack app. If you want to remove the button after it was clicked you need to update your original message with a new one that reflects the changed state (e.g. button removed). Its not possible to show deactivated buttons with Slack though, so you need to remove it.
To replace the original message all you need to do is respond to the Slack request with an updated message.
However, it will technically still be possible for users to click on your button twice (e.g. due to network delays), so you app should be able to response to multiple clicks on your buttons by the same user in an appropriate way.
See also here for the official documentation on the topic.
See also here and here for answer on a similar topic.