Looking to integrate button with block in Json [slack] - json

I'm looking to integrate the button with block id using modal in slack, not able to successfully integrate so far now, not sure what I'm missing here also I'm a newbie in JSON so definitely might be missing something minor here. So basically when someone clicks the review button it should pop up with another form. I would really appreciate it if someone can provide some inputs here. Thanks in advance
Testing can be pretty much done here - https://app.slack.com/block-kit-builder
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Hello, Assistant to the Regional Manager Dwight! *Michael Scott* wants to know where you'd like to take the Paper Company investors to dinner tonight.\n\n *Please select a restaurant:*"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Farmhouse Thai Cuisine*\n:star::star::star::star: 1528 reviews\n They do have some vegan options, like the roti and curry, plus they have a ton of salad stuff and noodles can be ordered without meat!! They have something for everyone here"
},
"accessory": {
"type": "image",
"image_url": "https://s3-media3.fl.yelpcdn.com/bphoto/c7ed05m9lC2EmA3Aruue7A/o.jpg",
"alt_text": "alt text for image"
}
},
{
"type": "divider"
},
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Review",
"emoji": true
},
"value": "click_me_123",
"title": {
"type": "plain_text",
"text": "hello world"
},
"submit": {
"type": "plain_text",
"text": "Submit"
},
"blocks": [
{
"type": "input",
"element": {
"type": "plain_text_input",
"action_id": "ml_input",
"multiline": true,
"placeholder": {
"type": "plain_text",
"text": "If you need help, please review it here detail"
}
}
}
]
}
]
}
]
"type": "modal"
}

Related

Variables in JSON Body for Slack

I'm very new to this type of work so apologies in advance for the more than likely basic question. Anyhow, I'm configuring a JSON POST to a custom Slack app and the system I’m triggering the webhook from uses tokens to pull in info specific to the record, in this case an account, and then sending to a Slack channel. This is what a token looks like ${Account.Comments}
Below is how I've configured the request body, but I'm getting an invalid_payload response and I cannot seem to figure it out. Again, I'm very new to this so any help with this would be very appreciated.
{
"blocks": [{
"type": "header",
"text": {
"type": "plain_text",
"text": ":bell: New Portal Deal Registration!",
"emoji": true
}
},
{
"type": "section",
"fields": [{
"type": "mrkdwn",
"text": "*Company:*\n{${Account.Comments}}"
},
{
"type": "mrkdwn",
"text": "*Partner:*\n<example.com|Fred Enriquez>"
}
]
},
{
"type": "section",
"fields": [{
"type": "mrkdwn",
"text": "*Estimated ARR*\n${VARIABLE}"
},
{
"type": "mrkdwn",
"text": "*Partner Type:*\n${VARIABLE}"
}
]
},
{
"type": "section",
"fields": [{
"type": "mrkdwn",
"text": "*Close Date:*\n${VARIABLE}"
},
{
"type": "mrkdwn",
"text": "*Partner Manager:*\n${VARIABLE}"
}
]
},
{
"type": "section",
"fields": [{
"type": "mrkdwn",
"text": "*Details:*\n${VARIABLE}"
}]
},
{
"type": "actions",
"elements": [{
"type": "button",
"text": {
"type": "plain_text",
"text": "View",
"emoji": true
},
"value": "click_me_123",
"url": "https://google.com",
"action_id": "button-action"
}]
}
]
}

Adaptive Card - Dynamically Generated Choices V1.5

