Slack Bolt - Update View On Submit

Viewed 8

I am trying to build a multistep Slack modal using the Bolt library.

My goal is to gather user input from a select field, then when the user clicks the Submit button, using that input I would pass back the next modal based on their selection.

Here's what I've got so far:

const { App } = require("@slack/bolt");

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
});

app.command("/helloworld", async ({ ack, payload, context }) => {
  ack();

  try {
    const result = await app.client.views.open({
      token: context.botToken,

      trigger_id: payload.trigger_id,
      view: {
        callback_id: "my_view",
        type: "modal",
        title: {
          type: "plain_text",
          text: "My App",
          emoji: true,
        },
        submit: {
          type: "plain_text",
          text: "Submit",
          emoji: true,
        },
        close: {
          type: "plain_text",
          text: "Cancel",
          emoji: true,
        },
        blocks: [
          {
            type: "input",
            block_id: "my_block",
            label: {
              type: "plain_text",
              text: "Category",
              emoji: true,
            },
            element: {
              type: "static_select",
              placeholder: {
                type: "plain_text",
                text: "Select an item",
                emoji: true,
              },
              options: [
                {
                  text: {
                    type: "plain_text",
                    text: "General",
                    emoji: true,
                  },
                  value: "general",
                },
                {
                  text: {
                    type: "plain_text",
                    text: "Misc",
                    emoji: true,
                  },
                  value: "misc",
                },
                {
                  text: {
                    type: "plain_text",
                    text: "Other",
                    emoji: true,
                  },
                  value: "other",
                },
              ],
              action_id: "my_action",
            },
          },
        ],
      },
    });
    console.log(result);
  } catch (error) {
    console.error(error);
  }
});

app.view("my_view", ({ ack, body, view, context }) => {
  ack();

  console.log("my_view");
  console.log(JSON.stringify(view));
  
  let category = view["state"]["values"]["my_block"]["my_action"]["selected_option"].value;
  
  console.log(`selected value: ${category}`);
  
 
});


(async () => {
  // Start your app
  await app.start(process.env.PORT || 3000);

  console.log("⚡️ Bolt app is running!");
})();

In the my_view callback function, I'm able to get the value the user selected from the first modal. The part I need help with is using that value to update the view:

if value is general, update view to general_view
if value is misc, update view to misc_view
if value is other, update view to other_view
0 Answers
Related