Slack Next-gen Platform - Advanced Modals

$ 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 sharp-chipmunk-480$ 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

// ----------------// Workflow Definition// ----------------import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";export const workflow = DefineWorkflow({  callback_id: "modal-demo-workflow",  title: "Modal Demo Workflow",  input_parameters: {    properties: { interactivity: { type: Schema.slack.types.interactivity } },    required: ["interactivity"],  },});// Add your custom function to open and handle a modalimport { def as ModalDemo } from "./function.ts";workflow.addStep(ModalDemo, {  interactivity: workflow.inputs.interactivity,});// ----------------// Trigger Definition// ----------------import { Trigger } from "deno-slack-api/types.ts";const trigger: Trigger<typeof workflow.definition> = {  type: "shortcut", // link trigger  name: "Modal Demo Trigger",  workflow: `#/workflows/${workflow.definition.callback_id}`,  inputs: {    // Modal interactions require `interactivity` input parameter.    // As of this writing, only link triggers can provide the value.    interactivity: { value: "{{data.interactivity}}" },  },};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: "modal-example",  title: "Modal interaction example",  source_file: FunctionSourceFile(import.meta.url),  input_parameters: {    properties: { interactivity: { type: Schema.slack.types.interactivity } },    required: ["interactivity"],  },  output_parameters: { properties: {}, required: [] },});export default SlackFunction(  def,  // ---------------------------  // The first handler function that opens a modal.  // This function can be called when the workflow executes the function step.  // ---------------------------  async ({ inputs, client }) => {    // Open a new modal with the end-user who interacted with the link trigger    const response = await client.views.open({      interactivity_pointer: inputs.interactivity.interactivity_pointer,      view: {        "type": "modal",        // Note that this ID can be used for dispatching view submissions and view closed events.        "callback_id": "first-page",        // This option is required to be notified when this modal is closed by the user        "notify_on_close": true,        "title": { "type": "plain_text", "text": "My App" },        "submit": { "type": "plain_text", "text": "Next" },        "close": { "type": "plain_text", "text": "Close" },        "blocks": [          {            "type": "input",            "block_id": "first_text",            "element": { "type": "plain_text_input", "action_id": "action" },            "label": { "type": "plain_text", "text": "First" },          },        ],      },    });    if (response.error) {      const error =        `Failed to open a modal in the demo workflow. Contact the app maintainers with the following information - (error: ${response.error})`;      return { error };    }    return {      // To continue with this interaction, return false for the completion      completed: false,    };  },)  // ---------------------------  // The handler that can be called when the above modal data is submitted.  // It saves the inputs from the first page as private_metadata,  // and then displays the second-page modal view.  // ---------------------------  .addViewSubmissionHandler(["first-page"], ({ view }) => {    // Extract the input values from the view data    const firstText = view.state.values.first_text.action.value;    // Input validations    if (firstText.length < 5) {      return {        response_action: "errors",        // The key must be a valid block_id in the blocks on a modal        errors: { first_text: "Must be 5 characters or longer" },      };    }    // Successful. Update the modal with the second page presentation    return {      response_action: "update",      view: {        "type": "modal",        "callback_id": "second-page",        // This option is required to be notified when this modal is closed by the user        "notify_on_close": true,        "title": { "type": "plain_text", "text": "My App" },        "submit": { "type": "plain_text", "text": "Next" },        "close": { "type": "plain_text", "text": "Close" },        // Hidden string data, which is not visible to end-users        // You can use this property to transfer the state of interaction        // to the following event handlers.        // (Up to 3,000 characters allowed)        "private_metadata": JSON.stringify({ firstText }),        "blocks": [          // Display the inputs from "first-page" modal view          {            "type": "section",            "text": { "type": "mrkdwn", "text": `First: ${firstText}` },          },          // New input block to receive text          {            "type": "input",            "block_id": "second_text",            "element": { "type": "plain_text_input", "action_id": "action" },            "label": { "type": "plain_text", "text": "Second" },          },        ],      },    };  })  // ---------------------------  // The handler that can be called when the second modal data is submitted.  // It displays the completion page view with the inputs from  // the first and second pages.  // ---------------------------  .addViewSubmissionHandler(["second-page"], ({ view }) => {    // Extract the first-page inputs from private_metadata    const { firstText } = JSON.parse(view.private_metadata!);    // Extract the second-page inputs from the view data    const secondText = view.state.values.second_text.action.value;    // Displays the third page, which tells the completion of the interaction    return {      response_action: "update",      view: {        "type": "modal",        "callback_id": "completion",        // This option is required to be notified when this modal is closed by the user        "notify_on_close": true,        "title": { "type": "plain_text", "text": "My App" },        // This modal no longer accepts further inputs.        // So, the "Submit" button is intentionally removed from the view.        "close": { "type": "plain_text", "text": "Close" },        // Display the two inputs        "blocks": [          {            "type": "section",            "text": { "type": "mrkdwn", "text": `First: ${firstText}` },          },          {            "type": "section",            "text": { "type": "mrkdwn", "text": `Second: ${secondText}` },          },        ],      },    };  })  // ---------------------------  // The handler that can be called when the second modal data is closed.  // If your app runs some resource-intensive operations on the backend side,  // you can cancel the ongoing process and/or tell the end-user  // what to do next in DM and so on.  // ---------------------------  .addViewClosedHandler(    ["first-page", "second-page", "completion"],    ({ view }) => {      console.log(`view_closed handler called: ${JSON.stringify(view)}`);      return { completed: true };    },  );

$ slack triggers create --trigger-def workflow_and_trigger.ts? Choose an app  seratch (dev)  T03E94MJU   sharp-chipmunk-480 (dev) A04G9S43G2K Trigger created   Trigger ID:   Ft04GZK1EE3E   Trigger Type: shortcut   Trigger Name: Modal Demo Trigger   URL: https://slack.com/shortcuts/***/***

.addViewSubmissionHandler(["first-page"], ({ view }) => {  // Extract the input values from the view data  const firstText = view.state.values.first_text.action.value;  // Input validations  if (firstText.length < 5) {    return {      response_action: "errors",      // The key must be a valid block_id in the blocks on a modal      errors: { first_text: "Must be 5 characters or longer" },    };  }  // Successful. Update the modal with the second-page presentation  return {    response_action: "update",    view: {      "type": "modal",      "callback_id": "second-page",      "private_metadata": JSON.stringify({ firstText }),      ...    },  };})

.addViewSubmissionHandler(["second-page"], ({ view }) => {  // Extract the first-page inputs from private_metadata  const { firstText } = JSON.parse(view.private_metadata!);  // Extract the second-page inputs from the view data  const secondText = view.state.values.second_text.action.value;  // Displays the third page, which tells the completion of the interaction  return { response_action: "update", view: { ... } };  };})

.addViewClosedHandler(  ["first-page", "second-page", "completion"],  ({ view }) => {    console.log(`view_closed handler called: ${JSON.stringify(view)}`);    return { completed: true };  },);