How to get the field value when clicking on a button on a Slack app?

Question

I've studying Slack Bolt Framework and I created a very simple app that works with a slash command. When I type '/cep' the following screen appears:

printscreen

How can I get the input value field when I click the button?

I'm usind Bolt Framework with Javascript.

Here the screen code:

/ Listen for a slash command invocation 'Busca de CEP'
app.command('/cep', async ({ command, ack, say }) => {
  
  // Acknowledge the command request
  await ack();
  
  await say(
    {
        "blocks": [
            {
                "type": "header",
                "text": {
                    "type": "plain_text",
                    "text": " Busca de Endereço",
                    "emoji": true
                }
            },
            {
                "type": "divider"
            },
            {
                "type": "section",
                "text": {
                    "type": "plain_text",
                    "text": "Digite o CEP que deseja pesquisar:",
                    "emoji": true
                }
            },
            {
                "type": "input",
                "element": {
                    "type": "plain_text_input",
                    "action_id": "plain_text_input-action"
                },
                "label": {
                    "type": "plain_text",
                    "text": " ",
                    "emoji": true
                }
            },
            {
                "type": "actions",
                "elements": [
                    {
                        "type": "button",
                        "text": {
                            "type": "plain_text",
                            "text": "Buscar",
                            "emoji": true
                        },
                        "value": "submitCEPButton",
                        "action_id": "submitCEPButton"
                    }
                ]
            }
        ]
    }
  )
  
});

Here the slash command code:

/ Action listener function called when an interactive component with action_id of “click_me_button” is triggered
app.action('submitCEPButton', async ({ ack, body, client, say }) => {
  // Acknowledge action request before anything else
  await ack();
  
  let channelID = body.channel.id
  let userID = body.user.id
  
  // Respond to action with an ephemeral message
  await client.chat.postEphemeral({
    channel: channelID,
    user: userID,
    text: `<@${userID}> clicked the button! `
  });
});

UPDATE

Screen code when I type the slash command '/cep'

app.command('/cep', async ({ command, ack, say }) => {
  
  // Acknowledge the command request
  await ack();
  
  await say(
    {
        "blocks": [
            {
                "type": "header",
                "block_id": "headerBlock",
                "text": {
                    "type": "plain_text",
                    "text": " Busca de Endereço",
                    "emoji": true
                }
            },
            {
                "type": "divider",
                "block_id": "dividerBlock",
            },
            {
                "type": "section",
                "block_id": "sectionBlock",
                "text": {
                    "type": "plain_text",
                    "text": "Digite o CEP que deseja pesquisar:",
                    "emoji": true
                }
            },
            {
                "type": "input",
                "block_id": "inputBlock",
                "element": {
                    "type": "plain_text_input",
                    "action_id": "inputCEP"
                },
                "label": {
                    "type": "plain_text",
                    "text": " ",
                    "emoji": false
                }
            },
            {
                "type": "actions",
                "block_id": "submitBlock",
                "elements": [
                    {
                        "type": "button",
                        "text": {
                            "type": "plain_text",
                            "text": "Buscar",
                            "emoji": true
                        },
                        "value": "submitCEPButton",
                        "action_id": "submitCEPButton"
                    }
                ]
            }
        ]
    }
  )
  
});

The command when I click the button

// Action listener function called when an interactive component with action_id of “click_me_button” is triggered
app.action('submitCEPButton', async ({ ack, body, client, say }) => {
  // Acknowledge action request before anything else
  await ack();
  
  let channelID = body.channel.id
  let userID = body.user.id
  console.log(body.state.values)
});

The result printed in console:

{
  njQfY: {
    'plain_text_input-action': { type: 'plain_text_input', value: 'abc123' }
  }
}

score 1 · Accepted Answer · answered Jan 08 '22 at 18:03

1

you need to view.state.values from the view_submission payload.

Refrence : https://api.slack.com/reference/interaction-payloads/views

You need to focus on block_id & action_id as that can be tricky.

answered Jan 08 '22 at 18:03

Suyash Gaur

2,481
2
9
22

