Skip to content

saito-ya/block-kit-handler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

block-kit-handler

Block Kit is a very powerful UI framework that provides you to flexibly construct messages, modals and HomeTabs sent or created from Slack Apps.
However, since the UI is defined by JSON, it is a little difficult to handle in a program.
block-kit-handler lets you programmatically handle Block Kit with less code and in an easier way.

Installation

npm install block-kit-handler

Usage

I have Github project that shows how to use block-kit-handler.
For details, please refer to the project.

message

import { Block } from '@slack/types';
import { actions, section, button, divider, mrkdwnText, plainText } from 'block-kit-handler';

app.command("/message", async ({ ack, payload, context }) => {
    await ack();

    // declare blocks for message
    const blocks: Block[] = [
        section({ text: mrkdwnText('*Where should we order lunch from?* Poll by <fakeLink.toUser.com|Mark>')}),
        divider(),
        section({
            text: mrkdwnText(':sushi: *Ace Wasabi Rock-n-Roll Sushi Bar*\nThe best landlocked sushi restaurant.'),
            accessory: button(plainText('Vote'), 'vote-a', { value: 'click_me_123'})
        }),
        section({
            text: mrkdwnText(':hamburger: *Super Hungryman Hamburgers*\nOnly for the hungriest of the hungry.'),
            accessory: button(plainText('Vote'), 'vote-b', { value: 'click_me_123'})
        }),
        section({
            text: mrkdwnText(':ramen: *Kagawa-Ya Udon Noodle Shop*\nDo you like to shop for noodles? We have noodles.'),
            accessory: button(plainText('Vote'), 'vote-c', { value: 'click_me_123'})
        }),
        divider(),
        actions([ button(plainText('Add a suggestion'), 'add-suggestion', { value: 'click_me_123' })])
    ];

    // post message
    await app.client.chat.postMessage({
        token: context.botToken,
        channel: payload.channel_id,
        text: 'message sample',
        blocks: blocks
    });
});

message sample

If you use the raw JSON to create the same message, you'll have to write many more lines.
See this.

modal

import { Block } from '@slack/types';
import { Modal, actions, section, button, divider, staticSelect, option, mrkdwnText, plainText } from 'block-kit-handler';

app.command("/modal", async ({ ack, payload, context }) => {
    await ack();

    // declare blocks for modal
    const blocks: Block[] = [
        section({ text: mrkdwnText('*Hi <fakelink.toUser.com|@David>!* Here\'s how I can help you:')}),
        divider(),
        section({
            text: mrkdwnText(':calendar: *Create event*\nCreate a new event'),
            accessory: button(plainText('Create event'), 'create', { value: 'click_me_123', style: 'primary' })
        }),
        section({
            text: mrkdwnText(':clipboard: *List of events*\nChoose from different event lists'),
            accessory: staticSelect('chose-list', plainText('Choose list'), [
                option(plainText('My events'), 'value-0'),
                option(plainText('All events'), 'value-1'),
                option(plainText('Event invites'), 'value-2')
            ])
        }),
        section({
            text: mrkdwnText(':gear: *Settings*\nManage your notifications and team settings'),
            accessory: staticSelect('edit-settings', plainText('Edit settings'), [
                option(plainText('Notifications'), 'value-0'),
                option(plainText('Team settings'), 'value-1')
            ])
        }),
        actions([
            button(plainText('Send feedback'), 'send-feedback', { value: 'click_me_123' }),
            button(plainText('FAQs'), 'faqs', { value: 'click_me_123' })
        ])
    ];

    // build modal
    const modal = new Modal(plainText('App menu'), blocks, { close: plainText('Cancel'), submit: plainText('Submit')});

    // open modal
    await app.client.views.open({
        token: context.botToken,
        trigger_id: payload.trigger_id,
        view: modal.getView()
    });
});

modal sample

JSON for the same modal is Here.

home tab

import { Block } from '@slack/types';
import { HomeTab, actions, section, button, divider, staticSelect, option, mrkdwnText, plainText } from 'block-kit-handler';

app.event('app_home_opened', async({ context, body }) => {
    // declare blocks for home tab
    const blocks: Block[] = [
        section({ text: mrkdwnText('*Here\'s what you can do with Project Tracker:*')}),
        actions([
            button(plainText('Create New Task'), 'create-new-task', { value: 'click_me_123', style: 'primary' }),
            button(plainText('Create New Project'), 'create-new-project', { value: 'click_me_123' }),
            button(plainText('Help'), 'help', { value: 'click_me_123' })
        ]),
        section({ text: mrkdwnText('*Your Configurations*')}),
        divider(),
        section({
            text: mrkdwnText('*#public-relations*\n<fakelink.toUrl.com|PR Strategy 2019> posts new tasks, comments, and project updates to <fakelink.toChannel.com|#public-relations>'),
            accessory: button(plainText('Edit'), 'edit-1', { value: 'public-relations' })
        }),
        divider(),
        section({
            text: mrkdwnText('*#team-updates*\n<fakelink.toUrl.com|Q4 Team Projects> posts project updates to <fakelink.toChannel.com|#team-updates>'),
            accessory: button(plainText('Edit'), 'edit-2', { value: 'public-relations' })
        }),
        divider(),
        actions([
            button(plainText('New Configuration'), 'new-configuration', { value: 'new_configuration' })
        ])
    ];

    // build home tab
    const homeTab = new HomeTab(blocks);

    // publish home tab
    await app.client.views.publish({
        token: context.botToken,
        user_id: body.user_id,
        view: homeTab.getView()
    });
});

home tab sample

JSON for the same home tab is here.

Supported Components (As of Nov. 16th, 2020)

Surfaces

Components Supported Link
Messages yes Link
Modals yes Link
Home Tab yes Link

Blocks

Components Supported Link
Actions yes Link
Context yes Link
Divider yes Link
File not yet Link
Header not yet Link
Image not yet Link
Input yes Link
Section yes Link

Block elements

Components Supported Link
Button yes Link
Checkboxes yes Link
Date Picker yes Link
Image not yet Link
Multi-select menu with static options yes Link
Multi-select menu with external data source yes Link
Multi-select menu with user list yes Link
Multi-select menu with conversations list yes Link
Multi-select menu with channels list yes Link
Overflow menu yes Link
Plain-text input yes Link
Radio button group not yet Link
Select menu with static options yes Link
Select menu with external data source yes Link
Select menu with user list yes Link
Select menu with conversations list yes Link
Select menu with channels list yes Link
Time Picker not yet Link

Composition objects

Components Supported Link
Text yes Link
Confirmation dialog not yet Link
Option yes Link
Option group not yet Link
Dispatch action configuration not yet Link
Filter object for conversation lists not yet Link