How to create an awesome slack approval workflow

Slack is a very popular workplace place, to a point where now it’s become a verb — “Slack me if you need something!” — and there’s good reason for it. During these pandemic times, it’s so much more than just a chat app.

Today, we’ll explore how we can do even more with Slack Approvals. We’ll bring in Canonic and use the power of slack approvals to approve or disapprove our message. We want the ability that whenever a message is added to the database, its respective slack approval message is sent, based on the response, the same gets updated in the database.

Let’s dive in! 🚀

Step 1: Create necessary slack app & generate tokens

Let’s start with getting all the slack requirements in place. We have to create an app with Slack and generate its respective tokens.

For this step, we’ll follow the slack guides linked with the respective text as they’ll be the best source to get all these requirements.

Step 2: Starting with a slack integration workflow

Jump to Canonic and clone this sample project which already has slack integration added, or create one for yourself and move to the API section to manually add the slack integration for your createMessage API.

You will be asked to authenticate and add in a token (the one that we got in step 1) Once authorized you should have a green tick to reflect that.

Step 3: Slack payload creation

Now that we have our integration set up complete and attached to our createMessage API. Whenever we trigger this API, an approval message with the trigger message should be sent to slack.

For this, we need to add our payload to slack. For using this feature, we’ll use a slightly different payload than we usually do for a simple chat message. Our payload should look something like this:

{
    "text": "New approval request",
    "blocks": [
        {
            "type": "header",
            "text": {
                "type": "plain_text",
                "text": "New request",
                "emoji": true
            }
        },
        {
            "type": "section",
            "fields": [
                {
                    "type": "mrkdwn",
                    "text": {{ title }}
                },
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Approve"
                    },
                    "style": "primary",
                    "url": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Reject"
                    },
                    "style": "danger",
                    "url": "click_me_123"
                }
            ]
        }
    ]
}

Here, in place of click_me_123, we’ll add the URL for the respective API to get triggered when someone approves or disapproves it. For that, we’ll need to build a custom API. Let’s do that.

Step 4: Create custom API for approving/disapproving messages

We now create a custom API in Canonic to look for the query parameters and update the respective record. Create a new API by clicking on the + icon against the Endpoints tab.

Next, add details regarding the API.

Go to the Code tab and add the following code to find the id for the message and add in the approval or disapproval in the database. We use query parameters to fetch the details then do the processing.

module.exports = async function endpoint({ query }) {
  const { id, approved } = query
  return Message.findOneAndUpdate({ _id: id }, { $set: { approved: approved }}, { upsert: true })
}

Step 5: Update back the message

We deploy this project to get the API URL. Click on the top right corner saying deploy, then go to the docs to get its URL.

We replace **click_me_123** to*https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=false* in the danger button and replace the same with https://messages.can.canonic.dev/api/messages/approvalornot?id=1234&approved=true.

Now whenever a user will approve or disapprove, the following URL will get triggered saving the approval of the message in the database. This can be used in place of any Micro-service which is built is to handle slack integration or become a slack server for that business.

Hope this guide helps you make your day a little bit more productive!
Check out the sample project here

Conclusion

Thank you for reading this guide. If you happen to create any of these integrations, please remember to mention us on social media or drop us a line on our discord channel.

You can also check out our other guides here.

Join us on Discord to discuss or share with our community. Write to us for any support requests at support@canonic.dev. Check out our website to know more about Canonic.