Objective: Get an overview of how to use Slack Block Kit to design a surface and copy the JSON object into the Tray connector. Get links to resources related to Slack Block Kit and Slack Apps.

What is Slack Block Kit?

Slack Block Kit is a graphic interface for designing how a Slack surface looks (e.g., modal, message format, etc.) that automatically generates a JSON object representation of that surface for you. You can format and arrange texts and elements of your surface visually, then copy and paste the JSON representation into your connector. 

Learn more about surfaces at Slack API Documentation: Surfaces for building Slack Apps

A Quick Overview 

To get started, follow this link to Slack API's Slack block Kit.

1. Select a surface you would like to customize from this Preview Menu
2. View your Surface Preview in the center panel.
3. Add Surface Properties such as buttons, images, text, etc. found in the left panel.
4. Edit text and view your JSON representation of the surface in the right panel.

Save Your Progress on Slack

Here is a link to Slack Block Kit written out:

Each URL is unique and contains your JSON in the URL pattern. If you would like to save your work, bookmark the page and it will retain your edits the next time you visit.

What do I do in Tray?

If you are using the Slack Connector

Copy this into the Raw Blocks input field:

If you are using the HTTP Client Connector

You can find the expected format of the request body on Slack APIs documentation. As an example, you can find the request object expected to display a modal here.

The JSON object representation of your surface from the Block Kit builder's right panel goes inside the "blocks" array in the request body (in your Tray connector properties panel). Replace the example contents with your custom JSON object. 

NOTE: The Block Kit Builder only helps you format the visual appearance of your model. To properly configure the HTTP Client connector, you will need to provide additional information required for the API call as outlined in the Slack APIs documentation. For an example, check out the following tutorial:

• Tray Academy Live: Business Decisions with Slack - Build a Slack Requisition Application that displays (a) a request form modal and (b) a confirmation modal with this tutorial.