Unfurl links blocks template - slack-api

I'm using the link_shared events to unfurl links in my workspace, trying to generate a template that is as close to Slack's unfurling template as possible, but I have several issues -
Blocks have very large spacing between them, causing my 3 blocks to take a lot of space
I'm unable to have an image inlined with the text for the title, unless I'm using context, but this is causing the text to be very small.
Taking Slack's example of how link unfurling should look like and trying to mimic it with blocks should explain the differences. This is the blocks message, and here you can see the result as an image
So my main question is - does Slack use some internal blocks formatting not available in the API, or is it possible to achieve the same result?
Thanks a lot!
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ":pager: *Slack*"
}
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*<https://slack.com/features|Features>*"
}
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Slack is where work flows. It's where the people you need, the information you share, and the tool you use come together to get things done.",
"emoji": true
},
"image_url": "https://a.slack-edge.com/13f94ee/marketing/img/homepage/self-serve-campaign/unfurl/img-unfurl-ss-campaign.jpg",
"alt_text": "Slack"
}
]
}

That example is not using the Slack block unfurl - it's an example of how a generic link would be displayed using the page's meta tags to display some additional information, using the favicon image.
If you wanted to create something similar you could use use a markdown block and an image block (like this) - but the file size would be displayed on a new line rather than after the text.

It took a bit of playing around, but I realized Slack is actually using message attachments (the legacy version of message formatting) in order to generate their link unfurls.
For example, if you want to unfurl a GitHub repository link, this is the payload you should send, and it'll generate an almost identical unfurling to what Slack is generating (a small Added by {app-name} will be added to the footer) -
unfurls["https://github.com/slackapi/bolt-js/"] = {
author_name: "GitHub",
author_icon: "https://a.slack-edge.com/80588/img/unfurl_icons/github.png",
title: "GitHub - slackapi/bolt-js: A framework to build Slack apps using JavaScript",
title_link: "https://github.com/slackapi/bolt-js/",
text: "A framework to build Slack apps using JavaScript. Contribute to slackapi/bolt-js development by creating an account on GitHub.",
image_url: "https://opengraph.githubassets.com/3e06f7eee96f05a53cd4905af3b296dfe333be7a902bb3e6a095770e87fd17fe/slackapi/bolt-js"
}

Related

Outgoing Webhook what is the format of the response message?

I have created an outgoing webhook in MS Teams. At mentioning the name specified in the outgoing webhook, it will successfully cause an API call in my app - all fine and good.
According to the documentation, my app is required to respond to that request with a response message. But I absolutely can't find any documentation of the format that is accepted in this response.
The only reference, I can find is this one:
https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-outgoing-webhook
Unfortunately, it does not go into detail of what such a message can look like. It only gives an example that this would be acceptable:
{
"type": "message",
"text": "This is a reply!"
}
I would however not like to respond with a simple message, but much rather with something more rich formatted like a card or - in some cases a reaction instead of a message.
Is that possible? Is there any documentation, what other responses are acceptable? Are there other types than just "message" that can be returned?
Alright, here's a quick and dirty way to handle things for teams. For some reason this is not documented very clearly, but what teams requires is for the "Card" to be created as an attachment, instead of just getting the response directly.
What I've done is capture the boilerplate required to house the card first:
string TeamsAdaptiveCardBoilerplate =
#"
{
""type"":""message"",
""attachments"":[
{
""contentType"":""application/vnd.microsoft.card.adaptive"",
""contentUrl"":null,
""content"":{
""$schema"":""http://adaptivecards.io/schemas/adaptive-card.json"",
""type"":""AdaptiveCard"",
""version"":""1.2"",
""body"":[
##BODY##
]
}
}
]
}
";
Then, I build the body (usually, this would not be static text, but it serves well as an example)
string AdaptiveCardBody =
#"
{
""type"": ""TextBlock"",
""text"": ""Here is a ninja cat""
},
{
""type"": ""Image"",
""url"": ""http://adaptivecards.io/content/cats/1.png""
}
";
Next I simple swap out the placeholder with the real body:
var jsonPayload1 = TeamsAdaptiveCardBoilerplate.Replace("##BODY##", AdaptiveCardBody);
And finally, return the assembled payload (converted back into an object so the correct response headers get set):
var payload1 = JsonConvert.DeserializeObject(jsonPayload1);
return (ActionResult)new OkObjectResult(payload1);
From there, you should be good to go.
Note:
For convenience, the entirety of the "content" (and not "body") block is what you'd copy/paste into the adaptivecards.io designer. You might refactor the above to reflect that reality if it was important to you.
Could you please try this sample json { "$schema": "adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "Image", "url": "c.s-microsoft.com/en-us/CMSImages/…" }, { "type": "TextBlock", "text": "Sample image for Adaptive Card..", "wrap": true } ] }

Slack API - how to send multiple images so they are shown in a gallery

When I send multiple images via api using blocks like this:
{
"blocks": [
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
}
]
}
Slack shows them like a separate blocks and doesn't combine them into a gallery:
slack screenshot - API
When I upload them using Slack app in one message - it combines them into a gallery:
slack screenshot - with gallery
I've tried blocks, attachments, third-party urls, permalinks after file.upload - the result is the same, Slack doesn't combine them into gallery.
So, the question is - how do I make it that Slack shows several images in a gallery?
UPD:
Just got an answer from Slack developers support:
slack dev support answer screenshot
Unfortunately, horizontal/gallery formatting of images is not possible
using the block kit builder. However, I'm going to go ahead and pass
your email on to our product team so that they can take this into
consideration for future updates.
Based on your comment,
[...] permalinks after file.upload [...]
this related answer might help (I also added this clarification there).
When uploading files and collecting their permalinks, you must link them in the text param in the message payload (putting them in a mrkdwn block in the blocks param will not work).
In javascript, this looks like:
const result1 = await web.files.upload({...})
const result2 = await web.files.upload({...})
await web.chat.postMessage({
text: `Here are files in a gallery view <${result1.file.permalink| ><${result2.file.permalink| >`,
...
})

