Slack Next-gen Platform - Button Interactions

$ slack create? Select a template to build from:  Hello World  A simple workflow that sends a greeting  Scaffolded project  A solid foundational project that uses a Slack datastore> Blank project  A, well.. blank project  To see all available samples, visit github.com/slack-samples.

$ cd stoic-wolf-344$ slack run? Choose a workspace  seratch  T03E94MJU   App is not installed to this workspaceUpdating dev app install for workspace "Acme Corp"  Outgoing domains   No allowed outgoing domains are configured   If your function makes network requests, you will need to allow the outgoing domains   Learn more about upcoming changes to outgoing domains: https://api.slack.com/future/changelog  seratch of Acme CorpConnected, awaiting events

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";export const workflow = DefineWorkflow({  callback_id: "demo-workflow",  title: "Demo Workflow",  input_parameters: {    properties: {      channel_id: { type: Schema.slack.types.channel_id },      user_id: { type: Schema.slack.types.user_id },    },    required: ["channel_id", "user_id"],  },});// Send a message via SendMessage + interactive_blocksconst sendMessageStep = workflow.addStep(Schema.slack.functions.SendMessage, {  channel_id: workflow.inputs.channel_id,  message: `Do you approve <@${workflow.inputs.user_id}>'s time off request?`,  // Simplified blocks for interactions  interactive_blocks: [    {      "type": "actions",      "block_id": "approve-deny-buttons",      "elements": [        {          type: "button",          action_id: "approve",          text: { type: "plain_text", text: "Approve" },          style: "primary",        },        {          type: "button",          action_id: "deny",          text: { type: "plain_text", text: "Deny" },          style: "danger",        },      ],    },  ],});// Handle the button click events on interactive_blocksimport { def as handleInteractiveBlocks } from "./handle_interactive_blocks.ts";workflow.addStep(handleInteractiveBlocks, {  // The clicked action's details  action: sendMessageStep.outputs.action,  // For further interactions on a modal  interactivity: sendMessageStep.outputs.interactivity,  // The message's URL  messageLink: sendMessageStep.outputs.message_link,  // The message's unique ID in the channel  messageTs: sendMessageStep.outputs.message_ts,});import { Trigger } from "deno-slack-api/types.ts";const trigger: Trigger<typeof workflow.definition> = {  type: "shortcut",  name: "Interaction Demo Trigger",  workflow: `#/workflows/${workflow.definition.callback_id}`,  inputs: {    channel_id: { value: "{{data.channel_id}}" },    user_id: { value: "{{data.user_id}}" },  },};export default trigger;

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";import { FunctionSourceFile } from "https://deno.land/x/[email protected]/mod.ts";export const def = DefineFunction({  callback_id: "handle_interactive_blocks",  title: "Handle button clicks in interactive_blocks",  source_file: FunctionSourceFile(import.meta.url),  input_parameters: {    // The input values from the SendMessage function's interactive_blocks    properties: {      action: { type: Schema.types.object },      interactivity: { type: Schema.slack.types.interactivity },      messageLink: { type: Schema.types.string },      messageTs: { type: Schema.types.string },    },    required: ["action", "interactivity"],  },  output_parameters: { properties: {}, required: [] },});export default SlackFunction(  def,  // When the workflow is executed, this handler is called  async ({ inputs, client }) => {    if (inputs.action.action_id === "deny") {      // Only when the click is on "Deny", this function opens a modal      // to ask the reason of the denial      const response = await client.views.open({        interactivity_pointer: inputs.interactivity.interactivity_pointer,        view: buildNewModalView(),      });      if (response.error) {        const error = `Failed to open a modal due to ${response.error}`;        return { error };      }      // Continue the interactions on the modal      return { completed: false };    }    return { completed: true, outputs: {} };  },)  // Handle the button click events on the modal  .addBlockActionsHandler("clear-inputs", async ({ body, client }) => {    const response = await client.views.update({      interactivity_pointer: body.interactivity.interactivity_pointer,      view_id: body.view.id,      view: buildNewModalView(),    });    if (response.error) {      const error = `Failed to update a modal due to ${response.error}`;      return { error };    }    return { completed: false };  })  // Handle the data submission from the modal  .addViewSubmissionHandler(    ["deny-reason-submission"],    ({ view }) => {      const values = view.state.values;      const reason = String(Object.values(values)[0]["deny-reason"].value);      if (reason.length <= 5) {        console.log(reason);        const errors: Record<string, string> = {};        const blockId = Object.keys(values)[0];        errors[blockId] = "The reason must be 5 characters or longer";        return { response_action: "errors", errors };      }      return {};    },  )  // Handle the events when the end-user closes the modal  .addViewClosedHandler(    ["deny-reason-submission", "deny-reason-confirmation"],    ({ view }) => {      console.log(JSON.stringify(view, null, 2));    },  );/** * Returns the initial state of the modal view * @returns the initial modal view */function buildNewModalView() {  return {    "type": "modal",    "callback_id": "deny-reason-submission",    "title": { "type": "plain_text", "text": "Reason for the denial" },    "notify_on_close": true,    "submit": { "type": "plain_text", "text": "Confirm" },    "blocks": [      {        "type": "input",        // If you reuse block_id when refreshing an existing modal view,        // the old block may remain. To avoid this, always set a random value.        "block_id": crypto.randomUUID(),        "label": { "type": "plain_text", "text": "Reason" },        "element": {          "type": "plain_text_input",          "action_id": "deny-reason",          "multiline": true,          "placeholder": {            "type": "plain_text",            "text": "Share the reason why you denied the request in detail",          },        },      },      {        "type": "actions",        "block_id": "clear",        "elements": [          {            type: "button",            action_id: "clear-inputs",            text: { type: "plain_text", text: "Clear all the inputs" },            style: "danger",          },        ],      },    ],  };}

