CODEWITHSUNDEEP
slackslack-api
jaimefps
jaimefps

Reputation: 2404

How to listen for Modal submission on Slack Bolt?

I've been looking through the docs for a day now, and still can't figure out this simple question: what is the @slack/bolt ^2.3.0 method that is used to listen for a Modal submission?

const slackbot = new App({ token, signingSecret });

slackbot.shortcut(
  "open_modal",
  async ({ ack, body, client, context, payload }) => {
    await ack();
    const result = await client.views.open({ ... });
  }
);

slackbot.METHOD_HERE(ID_HERE,
  async ({ ack }) => {
    ack();
    // handle modal submitted data here...
  }
);

What values take the place of METHOD_HERE and ID_HERE in the code above? I am able to open a modal without problem via the global shortcuts menu; but can't seem to figure out how to capture user's submission of the modal.

For example, this never captures any submissions:

  slackbot.view("open_modal", async ({ ack }) => {
    ack();
    // do things here...
  });

Upvotes: 2

Views: 3286

Answers (1)

Jai Pandya
Jai Pandya

Reputation: 2309

You need to use the callback_id used when you create the Modal view:

slackbot.shortcut(
  "open_modal",
  async ({ ack, body, client, context, payload }) => {
    await ack();

    const result = await client.views.open({
      trigger_id: body.trigger_id,

      view: {
        type: "modal",
        
        callback_id: "YOUR_CALLBACK_ID", // <= listen for this ID

        title: {
          type: "plain_text",
          text: "Modal Title",
        },

        blocks: [ ... ],
      },
    });
  }
);

Then, to listen to submissions on the above Modal, use this:

app.view('YOUR_CALLBACK_ID', optionalMiddleWareFunction, async ({ payload }) => {
  const submittedValues = payload.view.state.values
  // do stuff with submittedValues
});

callback_id is the ID that you defined when creating modal view. You can see an example here.

You can read the corresponding official documentation here.

Upvotes: 2

Related Questions