I have the following old Adaptive card from a Playbook which I need to update to v1.5. But I stumble upon a problem with the choices which are dynamically generated from a logic app body. I have made the part of the code bold. There is a value that is not JSON proof so it should be required to convert it to JSON that way.
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')}, #THIS IS THE LINE THAT NEEDS TO BE CHANGED
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
Full Code:
{
"msTeams": {
"width": "full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"size": "large",
"color": "accent",
"text": "**Microsoft Sentinel Alert - **#{triggerBody()?['object']?['properties']?['incidentNumber']} - #{triggerBody()?['object']?['properties']?['title']}",
"wrap": true
},
{
"type": "TextBlock",
"text": "Please Select the playbooks to run for the incident:",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Available tagged Logic App playbooks",
"wrap": true,
"weight": "Bolder",
"color": "Accent"
},
{
"type": "Input.ChoiceSet",
"choices": #{body('LogicApp_-_Get_tagged_playbooks')},
"placeholder": "IP Playbooks",
"isMultiSelect": true,
"style": "expanded",
"id": "playbooks"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
Could someone help me converting only that part of the choices to v1.5 so I can properly generate the choices myself? Or do I need to make my card legacy supported and drop it back to v1.2? I really want to use the card designer so I can make it easier.
Thanks in advance.

How to handle the answer of a custom payload in dialogflow?

I have a bot that handles well the welcome intent using Dialogflow for Slack. However I don't know how to deal with the answer to the welcome intent to fire the second post. Indeed, the welcome intent, which outputs a await_answer1 context, shows the following template in json:
{
"slack": {
"text": "",
"attachments": [
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*How have you been feeling?* Poll by <fakeLink.toUser.com|Mihailo>"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":tired_face: *I’ve been feeling more exasperated and hopeless*"
},
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "1"
}
},
{
"accessory": {
"value": "2",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
}
},
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":expressionless: *Generally, less freaked out than other people*"
}
},
{
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "3"
},
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":relieved: *More calm and hopeful*"
}
},
{
"type": "divider"
},
]
}
]
}
}
And I would like to handle the answer. So I created an answer1 intent which takes the await_answer1 as an input context. The training phrases are the output of the above template : 1, 2, 3, 4, 5. And the Default text response is Interesting! However after selecting the answer is the Fallback intent rather than answer1. Therefore, how to handle thee answer of a custom payload in dialogflow?
AngelDev answer
I tried to include block_id:
{
"slack": {
"text": "",
"attachments": [
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*How have you been feeling?* Poll by <fakeLink.toUser.com|Mihailo>"
}
},
{
"type": "divider"
},
{
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "1"
},
"type": "section",
"block_id": "1",
"text": {
"type": "mrkdwn",
"text": ":tired_face: *I’ve been feeling more exasperated and hopeless*"
}
},
{
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "2"
},
"type": "section",
"block_id": "2",
"text": {
"type": "mrkdwn",
"text": ":expressionless: *Generally, less freaked out than other people*"
}
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":relieved: *More calm and hopeful*"
},
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "3"
}
},
{
"type": "section",
"block_id": "4",
"text": {
"type": "mrkdwn",
"text": ":fearful: *More scared and panicked*"
},
"accessory": {
"value": "4",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
}
}
},
{
"type": "section",
"block_id": "5",
"text": {
"type": "mrkdwn",
"text": ":open_mouth: *More surprised and baffled*"
},
"accessory": {
"value": "5",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
}
}
}
]
}
]
}
}
Yet when I click on the button the DialogFlow bot falls on the DefaultFallback intent rather than going to the answer1 intent that should handle the await_answer1 context.
I'm not completly sure why, but if you remove the output and input context, this setup works fine.
These are the accessory properties I used, I only changed the value property and added those values as a example phrase to my intents.
"accessory": {
"value": "First",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
}
},
"accessory": {
"value": "Second",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
}
},
"accessory": {
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "Vote"
},
"value": "Third"
If you are looking to build a very customized Slack experience it might be worth to investigate into the Slack API. OnClick events and other Slack specific events are currenty not supported from within the Dialogflow UI, but you can integrate it with code in a webhook and from there customize your conversation in greater detail.
You must include a block_id in your custom payload in each element of the block arrangement and this value must be in the training phrases of your intention since when you receive an interaction you receive this block_id. For example
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*How have you been feeling?* Poll by <fakeLink.toUser.com|Mihailo>"
},
block_id: "section_1"
}
I hope it is what you are looking for but you can write to me to help you solve your doubts.

Why rich message created in dialogflow wouldn't appear in a bot tested on Slack?

