DEV Community

Cover image for CircleCI Slack Orb Custom Template
Kyle Foo
Kyle Foo

Posted on • Edited on

CircleCI Slack Orb Custom Template

Hey there, how's CircleCI treating you? If you are using it as your CI/CD tool, I'm sure there is need for Slack notifications reporting the status to a 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: "Web Production"
Enter fullscreen mode Exit fullscreen mode

Slack notification results in:
Alt Text

Top comments (0)