Overview

This article will teach you how to build a Slack Block UI with dynamic inputs in Okta Workflows.

Solution

This automation sends this message to Slack and dynamically inserts the two email addresses.

Slack message.

The Slack Block UI JSON for this message looks like this. The dynamic section has two email addresses: carrie@okta.com and saul@okta.com.

[
  {
    "type": "rich_text",
    "elements": [
      {
        "type": "rich_text_section",
        "elements": [
          {
            "type": "text",
            "text": "The project update is moving through the approval pipeline.\n\n"
          },
          {
            "type": "text",
            "text": "The next step requires action from:",
            "style": {
              "bold": true
            }
          },
          {
            "type": "text",
            "text": "\n\n"
          }
        ]
      },
      {
        "type": "rich_text_list",
        "style": "bullet",
        "indent": 0,
        "border": 0,
        "elements": [
          {
            "type": "rich_text_section",
            "elements": [
              {
                "type": "text",
                "text": "carrie@okta.com"
              }
            ]
          },
          {
            "type": "rich_text_section",
            "elements": [
              {
                "type": "text",
                "text": "saul@okta.com"
              }
            ]
          }
        ]
      },
      {
        "type": "rich_text_section",
        "elements": [
          {
            "type": "text",
            "text": "\n"
          },
          {
            "type": "link",
            "url": "https://example.com/tasks/12345",
            "text": "Click here to view the pending task."
          }
        ]
      }
    ]
  }
]

The automation has two flows:

1. Build Slack Block UI: builds the complete Slack Block UI with the dynamic section and uses the Slack connector to send a message.
2. Build User Block – Helper: builds a Slack Block for each email address.

Build Slack Block UI flow

This flow builds the complete Slack Block UI with the dynamic section and uses the Slack connector to send a message.

Flow to send a message to Slack.

How the flow works

1. The Text-Compose card creates JSON with dynamic data to insert. This is the input.
2. The JSON-Parse card creates a JSON object from the input.
3. The List-Map card takes the input, processes each email, and returns a JSON list in Slack’s Block UI format.
   The JSON list from the List-Map card:
   

   [
     {
       "elements": {
         "type": "rich_text_section",
         "elements": [
           {
             "type": "text",
             "text": "carrie@okta.com"
           }
         ]
       }
     },
     {
       "elements": {
         "type": "rich_text_section",
         "elements": [
           {
             "type": "text",
             "text": "saul@okta.com"
           }
         ]
       }
     }
   ]

4. Before inserting the emails into the Slack Block UI JSON, you need to remove the elements key. The List-Pluck card creates a list with only the elements values:
   

   [
     {
       "type": "rich_text_section",
       "elements": [
         {
           "type": "text",
           "text": "carrie@okta.com"
         }
       ]
     },
     {
       "type": "rich_text_section",
       "elements": [
         {
           "type": "text",
           "text": "saul@okta.com"
         }
       ]
     }
   ]

5. The JSON-Stringify card converts JSON to a string value.
6. The Text-Compose card inserts the input JSON block (email addresses) into the complete Slack Block UI JSON.
7. The JSON-Parse card parses the complete message into a JSON object.
8. The Object-Get extracts everything under the blocks key from the JSON object. This step is required since the flow uses the Slack-Send Message to Channel action, which has the Blocks field (it requires what’s inside the block).

Build Slack Block UI – Helper flow

This flow takes email input and creates a JSON object for it.

Slock Block UI helper flow.

How the flow works

1. The flow’s input is an email address.
2. The Object-Construct card creates a JSON object.
   

   {
     "type": "text",
     "text": "saul@okta.com"
   }

Related References

• How to Integrate Okta Workflows and Slack with Webhook and Slash Command
• Sending Interactive Messages Using Slack’s Block Kit from Okta Workflows