Generating a Modal

[00:00:00]
>> So, let's then figure out how we're actually gonna generate this modal. So, this is gonna be another helper and it's gonna be called modal. And this helper is going to accept a few things that we call modal args, and that's gonna include a trigger ID, we're gonna have the ID itself.

[00:00:21]
We will have the title, submit text, which will default to be submit. Whoops, submit, and then we want the blocks that are gonna be displayed. So, the blocks will come out of our block utility that we just created. So, the first thing we're gonna send through is the trigger ID.

[00:00:38]
A trigger ID is something sent from Slack that lets us identify which interaction we're responding to. So, if two people were to run the command at once, this is so that we can disambiguate, trigger ID one needs the first response, trigger ID two needs a second, and so on.

[00:00:56]
Then we're gonna send in the view, this is the actual blocks and information we're gonna send back to the user. So, we'll send a type of modal then we're going to send a callback ID, which is how we identify what type of modal is being sent that's gonna have an ID.

[00:01:13]
The title is going to be type plain text and we'll include the text of whatever we defined as the title, For our submit button, we want type of plaintext again and a text of whatever our submit text is. And finally, we wanna pass through the blocks, these are the blocks that will actually appear in the modal, those are gonna be our inputs, select boxes, and so on.

[00:01:48]
So, now that we've got both the blocks builder and the modal builder, we are ready to return one of those from our slash command. So, we can head into our actual slash command handler here. And we're going to get a few more pieces out of our utility. We're gonna get blocks, we're gonna get modal and then down in here, we're gonna get rid of all of this part that we've done so far.

[00:02:23]
And instead, what we're gonna do is get a response out of the Slack API using the views dot open, which is how we send a modal. And we pass in our modal helper, so the ID is gonna be food fights modal and that just needs to be unique to you, it's an identifier that we will use.

[00:02:49]
Then we need to send in a trigger ID and the trigger ID is sent through Slack. So, we just grab that trigger ID out and then for blocks, we send in an array. And we're gonna put in blocks dot section and this one is gonna say, Let's give it a little, let's see, the discourse demands food drama, and then we'll make some bold text so send in your spiciest food takes so we can all argue about them and feel alive.

[00:03:33]
Close up our bold tag, okay? Then we're going to add another block, this is gonna be our input and this one is going to have an ID of opinion. It's gonna have a label of deposit your controversial food opinions here and then we're gonna have a placeholder and our placeholder is gonna be example, peanut butter and mayonnaise sandwiches are delicious.

[00:04:12]
That's a real food opinion held by a real person that's not me, initial value, we will set the payload dot text which is what somebody would type after the command, we'll show how this works in a minute. And if that's not set, then we'll set it to blank.

[00:04:36]
And then as a hint so that we can have something that doesn't disappear when you start typing, you can say what do you believe about food that, add an extra space in here, what do you believe about food that people find appalling, say it with your chest. And then we're gonna add in our select here.

[00:05:06]
So, let me blocks dot select and we're gonna set an ID. This is gonna be our spice level so we're gonna let people kind of identify how spicy their opinion is, set the label of how spicy is this opinion, and then we will set up a placeholder. And for a select, it's kind of like what shows when the select hasn't been used.

[00:05:36]
So, we're just gonna make it an instruction, select a spice level. And then for the options, we have an array and it's gonna be label. And the value, and these are the same, we probably could have simplified our utility, but I thought in a lot of cases you're gonna have a different value from what the label might be, so it was worth not making it the same.

[00:06:07]
And then we've got mild, medium, spicy, and we'll add a nuclear option in case you've got something really out there that you love about food, so then we can say if this, And we're missing let's see, Start collapsing things down and figure out what I missed, identifier expected, I have added an extra curly boy here, okay, so just to reiterate what happened there.

[00:06:53]
I had put a curly brace around this modal, but because the modal returns that object, we don't want that, we instead want this to be at the top level here and that will return the object that we wanna pass in as the body. And then spell response correctly and that'll clear up this other issue we'd had down here.

[00:07:16]
So, this now is a working modal hopefully so we can make sure our command is still running, it is, I'm going to open up Slack and let's head to our general channel. And now, we get a modal.