Send Kudos to co-workers in Slack (10 min)

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!

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!

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

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.

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

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.

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

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.

Now let’s move to the next part!

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:

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:

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

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:

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!

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:

Now scroll up again and add a new field (using the blue Add a field button), the second field is configured like so:

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:

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.

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:

And this is it for this brick.

Now go ahead and test what you built by using the Quickbar shortcut

This long but super useful tutorial went over three important things: