I am building an internal slack app that launches a modal, so technical requests can be ticketed more effectively.
When I return the following from my API in a JSON response to a slash-command I get an error failed with the error "invalid_blocks", however, when I put this in the block-kit-builder it works perfectly (including "sending to slack" button)
Any ideas why this is failing when I run my slash command - and is it possible to see more detailed error messages from slack?
return {
statusCode: 200,
body: JSON.stringify({
"callback_id": "tech-support",
"title": {
"type": "plain_text",
"text": "Tech Support Ticket",
"emoji": true
},
"submit": {
"type": "plain_text",
"text": "Submit",
"emoji": true
},
"type": "modal",
"close": {
"type": "plain_text",
"text": "Cancel",
"emoji": true
},
"blocks": [
{
"type": "input",
"element": {
"type": "plain_text_input"
},
"label": {
"type": "plain_text",
"text": "Ticket Title",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "static_select",
"placeholder": {
"type": "plain_text",
"text": "Select an item",
"emoji": true
},
"options": [
{
"text": {
"type": "plain_text",
"text": "Website",
"emoji": true
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "Hubspot",
"emoji": true
},
"value": "value-1"
},
{
"text": {
"type": "plain_text",
"text": "Email",
"emoji": true
},
"value": "value-2"
},
{
"text": {
"type": "plain_text",
"text": "Other",
"emoji": true
},
"value": "value-3"
}
]
},
"label": {
"type": "plain_text",
"text": "Impacted Technology",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "checkboxes",
"options": [
{
"text": {
"type": "plain_text",
"text": "Security",
"emoji": true
},
"value": "value-4"
},
{
"text": {
"type": "plain_text",
"text": "Productivity",
"emoji": true
},
"value": "value-5"
},
{
"text": {
"type": "plain_text",
"text": "Data Accuracy",
"emoji": true
},
"value": "value-6"
},
{
"text": {
"type": "plain_text",
"text": "Feature Suggestion",
"emoji": true
},
"value": "value-7"
},
{
"text": {
"type": "plain_text",
"text": "Client Useability",
"emoji": true
},
"value": "value-8"
}
]
},
"label": {
"type": "plain_text",
"text": "Business Impacts",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "radio_buttons",
"options": [
{
"text": {
"type": "plain_text",
"text": "Yes",
"emoji": true
},
"value": "value-9"
},
{
"text": {
"type": "plain_text",
"text": "No",
"emoji": true
},
"value": "value-10"
}
]
},
"label": {
"type": "plain_text",
"text": "Does the problem block you from your core deliverables",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "plain_text_input",
"multiline": true
},
"label": {
"type": "plain_text",
"text": "Give a detailed description of the problem",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "static_select",
"placeholder": {
"type": "plain_text",
"text": "Select an item",
"emoji": true
},
"options": [
{
"text": {
"type": "plain_text",
"text": "High: Critical To Reach Operations",
"emoji": true
},
"value": "value-11"
},
{
"text": {
"type": "plain_text",
"text": "Medium: Multi-Person Technical Inconvenience",
"emoji": true
},
"value": "value-12"
},
{
"text": {
"type": "plain_text",
"text": "Low: Normal Technical Issue",
"emoji": true
},
"value": "value-13"
}
]
},
"label": {
"type": "plain_text",
"text": "Select a priority",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "input",
"element": {
"type": "multi_users_select",
"placeholder": {
"type": "plain_text",
"text": "Select users",
"emoji": true
}
},
"label": {
"type": "plain_text",
"text": "Does this impact other people as well?",
"emoji": true
}
}
]
}),
};```
When getting a payload from a Slash command, the response sent can only return a message. Modals have to be opened via the views.open API method, passing in the JSON to the view parameter, the trigger_id from the slash command payload, and the token used to auth your request.
Using Bolt and the Block Builder JS library, this would look something like this:
const openMyView = async ({ body, context, client }) => {
// Do some stuff and build viewParams object
const view = callSomeMethod(viewParams); // Calls a method that uses Block Builder to build a modal
await client.views.open({
view: view.buildToJSON(); // Could also be just the JSON built from Slack's builder site
token: context.botToken,
trigger_id: body.trigger_id,
});
};