Bring the Say Hello App to Life
Learning Objectives
In this project, you’ll:
- Build meaningful messages with Block Kit.
- Add interactivity for a simple onboarding process.
- Deploy a meaningful onboarding app.
Before You Start
Before you complete any steps in this project, make sure you complete the hands-on challenges in Develop a Slack App with Bolt using the same Slack sandbox. You won’t be able to complete the hands-on challenges here if you don’t complete that badge first.
Use Block Kit for Meaningful Messages
In Develop a Slack App with Bolt, you built a basic Slack app for your company’s employee onboarding team. Now, the team wants to deliver meaningful interactions in the app that engage users and help them move through the onboarding process. This is where Block Kit comes in.
Block Kit is a UI framework that helps you create more interactive and captivating messages within Slack. It offers a balance of control and flexibility when building experiences in Slack. Customize the order and appearance of information and guide users by composing, updating, sequencing, and stacking blocks—reusable components that work almost everywhere in Slack.
And guess what—the app you built in Develop a Slack App with Bolt already has a block. Let’s take a look.
Review Your Small But Mighty Block
While we’re just reviewing your app at the moment, you can log in to Glitch to follow along.
- Head to Glitch.
- Click Dashboard.
- Select the app you created in Develop a Slack App with Bolt. Its name should be in three-word format, for example breezy-ringed-kitten.
- Click app.js.
When you built your app to listen for when a user posts “hello” (1), you prompt the app to post a response. That response is made up of a block (2).
Explore Block Types
There are several block types. Yours is a section, which combines several elements like markdown text with a wave emoji and a button that says Click Me. As you and the team think up how to bring this app to life, you review the other types at your disposal.
Block type |
What it does |
Where it’s available |
---|---|---|
Actions |
Holds interactive elements. |
Modals | Messages | Home tab |
Context |
Displays message context, which can include both images and text. |
Modals | Messages | Home tab |
Divider |
Splits different blocks inside a message. |
Modals | Messages | Home tab |
File |
Displays a remote file. |
Messages |
Header |
Displays a plain-text block in a larger, bold font. |
Modals | Messages | Home tab |
Image |
Holds images. |
Modals | Messages | Home tab |
Input |
Collects information from users. |
Modals | Messages | Home tab |
Section |
Combines block elements. |
Modals | Messages | Home tab |
Now that you’ve identified how to lay out a message with various block types, you can find ways to upgrade your app’s interactivity using block elements.
Add Block Elements for More Interactivity
Block elements are visual components that exist within section, context, input, and actions layout blocks. They include components like buttons, date pickers, multiselect menus, overflow menus, plain-text input, radio buttons, checkboxes, select menus, and time pickers. They can collect information from a user, trigger a link, or even kick off a complex workflow.
After talking with the team, it’s agreed that the app should be designed with the following principles.
- Keep it simple.
- Minimal clicks.
- Onboard in minutes.
Simple doesn’t mean easy. With that in mind, it’s time to get to work.
Connect Your Slack Sandbox
First, let’s make sure your Slack sandbox is connected and you have the app you created in the Develop a Slack App with Bolt project.
- Scroll to the bottom of this page.
- If your playground is not connected, go ahead and follow the remaining steps.
- If it is still connected, go ahead and click Verify step.
- If your playground is not connected, go ahead and follow the remaining steps.
- Click Connect Slack Playground.
- Enter your Slack developer program credentials.
- Click Sign in. Slack emails you a one-time code.
- Retrieve the code and enter it to finish connecting your sandbox.
- After a moment, you’ll be taken back to Trailhead. Scroll to the bottom of the page to make your sandbox has been provisioned and connected.
- Click Launch to open your playground in a new tab.
Keep your sandbox open. In the next step, you use block kit to add more meaningful interactions and test your messages.