blocks

README

Block Examples

The examples provided replicate the template examples provided by slack. The template builder can be found at https://api.slack.com/tools/block-kit-builder.

Due to the nature how slack expects different components to be configured, building complex block using the provided functions can be very verbose, but allows for maximum flexibility.

The examples below should cover implementing most supported block elements.

For additional information on Blocks, see the Block Kit website.

Using examples with the Block Kit Builder website

When generating examples, they will be printed to the screen as a complete message that is meant to be sent back to slack as a direct response, or throuogh the ResponseURL provided. To test your examples in the Block Kit Builder, you must take the contents of the blocks property and paste the results into the builder.

For example, when printing a simple header, the output will be

{
    "replace_original": false,
    "delete_original": false,
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "plain_text",
                "text": "Example Header Text"
            }
        },
        {
            "type": "divider"
        }
    ]
}

To preview this block on the builder website, you should copy just the contents of the blocks:

[
    {
        "type": "section",
        "text": {
            "type": "plain_text",
            "text": "Example Header Text"
        }
    },
    {
        "type": "divider"
    }
]

Example 1 - Approval

The first example demonstrates usage of Sections, Fields and Action buttons. You can view the Approval Example on the block kit builder website. This example can be generated with the function named exampleOne.

Example 2 - Approval - With Images

The secoond example adds additional complexity by introducing images as accessories to main blocks of text. You can view this Approval Example with Images on the block kit builder website. This example can be generated with the function named exampleTwo.

Example 3 - Notifications

This example shows how to add actions to your block that will trigger an interactive message to your application. You can view the rendered example for Notifications on the block builder website. Refer to the function exampleThree for details on how this block can be generated.

Example 4 - Polls

The Polls example displays results and allows the end user to vote, displaying a count and images of recent voters. You can view the rendered Poll Example on the block kit builder website. Refer to the function named exampleFour for more information on generating this block type.

Example 5 - Search Results

This example introduces overflow elements, allowing you to populate a select style dropdown with fields. These fields can be static, loaded from an external source. You can view the rendered Search Results Example on the block kit builder website. Refer to the function named exampleFive for more information on generating this block.

Example 6 - Search Results with Options and Actions

Using a combination of overflow elements containing selectable options and actions, this examples allows you to prompt the user with multiple actions in a single response. You can view the rendered Search Results with Actions example on the block kit builder website. Refer to the function named exampleSix for more information on building this block.