A new design approach

How to structure a workflow step for your Slack app

Illustration and design by Josh Holinaty.

Adding a workflow step (or two) to your app helps people automate their work, by connecting their Slack workflows to your service — now available in developer open beta.

The future of workflows

Workflow Builder for Slack allows anyone to automate routine process and communication — all in a matter of minutes. Once triggered, a workflow runs a series of steps, like collecting form responses and sending Slack messages.

Now, Workflow Builder is more extensible than ever, because steps from apps can provide new functionality. They can add new features and allow builders to integrate with their everyday tools outside of Slack, all without writing a single line of code.

Let’s walk through how you (as a Slack app developer) can design your steps, so builders can create powerful workflows that make Slack users’ lives simpler, more pleasant, and more productive.

This guide is paired best with our steps from apps demo and tutorial, which walks through the technical details of workflow development.

How to think about designing your step

First, decide whether a builder needs to authenticate an account for your step to work. If it does, design that step configuration view first, since it will be the first part of step setup. Remove anything in that view that isn’t about connecting the necessary account, so that it’s clear how to proceed.

Then design the main step configuration experience, which should always show which account, if any, is connected and a way to disconnect it. This way, builders are clear on which account is being affected, or which account the step is acting on behalf of.

You’ll want to design your step to be as flexible as possible, so builders can leverage all of Workflow Builder’s features. For example:

• Unbundle individual actions that are part of your core user flows. Instead of a workflow step that shows a form to a user and later creates a record based on that form, configure the step to simply generate a record. This allows builders to create more custom workflow forms. Creating, fetching, updating, and deleting your app’s primary record (i.e. tasks, tickets, leads, etc.) are all great candidates for individual steps.
• Enable variable data from previous steps into the configuration of your step.
• Design your step to output variables for later use in a workflow, especially when creating a new record (i.e. a link to a record and its name).
• Ask builders where to send messages instead of assuming. Don’t share to a channel automatically. Instead, let them choose where to send your precomposed message — or allow them to disable sending that message at all. This way, they can send their own message with variables from your step later in the workflow.

Remember to think of a specific step’s usefulness in the context of a complete workflow. That is, think of your step as a single action on the road to what someone wants to accomplish in Slack. Never assume a builder has prior knowledge of your step (or what it’s doing behind the scenes). You should not only think about your app’s steps in isolation, but also how different steps can build upon one another.

If it’s difficult to name your step in a clear and concise way, that’s a sign that you should consider splitting it into multiple steps with simpler names and a more specific purpose. As an added benefit, your configuration UI will get simpler. For example, instead of a step that creates a document and adds content, consider two separate steps that accomplish each action, respectively.

A real-world process to automate

Here’s a simple example.

Let’s imagine I’m a designer at a tech company (easy!), where all text must be reviewed by the writing team before I can release my latest designs to the world.

My company uses an internal app for project management called Task Manager, so I typically navigate to a website and create a task (including supplemental links and context) for the writing team to review my design.

I want to automate this process for my entire design team, so it’s a perfect Workflow Builder use case. Luckily, the development team that built Task Manager took advantage of the open beta and coded a workflow step for this Slack integration, which makes this easy! 🎉

Building a workflow

My workflow for requesting a review could look like this:

A workflow for requesting a final design review

This workflow adds “Request a review” to the ⚡️shortcuts menu in the #design-team channel. When selected, the workflow will prompt users to submit project information, then automatically create a task in Task Manager for review. It then sends a message with the variable data from the Task Manager workflow step.

Configuring a workflow step

Let’s take a look at how the Task Manager developers structured their step to make this workflow possible.

A view of the Task Manager step after it’s added to a workflow

You’ll notice that in each text field, I can use variables from previous workflow steps through “Insert a variable.” This is how I can send data from the form step to the Task Manager step. 👇🏾

The new “create a task” step versus the final configured step

As configured above, when someone runs the workflow and completes the form, Workflow Builder will send the final values of the selected variables to the Task Manager app. Voilà! Using a step from a Slack app, I’ve automated the process of requesting reviews for design projects.

Getting started

To spin up your own prototype of this example, you can follow our steps from apps tutorial. Cheers and happy building!

We want your questions and feedback! Email us at feedback@slack.com.