Product

Resources

Designing Slack Notifications using Block Kit and Jsonnet

Aydrian Howard

September 02, 2020

Earlier this summer, Riley Napier from our engineering team joined me for our June 24th Courier Live to help me build a Slack Slash Command to display estimated departure times for BART Stations. We created a Glitch ExpressJS app to accept the commands and Courier to handle the responses. We designed the messages by dynamically generating Block Kit using Jsonnet.

Check out the video below to watch us:

Walk through setting up a Glitch App that handles Slack Slash Commands
Create a notification for Slack
Use the Jsonnet Block to dynamically create Block Kit elements

Find the full project code on the Courier Slack Slash Bart Glitch App.

Be sure to Like the video and Subscribe to our YouTube channel.

What is Jsonnet?

Jsonnet is a powerful data templating language for JSON. It has a Python-like syntax that allows you to build JSON output using variables, functions, conditionals, etc. This comes in handy when dynamically creating Block Kit elements for Slack. Courier provides the following functions that allow you to grab data and profile information.

1
# Grab values by JSON path from data passed during send
2
local data = data("path", "default");
3

4
# Grab values by JSON path from merged recipient profile
5
local profile =  profile("path", "default");

For an overview of the basics of Jsonnet syntax, check out Learn Jsonnet in Y minutes.

Displaying BART Station Departure Times

To display the Departure Times passed to the notification, we used variables, functions, and list comprehensions to generate the resulting Block Kit sections. We started with the following data originating from the BART API:

1
{
2
  "data": {
3
    "date": "09/01/2020",
4
    "time": "06:50:01 AM PDT",
5
    "station": {
6
      "name": "Powell St.",
7
      "abbr": "POWL",
8
      "etd": [
9
        {
10
          "destination": "Antioch",
11
          "abbreviation": "ANTC",
12
          "limited": "0",
13
          "estimate": [
14
            {
15
              "minutes": "7",
16
              "platform": "2",
17
              "direction": "North",
18
              "length": "10",
19
              "color": "YELLOW",
20
              "hexcolor": "#ffff33",
21
              "bikeflag": "1",
22
              "delay": "0"
23
            },
24
            {
25
              "minutes": "37",
26
              "platform": "2",
27
              "direction": "North",
28
              "length": "10",
29
              "color": "YELLOW",
30
              "hexcolor": "#ffff33",
31
              "bikeflag": "1",
32
              "delay": "0"
33
            },
34
            {
35
              "minutes": "66",
36
              "platform": "2",
37
              "direction": "North",
38
              "length": "10",
39
              "color": "YELLOW",
40
              "hexcolor": "#ffff33",
41
              "bikeflag": "1",
42
              "delay": "0"
43
            }
44
          ]
45
        },
46
        {
47
          "destination": "Berryessa",
48
          "abbreviation": "BERY",
49
          "limited": "0",
50
          "estimate": [
51
            {
52
              "minutes": "9",
53
              "platform": "2",
54
              "direction": "North",
55
              "length": "10",
56
              "color": "GREEN",
57
              "hexcolor": "#339933",
58
              "bikeflag": "1",
59
              "delay": "0"
60
            },
61
            {
62
              "minutes": "39",
63
              "platform": "2",
64
              "direction": "North",
65
              "length": "10",
66
              "color": "GREEN",
67
              "hexcolor": "#339933",
68
              "bikeflag": "1",
69
              "delay": "0"
70
            }
71
          ]
72
        }
73
      ]
74
    },
75
    "message": ""
76
  } 
77
}

Using a Jsonnet block, we used the following Jsonnet code to render the Block Kit Sections

1
local station = data("station");
2
local get_image(color, direction) = 
3
    "https://dummyimage.com/100x100/%s/000000.png&text=%s" % [color[1:], direction];
4

5
local get_cars(length) = std.join("", [ ":train:" for x in std.range(1, std.parseInt(length))]);
6

7
local is_bike(flag) = 
8
    if flag == "1" then "\n:bike:" else "";
9

10
local get_estimate(estimate) = 
11
    {
12
        "type": "section",
13
        "text": {
14
            "type": "mrkdwn",
15
            "text": ":clock4: *%s min*\nPlatform %s\n%s %s" % [estimate.minutes, estimate.platform, get_cars(estimate.length), is_bike(estimate.bikeflag)]
16
        },
17
        "accessory": {
18
            "type": "image",
19
            "image_url": get_image(estimate.hexcolor, estimate.direction),
20
            "alt_text": "%s %s" % [estimate.direction, estimate.color]
21
        }
22
    };
23

24
local get_estimates(estimates) = 
25
    [
26
        get_estimate(estimate)
27
    for estimate in estimates];
28

29
local get_destinations(etd) = 
30
    [ 
31
        {
32
            "type": "section",
33
            "text": {
34
                "type": "mrkdwn",
35
                "text": "*%s*" % etd.destination
36
            }
37
        }
38
    ] + get_estimates(etd.estimate) +
39
    [
40
        {
41
               "type": "divider"
42
        }
43
    ];
44

45
std.flattenArrays([
46
    get_destinations(etd)
47
    for etd in station.etd
48
])

This results in Block Kit that looks like the following:

Feel free to remix our Glitch app and create your own Slack Slash Command. Be sure to let us know what you create.

Is there something you’d like to see us do using Courier? Let us know and it might be the subject of our next Courier Live. We stream a new Courier Live every Wednesday at noon Pacific. Follow us on Twitch to be notified when we go live.

-Aydrian

More from Courier Live

April 2021 Courier Live Release Notes Thumbnail

COURIER LIVENEWS & UPDATES

Courier April Product Release Updates: In-app Inbox, Preferences, and Automations

In this update, Aydrian and Nate (Head of Customer Success) as cohosts cover what is new with the in-app notifications API, our new preferences component, and our automations API, which is now GA.

Aydrian Howard

May 20, 2021

COURIER LIVE

Content, Notifications, and IoT

On February 2nd and 3rd, Shy Ruparel joined Aydrian for another Courier and Contentful crossover stream. This time, they decided to play around with an IoT E-ink display and use it to show the latest posts from Contentful and send notifications using Courier.

Aydrian Howard

February 10, 2021

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

Resources

Help Center

Podcasts

Error Solutions

Product Updates

Free Tools

Company

Blog

About

Careers

Security

Terms

Privacy

Responsible Disclosure

Subprocessors