Surface Components
The root component of a view containing layout components.
You can add components to these surfaces: the Home tab, messages, and modals.
Home
The Home tab is a persistent, dynamic interface for apps.
Present each of your users with a unique Home tab just for them, always found in the same place.
The Home tab is a space you can fully customize in your app, complete with intricate layouts and deep interactivity. A single API endpoint handles building and updating the Home tab. See Home is where the tabs are.
Publish views to the app’s home tab in Slack using Slack.BotClient. See Access a Slack Client.
Apex SDK for Slack is subject to Slack’s block limit, which is 100 blocks in a the Home tab. If you are displaying Salesforce record data that exceeds 100 blocks, we recommend that you provide a button or link that directs a user back to Salesforce for a complete view.
Warning
Examples
This example creates a header and section for the Home tab.
1components:
2 - definition: home
3 components:
4 - definition: header
5 properties:
6 text: "Our App"
7 - definition: section
8 properties:
9 text:
10 type: "mrkdwn"
11 text: "Our app helps you take off. :rocket:"
12 - definition: divider
13 - definition: section
14 properties:
15 text: "For more information, check out the example."
16 components:
17 - definition: button
18 properties:
19 name: "my_button"
20 label: "Click Me"
21 url: "https://www.example.com"This example creates some text, a header, and several buttons for the Home tab.
1description: "This is a simple app home"
2schema:
3 properties:
4 bodyText:
5 type: string
6 required: true
7 headerText:
8 type: string
9 defaultValue: "Welcome Home"
10components:
11 - definition: home
12 components:
13 - definition: header
14 properties:
15 text: "{!view.properties.headerText}"
16 - definition: section
17 properties:
18 text:
19 type: "mrkdwn"
20 text: "{!view.properties.bodyText}"
21 - definition: divider
22 - definition: actions
23 components:
24 - definition: button
25 properties:
26 label: "Click Me"
27 name: "homeButton"
28 value: "someData"
29 events:
30 onclick:
31 definition: "apex__action__HandleClick"
32 - definition: button
33 properties:
34 label: "View Opportunity"
35 name: "opptyButton"
36 events:
37 onclick:
38 definition: "apex__action__ViewRecord"
39 properties:
40 objectApiName: "Opportunity"
41 recordId: "006R0000003FpnmIII"Keys
| Key | Type | Required | Description |
|---|---|---|---|
definition | String | Yes | The value must be home. |
components | Array | Yes | An array of layout components. |
Message
Messages are one of the basic ingredients of Slack apps. Compose them, send them, retrieve them, update them, delete them.
Send messages to a channel using Slack.BotClient and Slack.UserClient. See Access a Slack Client.
Apex SDK for Slack is subject to Slack’s block limit, which is 50 blocks in a message. If you are displaying Salesforce record data that exceeds 50 blocks, we recommend that you provide a button or link that directs a user back to Salesforce for a complete view.
Warning
Examples
This example creates a message with a header and a section containing some text.
1components:
2 - definition: message
3 properties:
4 text: "All your tasks are completed."
5 components:
6 - definition: header
7 properties:
8 text: "Daily Tasks"
9 - definition: section
10 properties:
11 text:
12 type: "mrkdwn"
13 text: "You've completed all your tasks today. :tada:"This example creates a message with a header and a button that opens a URL.
1description: "This is the app welcome message."
2schema:
3 properties:
4 homeLink:
5 type: string
6 required: true
7components:
8 - definition: message
9 properties:
10 text: "This is the app welcome message."
11 components:
12 - definition: header
13 properties:
14 text: "Welcome!"
15 - definition: actions
16 components:
17 - definition: button
18 properties:
19 name: "visit_home_button"
20 label: "Visit the Home Page"
21 url: "{!view.properties.homeLink}"Keys
| Key | Type | Required | Description |
|---|---|---|---|
definition | String | Yes | The value must be message. |
properties | Object | No | The component’s properties. |
properties.text | String, Expression | No | When you use components in a message payload, text becomes a fallback message displayed in notifications. Use components to define everything else about the visible message. |
components | Array | No | An array of layout components to render as the message. |
Modal
Modals are focused spaces to request and collect data from users, or to temporarily display dynamic and interactive information.
Modals are the Slack app equivalent of alert boxes, pop-ups, or dialog boxes. They capture and maintain focus within Slack until the user submits or dismisses the modal. Compose a modal using visual and interactive components.
If you’re not familiar with a modal’s lifecycle in a Slack app, see Modals: focused spaces for user interaction.
Modals can handle these interaction payloads.
block_actions—Received when a user interacts with a componentview_submission—Received when a user submits a view in a modal.view_closed—Received when a user dismisses a modal. To receive these payloads, the modal view must have been created with thenotify_on_closeargument set totrue.
Payloads include a trigger_id that you must use to respond back with a modal. Slack has a 3-second expiration on the trigger_id.
But what if you’re making an API call to fetch some data? A request could exceed this 3-second timeout. To satisfy the 3-second ack rule and work with modals, use the Slack.ActionHandler Apex class. Slack.ActionHandler has a number of methods to help you structure your handler. You can respond to Slack with a staging modal, which is a simple Loading… view. At this point, app code can take time to build up the actual modal view to show.
Apex SDK for Slack is subject to Slack’s block limit, which is 100 blocks in a modal. If you are displaying Salesforce record data that exceeds 100 blocks, we recommend that you provide a button or link that directs a user back to Salesforce for a complete view.
Warning
Example
1components:
2 - definition: modal
3 properties:
4 title: "Update Opportunity"
5 submitLabel: "Update"
6 closeLabel: "Cancel"
7 events:
8 onsubmit:
9 definition: "apex__action__EditRecord"
10 properties:
11 recordId: "{!view.properties.recordId}"
12 objectApiName: "Opportunity"
13 oncancel:
14 definition: "apex__action__CancelSave"
15 properties:
16 recordId: "{!view.properties.recordId}"
17 objectApiName: "Opportunity"
18 components:
19 - definition: section
20 properties:
21 text: "Text Value"Keys
| Key | Type | Required | Description |
|---|---|---|---|
definition | String | Yes | The value must be modal. |
properties | Object | Yes | The component’s properties |
properties.title | String, Plain Text, Expression | Yes | Title text for the modal |
properties.submitLabel | String, Plain Text, Expression | No | A label for the submit button |
properties.closeLabel | String, Plain Text, Expression | No | A label for the close button |
components | Array | No | An array of layout components to render inside the modal. |
events | Object | No | The events on the modal that trigger Actions to execute. |
events.onsubmit | Object | No | An object that defines the action to take when the onsubmit event fires and the properties to pass to the action. |
events.onsubmit.definition | String | No | The action that executes when a user clicks the submit button. |
events.onsubmit.properties | Object | No | The properties to pass to the action. |
events.oncancel | Object | No | An object that defines the action to take when the oncancel event fires and the properties to pass to the action. |
events.oncancel.definition | String | No | The action that executes when a user clicks the cancel button. |
events.oncancel.properties | Object | No | The properties to pass to the action. |
See Also
Beta Feature
j