Node-slack-sdk: Getting Empty State at viewSubmission

[doganarif]

Description

Describe your issue here.

What type of issue is this? (place an x in one of the [ ])

• [x] bug
• [ ] enhancement (feature request)
• [ ] question
• [ ] documentation related
• [ ] testing related
• [ ] discussion

Requirements (place an x in each of the [ ])

• [x] I've read and understood the Contributing guidelines and have done my best effort to follow them.
• [x] I've read and agree to the Code of Conduct.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

---

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Packages:

Select all that apply:

• [ ] @slack/web-api
• [ ] @slack/events-api
• [x] @slack/interactive-messages
• [ ] @slack/rtm-api
• [ ] @slack/webhooks
• [ ] I don't know

Reproducible in:

package version:

node version: 10.16.3

OS version(s): macOS 10.15 Catalina

Steps to reproduce:

1. Trying to listen submit button event.
2. Getting all viewSubmission payload but state is always empty
3. Wrote action payload for all components.

Expected result:

Getting state values at submission of dialog.

Actual result:

Getting empty state

[seratch]

A known common pitfall is that you need to use input blocks to have them as part of view_submission. Other blocks are not ignored. They are sent in other ways. For example, a user input in actions blocks is sent as an block_actions interaction.

See also: https://github.com/slackapi/bolt/issues/305#issuecomment-563060856

If your modal has some input blocks and they're not sent as you expect, could you share more details like your application code, Slack app settings, and so on? I'm happy to help you out.

For your reference, here is a tiny code snippet that surely works. event.js uses Home tab. If you're not familiar with the feature, read https://api.slack.com/surfaces/tabs before trying the sample app.

package.json

{
  "name": "slack-inter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "events": "node_modules/.bin/nodemon events.js",
    "interactive": "node_modules/.bin/nodemon interactive.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@slack/events-api": "^2.3.0",
    "@slack/interactive-messages": "^1.4.0",
    "@slack/web-api": "^5.6.0",
    "dotenv": "^8.2.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

.env

SLACK_BOT_TOKEN=xoxb-aaa-bbb-ccc
SLACK_SIGNING_SECRET=your-signing-secret

events.js

How to run: npm run events & ngrok http 3001

const config = require("dotenv").config().parsed;
for (const k in config) {
  process.env[k] = config[k];
}

const { createEventAdapter } = require('@slack/events-api');
const slackSigningSecret = process.env.SLACK_SIGNING_SECRET;
const slackEvents = createEventAdapter(slackSigningSecret, {
  waitForResponse: true,
});

const { WebClient } = require('@slack/web-api');
const token = process.env.SLACK_BOT_TOKEN;
const web = new WebClient(token);

slackEvents.on('app_home_opened', (event) => {
  web.views.publish({
    token: token,
    user_id: event.user,
    view: {
      "type": "home",
      "blocks": [
        {
          "type": "section",
          "text": {
            "type": "mrkdwn",
            "text": "You can add a button alongside text in your message. "
          },
          "accessory": {
            "type": "button",
            "action_id": "open-view",
            "text": {
              "type": "plain_text",
              "text": "Button",
              "emoji": true
            },
            "value": "click_me_123"
          }
        }
      ]
    }
  });
});

(async () => {
  const server = await slackEvents.start(3001);
  console.log(`Listening for events on ${server.address().port}`);
})();

interactive.js

How to run: npm run interactive & ngrok http 3002

const config = require("dotenv").config().parsed;
for (const k in config) {
  process.env[k] = config[k];
}

const { createMessageAdapter } = require('@slack/interactive-messages');
const slackSigningSecret = process.env.SLACK_SIGNING_SECRET;
const slackInteractions = createMessageAdapter(slackSigningSecret);

const token = process.env.SLACK_BOT_TOKEN;
const { WebClient } = require('@slack/web-api');
const web = new WebClient(token);

slackInteractions.action({ type: 'button' }, (payload) => {
  web.views.open({
    token: token,
    trigger_id: payload.trigger_id,
    view: {
      "type": "modal",
      "callback_id": "view-callback-id",
      "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",
          "element": {
            "type": "users_select",
            "placeholder": {
              "type": "plain_text",
              "text": "Select a user",
              "emoji": true
            }
          },
          "label": {
            "type": "plain_text",
            "text": "Label",
            "emoji": true
          }
        }
      ]
    }
  })
});

slackInteractions.viewSubmission('view-callback-id', (payload) => {
  console.log(payload.view.state);
  return null;
});

(async () => {
  const server = await slackInteractions.start(3002);
  console.log(`Listening for events on ${server.address().port}`);
})();

[doganarif]

Thank you :) I solved it !