View Submission
Overview
If you open a modal view with a submit button, you can trigger a workflow when the user submits the view using this trigger. See the openView docs for more information on how to open a modal view.
The event will be the view_submission event payload from Slack, which includes the view.state.values object which you can use to access the values of the inputs in the view.
For example, given the following view:
await slack.openView("Get the reply", event.trigger_id, {
type: "modal",
callback_id: "message-reply",
title: {
type: "plain_text",
text: "Reply to Issue",
},
blocks: [
{
type: "input",
block_id: "replyInput",
element: {
type: "plain_text_input",
action_id: "reply",
},
label: {
type: "plain_text",
text: "Reply",
},
},
],
submit: {
type: "plain_text",
text: "Submit",
},
});
The event payload would have the following shape:
{
// ...
"view": {
"id": "V04N2P0G797",
"type": "modal",
"state": {
"values": {
"replyInput": {
"reply": {
"type": "plain_text_input",
"value": "This is the reply!"
}
}
}
}
// ...
}
}
Callback IDs
You can optionally provide callback ID for the view in order to only trigger on specific views. The callback ID is specified in the callback_id property of the view. In the example above, the callback ID is "message-reply":
import * as slack from "@trigger.dev/slack";
new Trigger({
on: slack.events.viewSubmissionInteraction({
callbackId: "message-reply",
}),
});
You can also provide an array of callback IDs to trigger on multiple views:
import * as slack from "@trigger.dev/slack";
new Trigger({
on: slack.events.viewSubmissionInteraction({
callbackId: ["message-reply", "another-view"],
}),
});
Limitations
Because of the way the Slack API works, you cannot update the view or push a new view through the API when handling a view submission. The only way to update or push a view in a view submission interaction is with a response_action, which we currently do not support. If you’d like this feature, please don’t hesitate to get in touch!
Event payload
Please see the Slack View Submission event payload for more information.
The type of event, which will always be view_submission.
The view that the user interacted with.
The user that submitted the view.
The team that the user is a part of.
The channel where the interaction took place.
Example Workflow
The following example combines WhatsApp and Slack to create a workflow that allows you to receive WhatsApp messages in Slack, and use a modal to compose a reply.
/** @jsxImportSource jsx-slack */
import { Trigger } from "@trigger.dev/sdk";
import {
events,
sendText,
getMediaUrl,
MessageEventMessage,
} from "@trigger.dev/whatsapp";
import JSXSlack, {
Actions,
Blocks,
Button,
Section,
Header,
Context,
Image,
Modal,
Input,
Textarea,
} from "jsx-slack";
import * as slack from "@trigger.dev/slack";
const dateFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short",
dateStyle: "short",
});
// this trigger listens for WhatsApp messages and sends them to Slack
new Trigger({
id: "whatsapp-to-slack",
name: "WhatsApp: load messages",
on: events.messageEvent({
accountId: "<account id>",
}),
run: async (event, ctx) => {
//this generates Slack blocks from the WhatsApp message
const messageBody = await createMessageBody(event.message);
await slack.postMessage("jsx-test", {
channelName: "whatsapp-support",
//text appears in Slack notifications on mobile/desktop
text: "How is your progress today?",
//import and use JSXSlack to make creating rich messages much easier
blocks: JSXSlack(
<Blocks>
<Header>From: {event.message.from}</Header>
<Context>At: {dateFormatter.format(event.message.timestamp)}</Context>
{messageBody}
<Actions blockId="launch-modal">
<Button value="reply" actionId="reply">
Reply
</Button>
</Actions>
</Blocks>
),
//pass the WhatsApp message to the next trigger
metadata: {
whatsAppMessage: event.message,
},
});
},
}).listen();