[英]How to get the field value when clicking on a button on a Slack app?
我研究了 Slack Bolt Framework,並創建了一個非常簡單的應用程序,可以使用斜杠命令。 當我鍵入“/cep”時,會出現以下屏幕:
單擊按鈕時如何獲取輸入值字段?
我在 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.state.values
有效負載中查看.state.values。
參考: https://api.slack.com/reference/interaction-payloads/views
您需要關注block_id 和 action_id因為這可能很棘手。
我有一些相同的問題,我發現官方文檔非常有幫助。
鏈接: https://slack.dev/bolt-js/concepts#action-listening
這里有兩個例子
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);
}
});
app.action('reply_input_action', replyGptBlockActionCallback)
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)
}
}
多注意input
塊,它應該有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
}
}
這是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'
}
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.