Bolt-js: What is the recommended way to obtain selected options when handling_submissions?

Created on 29 Oct 2019  路  4Comments  路  Source: slackapi/bolt-js

Description

I have been trying to obtain selected options of Multi-select menu with static options when handling view_submission payloads.

However, view.state.values doesn't contain selected options in it, but only contains plain text inputs.
I currently obtain them by listening the selection changed event with using app.action and store them into somewhere, but I am not sure that is the way to go.

What is the recommended way to obtain selected options?

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

  • [ ] bug
  • [ ] enhancement (feature request)
  • [x] 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

This is not a bug.

Reproducible in:

package version: any

node version: any

OS version(s): any

Steps to reproduce:

  1. Put a Multi-select menu with static options on a Modal
  2. Run it and select options, then press submit.
  3. view.state.values doesn't contain selected options.

Expected result:

View payload contains selected options after submission.

Actual result:

view.state.values doesn't contain selected options.

Attachments:

Logs, screenshots, screencast, sample project, funny gif, etc.

Most helpful comment

@seratch thank you for your advice. I managed to get selected option like below. Putting my example for those who might encounter the same question.

"type": "input", "block_id": "block1", "label":{ "type": "plain_text", "text": "type" }, "element": { "type": "multi_static_select", "action_id": "input1", "placeholder": { "type": "plain_text", "text": "Select an option" }, "options": [ { "text": { "type": "plain_text", "text": "option a" }, "value": "option a" }, { "text": { "type": "plain_text", "text": "option b" }, "value": "option b" } ] }

All 4 comments

I'm afraid that you have non-input type blocks (e.g., section) in the modal.

{
    "type": "section",
    "accessory": {
        "type": "multi_static_select",
    }
}

All the blocks you'd like to include in view submission must be input blocks as below:

{
    "type": "input",
    "element": {
        "type": "multi_static_select",
    }
}

@seratch thanks for your advice. If I set input for type, it will be rejected by invalid_arguments error. I might be missing something. I woud appreciate your comments.

app.command('/test', ({ ack, payload, context }) => {
  ack();

  try {
    const result = app.client.views.open({
      token: context.botToken,
      trigger_id: payload.trigger_id,
      view: {
        type: 'modal',
        callback_id: 'view1',
        title: {
          type: 'plain_text',
          text: 'Modal dialog'
        },
        submit: {
          type: 'plain_text',
          text: 'Submit'
        },
        blocks: [
        {
            **type: "input"**,
            block_id: "block1",
            text: {
                type: "mrkdwn",
                text: "Select an option"
            },
            **element**: {
                action_id: "input1",
                type: "multi_static_select",
                placeholder: {
                    type: "plain_text",
                    text: "Select an option"
                },
                options: [
                    {
                        text: {
                            type: "plain_text",
                            text: "option a"
                        },
                        value: "a"
                    },
                    {
                        text: {
                            type: "plain_text",
                            text: "option b"
                        },
                        value: "b"
                    }
                ]
            }
        },
          {
            type: 'input',
            block_id: 'title_block',
            label: {
              type: 'plain_text',
              text: 'text1'
            },
            element: {
              type: 'plain_text_input',
              action_id: 'text1_input',
              multiline: false
            }
          },
          {
            type: 'input',
            block_id: 'url_block',
            label: {
              type: 'plain_text',
              text: 'text2'
            },
            element: {
              type: 'plain_text_input',
              action_id: 'text2_input',
              multiline: false
            }
          }
        ]
      }
    });
    console.log(result);
  }
  catch (error) {
    console.error(error);
  }
});
(node:22126) UnhandledPromiseRejectionWarning: Error: An API error occurred: invalid_arguments
    at Object.platformErrorFromResult (/home/ubuntu/Documents/slackbolt/first-bolt-app/node_modules/@slack/web-api/dist/errors.js:50:33)
    at WebClient.apiCall (/home/ubuntu/Documents/slackbolt/first-bolt-app/node_modules/@slack/web-api/dist/WebClient.js:407:28)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:22126) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:22126) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

text: {
type: "mrkdwn",
text: "Select an option"
},

I found this one needs to be label. You may still have more blocks to fix. Can you validate your payload using Block Kit Builder?
https://api.slack.com/tools/block-kit-builder?mode=modal

@seratch thank you for your advice. I managed to get selected option like below. Putting my example for those who might encounter the same question.

"type": "input", "block_id": "block1", "label":{ "type": "plain_text", "text": "type" }, "element": { "type": "multi_static_select", "action_id": "input1", "placeholder": { "type": "plain_text", "text": "Select an option" }, "options": [ { "text": { "type": "plain_text", "text": "option a" }, "value": "option a" }, { "text": { "type": "plain_text", "text": "option b" }, "value": "option b" } ] }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kmartin-215 picture kmartin-215  路  5Comments

selfcontained picture selfcontained  路  4Comments

TK95 picture TK95  路  3Comments

johnsonyick picture johnsonyick  路  4Comments

dginovker picture dginovker  路  4Comments