Skip to main content
3월 5~6일에 샌프란시스코의 TDX 또는 Salesforce+에서 열리는 AI 에이전트 시대를 위한 개발자 컨퍼런스에 참여하세요. 지금 등록하기.

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.

  1. Head to Glitch.
  2. Click Dashboard.
  3. 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.
  4. 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).

Slack app code with listener and block called out with numbers as mentioned in the body content.

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.

  1. Scroll to the bottom of this page.
    1. If your playground is not connected, go ahead and follow the remaining steps.
    2. If it is still connected, go ahead and click Verify step.
  2. Click Connect Slack Playground.
  3. Enter your Slack developer program credentials.
  4. Click Sign in. Slack emails you a one-time code.
  5. Retrieve the code and enter it to finish connecting your sandbox.
  6. 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.
  7. 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.

단계 확인

+100 포인트

본인의 Slack Playground에서 이 프로젝트을(를) 완료하게 됩니다.

Salesforce 도움말에서 Trailhead 피드백을 공유하세요.

Trailhead에 관한 여러분의 의견에 귀 기울이겠습니다. 이제 Salesforce 도움말 사이트에서 언제든지 새로운 피드백 양식을 작성할 수 있습니다.

자세히 알아보기 의견 공유하기