单击 Slack 应用程序上的按钮时如何获取字段值?
How to get the field value when clicking on a button on a Slack app?
我研究了 Slack Bolt Framework,并创建了一个非常简单的应用程序,可以使用斜杠命令。当我键入“/cep”时,会出现以下屏幕:
printscreen
点击按钮时如何获取输入值字段?
我在 Javascript 中使用 Bolt 框架。
这里是屏幕代码:
/ 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"
}
]
}
]
}
)
});
这里是斜杠命令代码:
/ 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! `
});
});
更新
当我输入斜杠命令 '/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"
}
]
}
]
}
)
});
点击按钮时的指令
// 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)
});
控制台打印的结果:
{
njQfY: {
'plain_text_input-action': { type: 'plain_text_input', value: 'abc123' }
}
}
您需要从 view_submission 负载中 view.state.values
。
参考:https://api.slack.com/reference/interaction-payloads/views
您需要专注于 block_id 和 action_id,因为这可能很棘手。
我研究了 Slack Bolt Framework,并创建了一个非常简单的应用程序,可以使用斜杠命令。当我键入“/cep”时,会出现以下屏幕:
printscreen
点击按钮时如何获取输入值字段?
我在 Javascript 中使用 Bolt 框架。
这里是屏幕代码:
/ 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"
}
]
}
]
}
)
});
这里是斜杠命令代码:
/ 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! `
});
});
更新
当我输入斜杠命令 '/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"
}
]
}
]
}
)
});
点击按钮时的指令
// 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)
});
控制台打印的结果:
{
njQfY: {
'plain_text_input-action': { type: 'plain_text_input', value: 'abc123' }
}
}
您需要从 view_submission 负载中 view.state.values
。
参考:https://api.slack.com/reference/interaction-payloads/views
您需要专注于 block_id 和 action_id,因为这可能很棘手。