npm module to handle slack block kit
npm install block-kit-handlerBlock 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.
sh
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.$3
`typescript
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 ')}),
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
});
});
`If you use the raw JSON to create the same message, you'll have to write many more lines.
See this.
$3
`typescript
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 ! 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()
});
});
` JSON for the same modal is Here.
$3
`typescript
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 posts new tasks, comments, and project updates to '),
accessory: button(plainText('Edit'), 'edit-1', { value: 'public-relations' })
}),
divider(),
section({
text: mrkdwnText('#team-updates\n posts project updates to '),
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()
});
});
``JSON for the same home tab is here.