slack button getting cut
bot.reply(message, {
attachments:[
{
title: 'Do you want to interact with my buttons?',
callback_id: '123',
attachment_type: 'default',
actions: [
{
"name":"yes",
"text": "Yes",
"value": "yes",
"type": "button",
},
{
"name":"no",
"text": "No",
"value": "no",
"type": "button",
}
]
}
]
});
If text length is more, Button gets wrapped up with fewer text and rest ends up as ... I got stuck here. Please help to show full text in button.
This is a feature of Slack, not of BotFramework nor of Botkit. The Slack interface simply doesn't allow long button titles. I don't know what the character length limit is, but you appear to be hitting it and it is truncating the text and replacing it with an ellipses.
I would recommend you reach out to Slack via their developer support page, located here, to identify any possible workarounds or solutions.
Related
How can I get user response from the adaptive card using Adaptive Cards Action.Submit action from MS Teams channel using Microsoft Bot Framework?
Here is my sample Adaptive Card with two button Yes and No. Once the user will click on any button, I need to capture the response in the bot application in the backend implemented using Microsoft Bot Framework 4.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "Does this information help you?"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "Yes",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyYes",
"userIds": "" ,
"data":{
"key1": true,
"key2":"okay"
},
"fallback": {
"type": "Action.Submit",
"title": "Yes"
}
},
{
"type": "Action.Execute",
"title": "No",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyNo",
"userIds": "" ,
"data":{
"key1": false,
"key2":"np"
},
"fallback": {
"type": "Action.Submit",
"title": "No"
}
}
]
}
]
}
Every channel has some additional requirement to achieve this kind of requirement obviously MS Teams Channels Adaptive card required special property with the name "msteams" to the object in an object submit action's data property. As per your adaptive card, it only contains 'data' property so change a little bit and try it out.
Example:
{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
},
"extraData": {}
}
}
Reference: Adaptive Cards in Teams
Essentially, your bot is a service waiting to be called by the user. When the user sends a regular text message, that will come in to your bot as a "MessageActivity" event. However, if they click a button in an Adaptive Card, that will come as an "InvokeActivity" event, so you can hook into that and check if the user clicked one of your buttons, and respond appropriately. Here's an example of a bot doing that based on one of it's cards. See in particular OnMessageActivityAsync vs OnInvokeActivityAsync (C# only - see below for Node).
Here's another very detailed blog on working with this, covering both DotNet and Node, from the Microsoft Bot Framework team. That post is a bit old, so it doesn't cover what you're using in your sample, which is quite new - Universal Actions. It's just a slightly newer way of specifying the json for the Action.
This is totally optional, but there's also a way to make the card buttons behave a little differently. For instance, when the user clicks a button you can make it appear as if the user -typed- that text into the bot. See here for more on that.
Going through the issues page of bot framework composer, I stumbled on this issue which shows an interesting UI card for getting the user's satisfactory :
Does this looks like an adaptive card ? How can we reproduce that ?
the easiest thing to do is go to the designer on Adaptivecards.io. They have a super simple Adaptive Cards Designer experience that is drag and drop.
on other tabs they have example templates which you can launch in the designer to see how they work and play with them.
In your example above, the card is simply a text field with two image links and the images are clickable.
You can use the containers and/or columns components in the designer to layout the items.
You can use a hero card to get user satisfaction response by using thumbs up/thumbs down emoji.
[Herocard
text = Are you satisfied?
buttons = 👍 | 👎
]
Following JSON is a sample for thumbs up and down input choice
{
"type": "TextBlock",
"text": "Do you like the product"
},
{
"type": "Input.ChoiceSet",
"style": "expanded",
"isMultiSelect": false,
"choices": [
{
"title": "👍",
"value": "yes"
},
{
"title": "👎",
"value": "no"
}
],
"placeholder": "Placeholder text",
"spacing": "None"
},
I trying to find how to put actionable icons on Adaptive cards to use with Microsoft Teams. The aim to replace button with image icon(with all button behavior).
in Adaptive Cards 1.2 any image can have an action, see this example:
{
"type": "Image",
"style": "Person",
"url": "${creator.profileImage}",
"size": "Small",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
The action can be submit, openUrl etc like other actions. You can find the option in the designer aswell to try it.
Are there any good workarounds to achieve a timepicker via Slack blocks inside a larger form? It looks like I have a few options:
1) Let the user enter in time just via a textbox ("10:00am") - but this is prone to errors and not very user friendly
2) Create select elements for each of hours, minutes, AM/PM and let them just select each - less error prone but still not very user friendly
The biggest problem with #2 is you can't do it in a larger form, you can only do it inside an actions block (if you don't want the select boxes to all be 100% width). But that doesn't work if your form submits via an option other than the action block button. So for example, if you submit your form via a view submission action, you can't (I don't think) capture any of the data inside your nested action block. So you're stuck with 100% select boxes, or at least it seems impossible to put two select boxes on the same row inside a view.
This is a beta feature but you can use a time picker block.
example: link
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Section block with a timepicker"
},
"accessory": {
"type": "timepicker",
"initial_time": "13:37",
"placeholder": {
"type": "plain_text",
"text": "Select time",
"emoji": true
},
"action_id": "timepicker-action"
}
}
]
}
I am creating a Post.message to Slack through Python and want to add in a button feature. I want the button to provide a list of serial numbers that are represented by low2 = low["serials"]. This is the code I currently have and it adds the button to the slack message but when I click the button I get an error saying "Oh no, something went wrong. Please try that again." from slackbot. I saw posts saying that most people have to create a bot to fix their problems with buttons but if the button just has to read this variable I assume there is a way around that. Thanks for the help!
"fields": [
{
"title": "Amount Used:",
"value": low1,
"short": 'true'
},{
"title": "Distinct Device ID's:",
"value": out1,
"short": 'true'
},
{
"title": "Total Connection Time (hr):",
"value": data2,
"short": 'true'
}
],
"actions": [
{
"name": "game",
"text": "Serials",
"type": "button",
"value": "serials",
}
],
No, there is no way around it. You must create a Slack App (or "Internal Integration") in order to use buttons in your app. One reason is that you need to tell Slack what URL to call if someone clicks a button (your "Action URL") and that can only by configured as part of a Slack app. Check out this documentation on interactive messages for details.
Regarding your approach. A button will only display one value to the user. If your aim is to let the use choose from a list of serial numbers, you have two options in my opinion:
a) Create a group of buttons, one for each serial number
b) Use an interactive menu to create a drop-down menu for your list
I solved my problem by converting the confirm action button to display the values I wanted.
with open('Count_BB_Serial_weekly.json', 'r') as lowfile:
low = json.load(lowfile)
low1 = low["total_serials"]
low2 = low["serials"]
low3 = '\r\n'.join(low2)
Above is my script that imports the array and reads the values. Below I put the results into the "confirm" pop up button.
],
"actions": [
{
"name": "game",
"text": "Serials",
"type": "button",
"value": "serials",
"confirm": {
"title": "Serial Numbers",
"text": low3,
"ok_text": "Yes",
"dismiss_text": "No"
}
}],