import { Manifest } from "deno-slack-sdk/mod.ts";// Add thisimport { workflow as InteractiveBlocksDemo } from "./interactive_blocks_demo.ts";export default Manifest({  name: "stoic-wolf-344",  description: "Demo workflow",  icon: "assets/default_new_app_icon.png",  workflows: [InteractiveBlocksDemo], // Add this  outgoingDomains: [],  botScopes: ["commands", "chat:write", "chat:write.public"],});

$ slack run? Choose a workspace  seratch  T03E94MJU   stoic-wolf-344 A04G9S43G2KUpdating dev app install for workspace "Acme Corp"  Outgoing domains   No allowed outgoing domains are configured   If your function makes network requests, you will need to allow the outgoing domains   Learn more about upcoming changes to outgoing domains: https://api.slack.com/future/changelog  seratch of Acme CorpConnected, awaiting events

$ slack triggers create --trigger-def interactive_blocks_demo.ts? Choose an app  seratch (dev)  T03E94MJU   stoic-wolf-344 (dev) A04G9S43G2K Trigger created   Trigger ID:   Ft04HCF4SSBB   Trigger Type: shortcut   Trigger Name: Interaction Demo Trigger   URL: https://slack.com/shortcuts/***/***$

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";import { FunctionSourceFile } from "https://deno.land/x/[email protected]/mod.ts";export const def = DefineFunction({  callback_id: "send_interactive_message",  title: "Send a message with interactive blocks",  source_file: FunctionSourceFile(import.meta.url),  input_parameters: {    properties: {      user_id: { type: Schema.slack.types.user_id },      channel_id: { type: Schema.slack.types.channel_id },    },    required: ["user_id", "channel_id"],  },  output_parameters: { properties: {}, required: [] },});export default SlackFunction(  def,  // When the worfklow is executed, this handler is called  async ({ inputs, client }) => {    const text = `Do you approve <@${inputs.user_id}>'s time off request?`;    // Block Kit elements (https://api.slack.com/block-kit)    const blocks = [      {        type: "section",        text: { type: "mrkdwn", text },      },      { type: "divider" },      {        type: "actions",        block_id: "approve-deny-buttons",        elements: [          {            type: "button",            action_id: "approve",            text: { type: "plain_text", text: "Approve" },            style: "primary",          },          {            type: "button",            action_id: "deny",            text: { type: "plain_text", text: "Deny" },            style: "danger",          },        ],      },    ];    const response = await client.chat.postMessage({      channel: inputs.channel_id,      text,      blocks,    });    if (response.error) {      console.log(JSON.stringify(response, null, 2));      const error = `Failed to post a message due to ${response.error}`;      return { error };    }    // To continue with this interaction, return false for the completion    return { completed: false };  },)  // Handle the "Approve" button clicks  .addBlockActionsHandler("approve", async ({ body, client, inputs }) => {    const text = "Thank you for approving the request!";    const response = await client.chat.update({      channel: inputs.channel_id,      ts: body.container.message_ts,      text,      blocks: [{ type: "section", text: { type: "mrkdwn", text } }],    });    if (response.error) {      const error = `Failed to update the message due to ${response.error}`;      return { error };    }    return { completed: true, outputs: {} };  })  // Handle the "Deny" button clicks  .addBlockActionsHandler("deny", async ({ body, client, inputs }) => {    const text =      "OK, we need more information... Could you share the reason for denial?";    const messageResponse = await client.chat.update({      channel: inputs.channel_id,      ts: body.container.message_ts,      text,      blocks: [{ type: "section", text: { type: "mrkdwn", text } }],    });    if (messageResponse.error) {      const error =        `Failed to update the message due to ${messageResponse.error}`;      return { error };    }    const modalResponse = await client.views.open({      interactivity_pointer: body.interactivity.interactivity_pointer,      view: buildNewModalView(),    });    if (modalResponse.error) {      const error = `Failed to open a modal due to ${modalResponse.error}`;      return { error };    }    return { completed: false };  })  // Handle the button click events on the modal  .addBlockActionsHandler("clear-inputs", async ({ body, client }) => {    const response = await client.views.update({      interactivity_pointer: body.interactivity.interactivity_pointer,      view_id: body.view.id,      view: buildNewModalView(),    });    if (response.error) {      const error = `Failed to update a modal due to ${response.error}`;      return { error };    }    return { completed: false };  })  // Handle the data submission from the modal  .addViewSubmissionHandler(    ["deny-reason-submission"],    ({ view }) => {      const values = view.state.values;      const reason = String(Object.values(values)[0]["deny-reason"].value);      if (reason.length <= 5) {        console.log(reason);        const errors: Record<string, string> = {};        const blockId = Object.keys(values)[0];        errors[blockId] = "The reason must be 5 characters or longer";        return { response_action: "errors", errors };      }      return {};    },  )  // Handle the events when the end-user closes the modal  .addViewClosedHandler(    ["deny-reason-submission", "deny-reason-confirmation"],    ({ view }) => {      console.log(JSON.stringify(view, null, 2));    },  );/** * Returns the initial state of the modal view * @returns the initial modal view */function buildNewModalView() {  return {    "type": "modal",    "callback_id": "deny-reason-submission",    "title": { "type": "plain_text", "text": "Reason for the denial" },    "notify_on_close": true,    "submit": { "type": "plain_text", "text": "Confirm" },    "blocks": [      {        "type": "input",        // If you reuse block_id when refreshing an existing modal view,        // the old block may remain. To avoid this, always set a random value.        "block_id": crypto.randomUUID(),        "label": { "type": "plain_text", "text": "Reason" },        "element": {          "type": "plain_text_input",          "action_id": "deny-reason",          "multiline": true,          "placeholder": {            "type": "plain_text",            "text": "Share the reason why you denied the request in detail",          },        },      },      {        "type": "actions",        "block_id": "clear",        "elements": [          {            type: "button",            action_id: "clear-inputs",            text: { type: "plain_text", text: "Clear all the inputs" },            style: "danger",          },        ],      },    ],  };}

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";export const workflow = DefineWorkflow({  callback_id: "demo-workflow",  title: "Demo Workflow",  input_parameters: {    properties: {      channel_id: { type: Schema.slack.types.channel_id },      user_id: { type: Schema.slack.types.user_id },    },    required: ["channel_id", "user_id"],  },});import { def as sendInteractiveMessage } from "./send_interactive_message.ts";workflow.addStep(sendInteractiveMessage, {  user_id: workflow.inputs.user_id,  channel_id: workflow.inputs.channel_id,});import { Trigger } from "deno-slack-api/types.ts";const trigger: Trigger<typeof workflow.definition> = {  type: "shortcut",  name: "Interaction Demo Trigger",  workflow: `#/workflows/${workflow.definition.callback_id}`,  inputs: {    channel_id: { value: "{{data.channel_id}}" },    user_id: { value: "{{data.user_id}}" },  },};export default trigger;

