Build a Mutli-Select Menu with an External Data Source using Block Kit and Slack API
Front End Code (Including Manifest File): https://glitch.com/edit/#!/multi-sele...
Back End Code: https://glitch.com/edit/#!/wooden-fan...
This video walks developers on how to build a multi-select menu that has an external data source using Slack APIs and events.
So in this demo, I want to show you
exactly
how to how to use a multi-select menu
and basically use this to add tags.
So this could honestly, you know,
this could be anything
but the main idea is to autocomplete
whatever I'm typing in
and to have a back end that will be able
to search and return results
that is matching what I'm typing in.
So here is my frontend code,
and you can see it's
called Multi-Select F-E, and this is all.
I'm going to share this code with you all
so that you can and play with it.
But it's basically only about 92 lines.
And what we're doing is we're
subscribing to the App Home Open event
and basically, once we open, we're
going to publish this view and the View
is going to have the multi external select
and then one button, which will
will have the text submitted in it.
Once they hit that button,
it'll have this app action,
which will say submit button
clicked and logged all the values.
So again, if I type submit right here,
actually,
I need to configure the app really quick.
So and I'll make this very nice and easy.
Basically, we can go to Slack
API and click Create a new app,
and we'll use from App Manifest here
and we'll just pick your workspace.
And basically,
I have this Manifest YAML here,
and I'm just going to copy and paste it,
and I'll paste it in here and you can see.
So I'm going to make a couple of changes.
I'm just going to make this YouTube two so that you can differentiate from my other apps.
What I've done is
I've added the bot chat:write scope.
I subscribe to the App Home Open event,
that's that.
So we can open the app
and you can see that multi select
frontend glitch is the request URL
that we're using here.
And then again, we're doing interactivity.
You can see here and the request URL is
the same the multi select frontend glitch.
The only thing here is
we have this message menu options URL.
That's the backend for populating
the actual options of the menu.
Now, the only thing we have to do
is really three things
1. install your app to the workspace
and then 2.
grab your environmental variables
and add those into glitch.
So let's go ahead and install the app.
We'll click Allow.
Now my my app has a bot
token,
so let's go into OAuth & permissions
and we'll copy this bot token
and I'll go into my end and I'll
I'll add in this bot token.
Now we'll go back to basic information
and we'll grab this signing secret.
So that was actually my mistake.
I accidentally took the client secret
instead of the signing secret.
So let's go ahead and use that.
That's why
we're seeing some of those errors.
OK, now let's try this again if I refresh.
You can see that the app home is working,
and if I type in P-Y-T,
it should auto complete with Python.
Perfect. And if I hit submit,
we'll be able
to see that result on our logs.
So again, basically I showed you,
but someone clicked
and we see the value of Python there.
So yeah, I
everything is working as intended.
So now let me show you the back end code.
So here is the backend code.
And what we do is in App.route/slack/events
And then again, this is the URL, right?
If I do,
if I do share, here's the life site. All right.
So that's what I used for my slack events.
Basically,
what I do is I get the substring,
which is usually those three
characters that I type in.
And here is my hardcoded
external data source.
So you can imagine, you know,
looking up in your database
or doing an API, call
to your external service
and populating an array right
where you have all these possible options,
where your user
would start typing in and your menu
would autocomplete that right.
And for me, it's only these four things,
and I just want to make it
as simple as possible.
So that's why I do this.
but anyways, for i in range
We're going to look for the substring.
So if are what we typed in those
first three characters
is in the name array,
which is basically our data source.
Then we're going to match it
and have that be the option.
Otherwise, we're just going to let
whatever the user typed in.
We're going to let them add that.
And here's
where we make our response of ATP 200
and where we set the content
type two application JSON. So that's more or less it.
You can go ahead and use this code. I'll have all the code
linked in the description,
but basically, now you understand
how to use this multi select menu and have this pretty dynamic and powerful
filtering mechanism for that.
When your user starts typing
and you can kind of autocomplete and
and have a great,
delightful user experience.
