If you want to publicly recognize your team-mates’ achievements in a super fashionable way, what’s a better way than doing so using the power of PixieBrix?
Check this video out to understand how it works!
Integration Preface
This tutorial assumes you have configured a Slack integration. If you haven’t here’s a short tutorial on how you can do that: https://docs.pixiebrix.com/519952f1528d4080acc9504039bdd1d8
🤠 Let’s start building!
Step 0 - Add the Quick Bar brick
Open the PixieBrix Page Editor and from the right hand side click the Add menu
Then select the Quick Bar trigger brick
We’re going to call this mod Give Kudos
, this is the value I will set the Name to.
The action title will be named Give Kudos - this is the name of what this mod will be labeled as when you invoke the Quick Bar mod.
We’ll also want to set Sites to All URLs
Step 1 - Add the PixieBrix user profile reader brick
Next we’ll go ahead and look for a brick called “PixieBrix user profile reader brick”
This brick will pull information from the current logged in profile. We’re going to use this information in the next brick.
This brick doesn’t have any configuration settings we want to set.
Step 2 - Add the Slack Get User by Email brick
Now we’re going to add the Slack Get User By Email brick. We’re doing this because we want to pull your user information from Slack, specifically your Slack’s user id. By passing your email address into this brick we will get a lot of information regarding your user account registered on Slack.
Under the email field we’re going to specify @profile.email
- this is the data point from the previous brick
We’re also going to rename the output variable of this brick to @userByEmail
Step 3 - Add the Slack Get Channels
Now we’re going to add the Slack Get Channels brick. We’re doing this because we want to pull Slack data, specifically your list of Slack channels.
We’re also going to rename the output variable of this brick to @channels
Not much else to configure other than making sure we’re exclusding archived channels (blue switch on!) and to make sure the integration is selected - in my case PixieBrix - Private.
Step 4 - Add the Slack Get Users brick
Let’s add the Slack Get Users brick. This brick returns all users in our Slack’s workspace. The data returned includes their name, userId and whether they’re bot users or no (bot users are mostly apps and integrations users). We’re going to use this data to populate a dropdown menu from where to select which Slack user we want to give kudos to.
For sanity let’s rename this output variable to @allSlackUsers
Step 5 - Add the jq - JSON processor brick
map(select( .is_bot == false and .username != "slackbot" ) ) | map({"title": .name , "const": .id })
In this next step we’re going to add the jq - JSON processor brick to filter some data out from the brick we’ve used before in step 4.
The idea in this step is that the Slack API always returns all the users that are available in your workspace, even the ones that are not human 😨
(By non human, I mean bot users - these are the bot profiles that message you things like the Github bot, Trello bot etc.)
Because we’re doing a Kudos mod, we strongly believe that only humans should receive kudos - therefore in this step we’re filtering out ALL the bots!
We’re going to configure this brick to have its output variable as @botsMod
We’re going to use this brick to modify the data that we received from the previous brick and manipulate it in a way that can be fed to the next brick.
Under the data field we’re going to write @allSlackUsers
Now the fun part: We’re going to use a filter to remove the “bot users” from the object.
Lucky for us the Slack API is kind enough to return a field “is_bot: true”
when a bot is detected.
We can use this to our advantage, we will use jq to filter this out
Thus, let’s put the following jq expression.
. | (map(select(.is_bot == false)))
Now let’s move to the next part!
Step 6 - Add the jq - JSON processor brick
In this step, we’re once again adding the jq - JSON Processor brick again
Name the output of this brick as @usersMod
This time, we want to create an object to map users’ names to ids - using a key:value
approach.
We want the resulting object to look like this:
{ “users”: [ { “const”: “U016Y2KJQ4T”, “title”: “Joey”] }
We’re going to construct an array that contains multiple objects, each object inside this array has a “title” and a “const” value.
jq (indeed, it’s so powerful) can be used to achieve this.
In the page editor let’s set the filter field to this expression:
{"users":.users|map({const:.id,title:.name})}
and under the data field we’re going to pass the data from the previous brick but we need to change it a little:
We’re going to change the field value to Key:Value from the default of variable. Then we’re going to set the Property name to: users
and set the Value to:@botsMod
Everything should then look like this
Step 7 - Add the jq - JSON processor brick
We’re adding the jq brick for the last time (in this tutorial).
This time we need to create a list of channels that maps consistently to the next brick.
First and foremost - we need to rename our output variable to @channelsMod
Then we’re going to apply a filter - to modify the data we want.
This filter will look like this:
{"channels":.channels|(map(.name))}
This is what this filter does, it creates an object whose key name is “channels” and then an array of values: for values we’re feeding it .channels, but because we’re using the pipe sign | we’re modifying the data contained in .channels to only return the name - basically we’re filtering out everything that isn’t the channel name. We’re doing this because Slack needs a channel name as its input to figure out where to send the Kudos message once this mod runs.
Under data we’re going to pass a Key:Value field, whose property name is “channels” and whose value is “@channels”
This means we’re gettin the channels from the brick specified on step 4
🎉 The result...we will use in the next step!
Step 6 - Add the Show a modal or sidebar form brick
In this step we’re going add a modal to the mod, this is in fact the first and last user interface element that we’re going to use in this mod, so prepare yourself because it will be quite a lot of configuration.
The aim here is to give the user triggering the mod a way to select which user from the Slack workspace to congratulate and a way to customize the message that will be displayed in Slack.
Let’s get configuring!
First we’re going to set Form Title to Give some Kudos! 🎉
(yes including the emoji!)
Now we’re going to configure 3 fields so go ahead let’s configure them together.
The first field is configured like so:
- Name:
channel
- Label:
Channel
- Input Type:
Dropdown
- Default value:
kudos
- Options:
@channelsMod.channels
- Required field:
true
(switch on) - Canceleable:
true
Now scroll up again and add a new field (using the blue Add a field button), the second field is configured like so:
- Name:
user
- Label:
👥 Recipient
- Field Description:
Who to give kudos?
- Input Type:
Dropdown with Labels
- Options:
@usersMod.users
- Required field:
true
(switch on) - Canceleable:
true
Now scroll up again and add a new field (using the blue Add a field button)
We’re going to create another field and configure it as:
- Name:
quote
- Label:
📑 Quote
- Field Description:
This will be quoted in the Slack message
- Input Type:
Paragraph Text
- Default Value:
{{@input.selectionText}}
This will make the default value for this field be the page’s URL, in which you’ve triggered this mod - Require Field:
false
- Cancelable?:
true
That’s it, three fields have been created!
Finally, we’ll configure the field called Submit Button Text and we’re gonna write in this one Send Kudos 💜
Alright let’s recap:
The configuration for the various parts of the modal is now finished. We’re made a modal with 3 user-input fields, each of these fields will have available information from various bricks used in this mod, and we’re making the fields informative by adding contextual information around it.
Step 7 - Add the Slack Send Richly-Formatted Message brick
Let’s go ahead and configure this next brick, after adding it - it’s the Slack Send Richly-Formatted Message brick.
This brick allows us to send data to Slack - it takes many parameters so let’s start configuring it!
First of all the channel we’re going to be sending the kudos to needs to be specified: in our Slack workspace this channel is called @form.channel
, - the value chosen in the previous modal.
We also enabled link_names to true
Now for attachments, this is where it gets interesting.
We add a K:V item, by clicking the blue Add Item button.
Here is how I will configure it:
- text:
@form.quote
- pretext:
:clap: Kudos to<@{{@form.user}}>!
- fallback:
:clap: Kudos to<@{{@form.user}}>!
And this is it for this brick.
Now go ahead and test what you built by using the Quickbar shortcut
Conclusions
This long but super useful tutorial went over three important things:
- How to use the most common Slack bricks to do operations such as retrieving users from your Slack workspace
- How to use Oauth integration to authenticate in 3rd party platforms
- How to build an awesome PixieBrix mod step by step!