Can jenkins extended choice parameter be made dependent on another parameter's value?

I am using extended choice parameter with JSON parameter type in my declarative Jenkins pipeline. I have found it very good for providing custom UI for parameters and it returns a json based on user inputs.
I have a use case where what options are shown to user depends upon another parameter's value. I can achieve such functionality with active choice parameter but then I am stuck with radio buttons, checkbox, html input etc.
I found a suitable option here where I can make a property inside json dependent on another property:
{
"title": "An object",
"type": "object",
"properties": {
"fieldOne": {
"title": "I should be changed to 'foo'",
"type": "string",
"enum": ["foo","bar"],
"default": "bar"
},
"depender1": {
"title": "I depend on fieldOne to be 'foo'",
"type": "string",
"enum": ["lorem","ipsum"],
"options": {
"dependencies": {
"fieldOne": "foo"
}
}
},
"depender2": {
"title": "I depend on fieldOne to be 'bar'",
"type": "string",
"enum": ["dolor", "sit"],
"options": {
"dependencies": {
"fieldOne": "bar"
}
}
}
}
}
This works great when I try it here
But when I try the same on jenkins, it doesn't work. It shows all 3 textboxes. I saw the option of watching other params too but I couldn't find how to use it as an if else for my parameter.
This is a simple example, what I want to achieve requires UI of a dropdown-1 + Array(dropdown-2 + text field+text-field) where in array's text-field depend on value of dropdown-1, I cannot create the same UI in active choice.
Does any one know how options.dependencies could work in jenkins or same could be achieved using watch/other plugins?
if i got your question right, so you want to make it more smart way to select parameters.
So you can do it via groovy script.
Here is my example you can see on pic:
freestyle job config
Sorry, but i don't know how to better show freestyle job config.
So, logic is quite simple:
i'm collecting JSON on first parameter, and doing some parsing for it.
and then im using Environmets variable to show it's contents, depending on result from first part.
ps. i'm struggling right now with variable Hosts, as i don't know how to pass it in final steps without asking user for input.
But i believe you got the idea how you can do it.

Open URL in browser from Message Button using Slack API

I am sending the users a slack message with a button through a Slack App. On every click of the button, I generate a new URL.
At the moment, I am able to return the URL back as a message. The user clicks on the message to open the URL in the browser.
Instead of the sending a message back, I want to open the URL directly in the browser using slack API.
How can I accomplish it? I can't seem to find anything in the documentation that does that.
Thanks
PS: Google Drive integration does that already.
It appears Slack introduced this feature recently.
As documented in https://api.slack.com/docs/message-attachments#link_buttons
"actions": [
{
"type": "button",
"text": "Book flights 🛫",
"url": "https://flights.example.com/book/r123456"
}
It's possible to preview in Slack's interactive message builder
Unfortunately slack does not support opening urls from message buttons.
You can monitor what slack is planning on releasing here though: https://trello.com/b/ZnTQyumQ/slack-platform-roadmap-for-developers :)
According to Slack, message attachments is the "old way" of composing messages, which will be deprecated in favour of the new Block Kit API.
I found this example on how to do button links on their docs, using the actions object in the message payload.
I haven't implemented it yet, but you can send the message to a channel in your workspace straight from the docs and try it, and it does open the link in the browser as expected.
Update 04/2022
{
"blocks": [
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "View",
"emoji": true
},
"style": "primary",
"url": "https://flights.example.com/book/r123456"
}
]
}
]
}
Test on Slack Blockit Builder: Link

Why is Mandrill-api for Node expecting multiple callbacks

This question is mainly addressed to the creators of Mandrill, but anyone who have something to add are of course free to answer!
Why are the mandrill-api expecting two callbacks in the send messages functions? One to handle the result, and a second one to handle errors. I don't know all that much about other programming language, but I do know that in NodeJs there is a wide spread convention of using one callback, with 2 (sometimes more...) parameters. The first parameter is the error (null if non-existent), and the second parameter is the result.
I agree with you completely, Anders!
When I started using this node API, I got a bit fed up with just that. For one thing.
I cloned the latest version (at the time 1.0.39, now its 1.0.40) and transformed the double callback to a "standard" err, res-callback.
This is not tested for all parts of the API but has been working flawlessly for message part of the API
I also converted some of the input arguments to conform to native JS when it comes to taking arguments for e.g. mergevars. This change is made for Messages.prototype.send and Messages.prototype.sendTemplate
Core Mandrill API way:
"global_merge_vars": [{
"name": "merge1",
"content": "merge1 content"
}],
"merge_vars": [{
"rcpt": "recipient.email#example.com",
"vars": [{
"name": "merge2",
"content": "merge2 content"
}]
}],
The expected way (and the way I changed it, naturally ;-)
"global_merge_vars": [{
"merge1": "merge1 content"
}],
"merge_vars": [{
"rcpt": "recipient.email#example.com",
"vars": [{
"merge2": "merge2 content"
}]
}],
If you like it, feel free to use it or clone it:
https://bitbucket.org/mraxus/mandrill-api-node/src
Cheers!

Resources