I created two answers for the Default Welcome Intent.
One in the default one and the other as a text response which shows up in Slack and the other one using Slack as a channel of my bot, clicking on Add Response to start creating responses just for Slack using Dialogflows UI.
The second is the following, a default template for polling from the docs:
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Where should we order lunch from?* Poll by <fakeLink.toUser.com|Mark>"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":sushi: *Ace Wasabi Rock-n-Roll Sushi Bar*\nThe best landlocked sushi restaurant."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_1.png",
"alt_text": "Michael Scott"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_2.png",
"alt_text": "Dwight Schrute"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_3.png",
"alt_text": "Pam Beasely"
},
{
"type": "plain_text",
"emoji": true,
"text": "3 votes"
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":hamburger: *Super Hungryman Hamburgers*\nOnly for the hungriest of the hungry."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_4.png",
"alt_text": "Angela"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_2.png",
"alt_text": "Dwight Schrute"
},
{
"type": "plain_text",
"emoji": true,
"text": "2 votes"
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":ramen: *Kagawa-Ya Udon Noodle Shop*\nDo you like to shop for noodles? We have noodles."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "mrkdwn",
"text": "No votes"
}
]
},
{
"type": "divider"
},
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Add a suggestion"
},
"value": "click_me_123"
}
]
}
]
}
It should gives something like the following image when saying hi:
However if the first message shows up after launching the test in Integrations, the second never shows up, even in the little dialogbox on the right.
I thought the problem would be that I needed to make the bot public as it seems that to use rich messages, we have to copy the ‘Events Request URL' value given by Dialogflow and paste it into the 'Request URL' field from the Interactive Messages section of my Slack app settings. But the bot don't even retrieve the default message.
Steps I followed to implement my bot
In the Slack app, go to the 'Bot users' section and click the 'Add a Bot User' button.
In the Slack app ‘Basic Information’ section, copy the 'Client ID', 'Client Secret' and 'Verification Token' and paste their values into the respective fields below.
Start the bot.
Copy the 'OAuth URL' value below and paste it into the 'Redirect URL(s)' field from the ‘OAuth & Permissions’ section of your Slack app settings. Save URLs.
Copy Events Request URL from the field below and paste it to Request URL in the ‘Events Subscription’ section of your Slack app.
Enable events in the ‘Event Subscriptions’ section.
Select necessary events in "Subscribe to Bot Events" section for example message.im, message.group, message.channel, im_created. These events will define which message types (direct, in channel, etc.) your bot will react to. Save changes. I selected message.im, message.groups, message.channels, im_created
In the Slack app settings, go to 'Manage Distribution' and add the bot to your Slack team using the 'Add to Slack' button (it bugged there)
To be able to send your desired response using custom payloads, you should first add the format required for Dialogflow to send a request to slack.
{
"slack": {
"text": "Testing custom payloads",
"attachments": []
}
}
In the attachments, add the block format and then it should send the message to your bot in slack.
The final message looks like this:
{
"slack": {
"text": "",
"attachments": [{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Where should we order lunch from?* Poll by <fakeLink.toUser.com|Mark>"
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":sushi: *Ace Wasabi Rock-n-Roll Sushi Bar*\nThe best landlocked sushi restaurant."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_1.png",
"alt_text": "Michael Scott"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_2.png",
"alt_text": "Dwight Schrute"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_3.png",
"alt_text": "Pam Beasely"
},
{
"type": "plain_text",
"emoji": true,
"text": "3 votes"
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":hamburger: *Super Hungryman Hamburgers*\nOnly for the hungriest of the hungry."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_4.png",
"alt_text": "Angela"
},
{
"type": "image",
"image_url": "https://api.slack.com/img/blocks/bkb_template_images/profile_2.png",
"alt_text": "Dwight Schrute"
},
{
"type": "plain_text",
"emoji": true,
"text": "2 votes"
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":ramen: *Kagawa-Ya Udon Noodle Shop*\nDo you like to shop for noodles? We have noodles."
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Vote"
},
"value": "click_me_123"
}
},
{
"type": "context",
"elements": [
{
"type": "mrkdwn",
"text": "No votes"
}
]
},
{
"type": "divider"
},
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"emoji": true,
"text": "Add a suggestion"
},
"value": "click_me_123"
}
]
}
]
}]
}
}

Adaptive cards are converted to image in Facebook Messenger

I tried following example card picked up from Microsoft's website adaptivecards.io
var msg = new builder.Message(session)
.addAttachment({
contentType: "application/vnd.microsoft.card.adaptive",
content: {
type: "AdaptiveCard",
speak: "<s>Your meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
            "body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate",
"title": "Select due date"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "http://adaptivecards.io"
}
]
}
});
session.send("This is an adaptive card");
session.send(msg);
to see how it appears in Facebook and WebChat.
In WebChat emulator it renderes fine with options to interact with choices.
However, same thing renders as an image in Facebook Messenger, with one separate messsage to view options, which redirects to the website.
Should we assume that adaptive cards will not work on Facebook messenger? Or am I missing something basic here.
Unless Messenger natively supports adaptive cards, the best we can do is render to an image and attempt to map Actions to Messenger buttons. For example, an Action.OpenUrl should render as a button on Messenger. But more advanced scenarios, like input fields, etc, will get dropped as there is no way to express those as Messenger templates today.
This documentation lists the channels and their current support:
https://learn.microsoft.com/en-us/adaptive-cards/get-started/bots#channel-status