Week 2 - Githubissues

Block Kits and Actions

Introduction to BlockKits and Actions in the Slack API.

If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week2/blog.md

Block Kits are a more advanced way of sending messages through an app. In this issue, you will build an app that uses block kits. to interact with users.

Reading up

You will need to do some research on block kits in order to understand how they work. Read the following documentation for more guidance:

Making a stack of blocks: https://api.slack.com/block-kit/building
Interactivity in blocks: https://api.slack.com/block-kit/interactivity
Block types: https://api.slack.com/reference/block-kit/blocks

Actions

An action is a way to listen to events in Slack. Instead of listening for something that generally happens, you can listen for something that a user does in the workspace. Below is a basic example of an action:

app.action('<event_id>', async ({ body, ack, <any other functions>}) => {
  // Acknowledge the action
  await ack();
});

One thing you always have to do in an action is aknowledge that the event occurred. Afterwards, you can use the payload from the action for your own purposes.

Building Your App

Now it's time to make a block kit yourself! Your goal will be to write an app that will listen for the word 'hello' in a workspace's channels, then respond in the same channel announcing that who person said hello. The message should include a block kit with a button saying 'click me'. If someone clicks the button, then the app announces that a person clicked the button in a regular message.

Refer to the links above and this example of a block kit in a function call:

await say({
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "plain_text",
                "text": "This is a plain text section block.",
                "emoji": true
            }
        }
    ]
});

Hint: Note in the template that a block can have an event id. This means that you can listen for events within the block (i.e. a button being clicked)

After you have finished, make sure to commit any file changes you made. To do this, please create a branch off of the master called week(x) with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of week(x) and call it week(x)-1.2 (with 1.2 being the step you're on). Then create a Pull Request between week(x) and week(x)-1.2. After reviewing you're PR or having another user review it, merge you're work and continue.

REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a Pull Request with your work from week(x) to master and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.

Building an App with Block Kits and Actions

Use BlockKits and Actions to make a Slack App.

Note: Before you start, make sure to create your app with the scopes and events for messaging in a channel.

Creating a Message

The first method you will need to use is .message(). This method will help you listen for an incoming message of your choice. Below is the method signature for .message():

app.message('<incoming_message>', async ({ message, say }) => {
});

Copy and paste this code with the right incoming message parameter. Within the function, you will write the actual message using say() to the channel where the event was triggered. Precede this function call with await, which is an expression in Javascript that forces the function to wait until a promise is settled. In this case, the promise is that the event occurs. Your code should look like this:

app.message('<incoming_message>', async ({ message, say }) => {
    await say({
    });
});

Creating a Block Kit

Within the say() function call, you will create a block to present the message and block nicely. The first block will be a text section, something like 'hello'. The second will be the button. Since the text will be the main section of the block kit, the button will be considered an accessory, which needs to be specified in the block.

blocks: [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": `Hey there <@${message.user}>!`
        },
        "accessory": {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Click Me"
          },
          "action_id": "button_click"
        }
      }
    ]

Besides that distinction, the creation of both a button and a section are almost the same. However, the button can also have an action property, which means that when the user interacts with it, you are able to access a payload with the information for the event. In this case, the the app used an action called "button_click". This name is completely arbitrary, but is clear on the type of event that occurred.

The last parameter for the say() function is a text in case the block does not work.

Creating an Action

Since the button in your message has an action, you will need to acknowledge the event. This will require another function, .action().

app.action('button_click', async ({ body, ack, say }) => {
});

The function signature includes the action id that you created for the button block. All that is left in this function is to aknowlege the action and then send a message:

await ack();
await say(`<@${body.user.id}> clicked the button`);

Test your app and make sure everything works. If you need any help, you can ask either of your mentors.

emsesc / slackappstest

Week 2 #6