Build Better Slack Interfaces With Block Kit Builder (Full Transcript)

[00:00:00] Speaker 1: You want to learn how to build custom blocks in Slack? Watch this. Hello and welcome back to Slack School. My name is Mike Reynolds. I'm your host. I'm part of the Slack team here at Salesforce and today we are going to talk about blocks and BlockKit Builder. Blocks are the fundamental, well, building blocks of the Slack user interface. We have a lot of them that we can use and we have a really cool BlockKit Builder, which is a WYSIWYG editor. That means what you see is what you get. We're going to show you what your UI is going to look like and then we'll show you the code and then it's very easy to just kind of move things around or manipulate it. Let's get after it. To get started with BlockKit, the best way to do it is online in the BlockKit Builder. Let's take a look. I'm going to jump to app.slack.com forward slash block-kit-builder. The BlockKit Builder is, like I said a minute ago, a WYSIWYG editor. WYSIWYG stands for what you see is what you get. And that's exactly what we're going to get here. It's going to start you on the templates tab. I'm going to close that just so we can see a little bit more. These are some templates that you can choose. These are ready-made. They're available. You can click them and try them out if you want. You can see there's all sorts of different ones and they've got a lot of different templates over here for maybe you're doing a poll or maybe you're trying to do some type of expenses. There's stuff in here for that. But I just want to click on this builder for now. So the builder is where you're actually going to be able to do this editing. We've got the different blocks. And you can see that we've got a lot of different blocks. You can see here this is a, you know, for choosing where we want to go eat. Like you can choose which thing we want. And this is made up of smaller blocks. So, for example, this is an individual block, as is this line or this set of buttons. Each of these is its own individual unit or block. And we can assemble those blocks in pretty much any way. And we want, you'll notice on the side, we also have the actual code. So if I wanted to change something with what I have over here, I could just start typing here. As soon as I should do that, as soon as I've typed, you're going to see that in the visual editor that shows you the result of your block. Now, this is great if you're trying to learn. Because. If you make a mistake, you're going to immediately realize it. So if I do something like I take that away, I'm going to get a notification that, hey, this is a problem. You've got to put that back. We needed that. So it's a good way to learn and then understand exactly what the results are going to be. One of the things I really love about the Block Kit Builder is that it allows us to actually preview these in a very real way directly inside of Slack because I've logged in. Block Kit is aware of that, and it can connect into my Slack instances so that I can preview this right now without doing anything. All I've got to do is choose the appropriate workspace up here. I'm going to choose my demo environment and then I'm going to click this button that says preview in Slack. It's going to ask me what channel to do the preview in, and I'm going to say, how about my how about the approvals channel? So I'll send it there. Back in Slack, I can see the message that was sent, and it uses me to deliver this message. So this is exactly how I had things done before, and I can see this is not clickable here because we didn't make it clickable. It's got everything up here that was over there with my change, and then down at the bottom, I have my buttons. Now, each of these right now is currently just pointing. To Google, because this is a preview of what it look like. So the button needs to be valid, meaning it goes somewhere, but it doesn't. It's not connected to your app or anything like that. Let's talk about a couple of the other features that we can do inside of Block Kit Builder, and then we'll see what building things with blocks can do for the end user experience. First off, if I don't like what I've got, I can dump it all and clear it and then start from scratch. That's a nice way to do things if you want to see specifically what one small block is going to look like by itself. We can also flip to the mobile version of this, and we can change how we want the previews themselves to work. For now, I'm going to leave this at desktop. Let's go take a look at the templates and see how easy it is to use one of these. First, you can filter your templates. I'm going to say just leave it at all of them. And then let's say I wanted to use this template as a starting point. All I have to do is click it and then it brings me right over to it. This is an interesting carousel built on top of a simple message with a header. Pretty easy to use. So what is building a better UI with blocks actually amount to? Well, let's take a look at the approval app that we've spent a few episodes working on. If I jump back into Slack and then I run my approval app the way that it has been, I get a pretty simple modal that just asks me to choose a person and then say something. When I submit that, I get a pretty basic message back. It's got a couple of buttons, a little bit of form information, and then I can click on these and then I get a little bit of an update here on this line. And then I get another message saying that it was approved because that was delivered to me. But that UI is kind of boring and we could probably do better. Well, a little bit ago before I started filming, I asked Slackbot, I said, hey, Slackbot, how would you do this? And I gave Slackbot my code. Slackbot gave me some suggestions and went back and forth a couple of times. And then I took that code and I moved it back into my personal VS code. So that code is up here. Again, I'm not going to focus on the code itself. You can play with the code in the block kit builder to your heart's content. We're just going to look at the difference between boring and less boring. And that's basically what I said to Slackbot. I said, hey, let's kind of make this app a little bit more exciting. And we did. So I'm going to go ahead and push those changes. If you've been following along for the last few episodes, you'll be set up to make this kind of change too. So have a conversation with Slackbot, give it your app code, or try it on your own in the block kit builder, and then push it and see what it looks like. So immediately we can start to see the difference. I'm still choosing who do I want the approval to do? I still have a request. But now we've added priority with some color indicators. Those are just emojis. That's easy to use. Let's see what it looks like from the approver's perspective. Here, this was our old request up here, and this is the new approval request. We labeled it new so you could tell the difference. Smart thinking, Slackbot. That was Slackbot's idea, not mine. I can't take credit for that. It says who it's from, states that priority, says exactly when it was submitted. That's a fact that we totally ignored up here. And then I have the request and I've put these lines in here. Those are nice ways of dividing some information so that it's easier to just see and digest. I still have my two buttons here and when I click, oh I got a pop-up. That was really nice using this modal to bring my attention to it. Hey are you really sure? That was pretty easy to do with the block. I'm going to hit yes approve and I have this whole new large message here. Your request was approved. It was approved by. It's giving me a lot more information. It also sets up this whole thing about here's what the actual thing that was approved. If I've got multiple approvals and I just see that one of them was approved, that's not very helpful and that's what it used to be before. It was just a message that says your request was approved. Now it says your request was approved, who it was by, what the priority was, and what you've said. That's a lot better if you're an end user. Well there you have it. Building a that's a lot better if you're an end user. Well there you have it. Building a better user interface inside of Slack using blocks is as easy as anything. Block Kit Builder makes immediately seeing your changes really simple. We can see the code and we can learn what that code is doing by looking at the user interface real time. That's a really, really easy way to build something amazing. So what are you going to build? Tell me about it in the Slack community by going to slackcommunity.com and jumping into the Slack Slack community.com and jumping into the Slack Slack community.com and jumping into the Slack channel. Let me know what blocks you're going to build and what you're going to do next. Also feel free to let us know what you thought of the episode and what you want to see us do next. Don't forget to like and subscribe. We'll see you next time. Oh, hey. You looked great today. Is that a new haircut? It's nice. That's it. Thanks for watching. Don't forget to give us a thumbs up if you liked it and if you want to see more videos from us, let us know. The Blogger's ... What's his name? The Blogger's ... What's his name? The Blogger's ... What's his name? What's his name? Blot kit filter? I'm gonna have to talk.