import { Manifest } from "deno-slack-sdk/mod.ts";import { workflow as InteractiveBlocksDemo } from "./interactive_blocks_demo.ts";// Add thisimport { workflow as InteractiveMessageDemo } from "./interactive_message_demo.ts";export default Manifest({  name: "stoic-wolf-344",  description: "Demo workflow",  icon: "assets/default_new_app_icon.png",  workflows: [InteractiveBlocksDemo, InteractiveMessageDemo], // Add this  outgoingDomains: [],  botScopes: ["commands", "chat:write", "chat:write.public"],});

  .addBlockActionsHandler("approve", async ({ body, client, inputs }) => {    const text = "Thank you for approving the request!";    await client.chat.update({      channel: inputs.channel_id,      ts: body.container.message_ts,      text,      blocks: [{ type: "section", text: { type: "mrkdwn", text } }],    });    return { completed: true, outputs: {} };  })

  .addBlockActionsHandler("deny", async ({ body, client, inputs }) => {    const text =      "OK, we need more information... Could you share the reason for denial?";    await client.chat.update({      channel: inputs.channel_id,      ts: body.container.message_ts,      text,      blocks: [{ type: "section", text: { type: "mrkdwn", text } }],    });    await client.views.open({      interactivity_pointer: body.interactivity.interactivity_pointer,      view: buildNewModalView(),    });    // To continue interactions, return completed: false    return { completed: false };  })