Hi Suyash, thanks for your response. I tried to put the block_id and action_id in the field code. Now I can read what was written in the field but the response doesn't come with the name of block_id and action_id. It comes like { 'XkFa=': { 'plain_text_input-action': { type: 'plain_text_input', value: 'teste' } } } Instead of 'XkFa' should be the name I gave as block_id right? – Iago Richard Jan 08 '22 at 20:15
Can you update question with updated block? It seems that in that particular block you have not mentioned block_id, so it is auto -generating block_id – Suyash Gaur Jan 10 '22 at 07:10
Hi Suyash, I updated the question with the actual code – Iago Richard Jan 11 '22 at 00:13
The block seems to be fine. Can you log the 'block' sent with the request to make sure that updated with the changes you made? – Suyash Gaur Jan 11 '22 at 13:56
Hi Suyash, I edited the code again and now it's working correctly, thank you for your help. – Iago Richard Jan 11 '22 at 18:48

s00103898-276165-15433 · Answer 2 · 2023-01-04T18:55:42.127

I've some same question and I find the offical document is very helpful.

The link: https://slack.dev/bolt-js/concepts#action-listening

we should have app.action to listen for the input action
we should get the data from the body.

here are two examples

use a constraints object to listen to callback_ids, block_ids, and action_ids:

// Your listener function will only be called when the action_id matches 'select_user' AND the block_id matches 'assign_ticket'
app.action({ action_id: 'select_user', block_id: 'assign_ticket' },
  async ({ body, client, ack, logger }) => {
    await ack();
    try {
      // Make sure the action isn't from a view (modal or app home)
      if (body.message) {
        const result = await client.reactions.add({
          name: 'white_check_mark',
          timestamp: body.message.ts,
          channel: body.channel.id
        });

        logger.info(result);
      }
    }
    catch (error) {
      logger.error(error);
    }
  });

only listen to action id

  app.action('reply_input_action', replyGptBlockActionCallback)

inside the function replyGptBlockActionCallback

export async function replyGptBlockActionCallback ({ ack, say, body, client }: any): Promise<void> {
  try {
    await ack()

    const question = body.state.values.reply_block.reply_input_action.value
    await say(question)

  } catch (error) {
    console.error(error)
  }
}

Pay more attention to the input block, which should has action_id and block_id.

const dispatchActionInput = {
  dispatch_action: true,
  type: 'input',
  block_id: 'reply_block',
  element: {
    type: 'plain_text_input',
    action_id: 'reply_input_action'
  },
  label: {
    type: 'plain_text',
    text: 'reply',
    emoji: true
  }
}

Here is the data structure for body

{
  type: 'block_actions',
  user: {
    id: 'U04F78MRW0K',
    username: 'sherwin.water3',
    name: 'sherwin.water3',
    team_id: 'T04F9RH6ZTN'
  },
  api_app_id: 'A04ESSBBNS3',
  token: 'jDlakpUvYsAZvF5ePimZ7oQK',
  container: {
    type: 'message',
    message_ts: '1672858267.740819',
    channel_id: 'D04FL2JQM0R',
    is_ephemeral: false
  },
  trigger_id: '4595382578642.4519867237940.0d111b689bf06a995d8b5f35d2d49c3c',
  team: { id: 'T04F9RH6ZTN', domain: 'chat2022' },
  enterprise: null,
  is_enterprise_install: false,
  channel: { id: 'D04FL2JQM0R', name: 'directmessage' },
  message: {
    bot_id: 'B04F7D6S63U',
    type: 'message',
    text: "This content can't be displayed.",
    user: 'U04F79VBPRR',
    ts: '1672858267.740819',
    app_id: 'A04ESSBBNS3',
    blocks: [ [Object], [Object] ],
    team: 'T04F9RH6ZTN'
  },
  state: { values: { gpt_conversation_block: [Object] } },
  response_url: 'https://hooks.slack.com/actions/T04F9RH6ZTN/4595268069731/XyH12GdoZOya8yXmdq7cysRr',
  actions: [
    {
      type: 'plain_text_input',
      block_id: 'gpt_conversation_block',
      action_id: 'gpt_input_action',
      value: 'hello',
      action_ts: '1672858271.476569'
    }
  ]
}

for future readers, I found it in `body.actions[0].value` and failed to find in views or other places — margincall, Mar 21 '23 at 05:56

How to get the field value when clicking on a button on a Slack app?

2 Answers2