DEV Community

loading...
Cover image for CircleCI Slack Orb Custom Template

CircleCI Slack Orb Custom Template

Kyle Foo
Late for church
Updated on ・2 min read

Hey there, how's CircleCI treating you? If you are using it as your CI/CD tool, I'm sure there is need of Slack notifications for the deployment status to report into Slack channel. There are some default templates like basic_fail_1 and success_tagged_deploy_1 by CircleCI/Slack Orb for instant usage, but you may also provide custom template if u dislike the default template format.

The approach for template customization here is to include more informational tags in the notification message. In addition, we want it to be a reusable template and used by multiple jobs in our pipeline. We can do that with commands in the CircleCI's config.yml. Notice the << parameters.env >> will be a dynamic input string.

commands:
  notify-success:
    parameters:
      env:
        type: string
        default: "env"
    steps:
      - slack/notify:
          event: pass
          custom: |
            {
              "text": "CircleCI job succeeded!",              
              "blocks": [
                {
                  "type": "header",
                  "text": {
                    "type": "plain_text",
                    "text": "Job Successful. :tada:",
                    "emoji": true
                  }
                },
                {
                  "type": "section",
                  "fields": [
                    {
                      "type": "mrkdwn",
                      "text": "*Env*: << parameters.env >>"
                    },
                    {
                      "type": "mrkdwn",
                      "text": "*Job*: ${CIRCLE_JOB}"
                    }
                  ]
                },
                {
                  "type": "section",
                  "fields": [
                    {
                      "type": "mrkdwn",
                      "text": "*Project*: $CIRCLE_PROJECT_REPONAME"
                    },
                    {
                      "type": "mrkdwn",
                      "text": "*Branch*: $CIRCLE_BRANCH"
                    }
                  ]
                },
                {
                  "type": "actions",
                  "elements": [
                    {
                      "type": "button",
                      "text": {
                        "type": "plain_text",
                        "text": "View Job"
                      },
                      "url": "${CIRCLE_BUILD_URL}"
                    }
                  ]
                }
              ]
            }
Enter fullscreen mode Exit fullscreen mode

To use commands in your jobs, for example:

jobs:
  deploy-mobile:
    docker:
      - image: 'cimg/node:15.14.0'
    resource_class: large
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: yarn
          app-dir: ./mobile
          override-ci-command: yarn install --frozen-lockfile
          with-cache: true
      - run: yarn deploy:mobile
      - notify-success:
          env: "Mobile Staging"
  deploy-web:
    docker:
      - image: 'cimg/python:3.6.11-node'
    resource_class: large
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: yarn
          app-dir: ./webapp
          override-ci-command: yarn install --frozen-lockfile
          with-cache: true
      - run: yarn deploy:web
      - notify-success:
          env: "WebApp Production"
Enter fullscreen mode Exit fullscreen mode

Slack notification results in:
Alt Text

Discussion (0)