Elements

Visual components like text or for user input, such as a button or checkbox.

Elements represent the smallest pieces of a view. Elements must be rendered within layout components.

When working with events from the App Home page, put your elements in an actions block.

Button

An interactive button. The button can be a trigger for anything from opening a simple link to starting a complex workflow.

Button Example

Examples

Render a button within an actions block.

1- definition: actions
2  name: "apex_actions"
3  components:
4    - definition: button
5      properties:
6        label: "Confirm"
7        style: "primary"
8        name: "confirm_button"

1components:
2  - definition: button
3    properties:
4      name: "my_button"
5      label: "Delete"
6      value: "delete_record"
7      style: "danger"
8    events:
9      onclick:
10        definition: "apex__action__ViewRecord"
11        properties:
12          recordId: "006R0000003FpnoIAC"
13          objectApiName: "Opportunity"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `button`.
`properties`	Object	Yes	The component’s properties.
`properties.label`	String, Plain Text, Expression	No	The button label.
`properties.name`	String, Expression	Yes	The name applied to the button element. The name is used to retrieve the value on submission.
`properties.value`	String, Expression	No	The value to send along with the interaction payload.
`properties.style`	String. Possible values, `primary`, `danger`, `null`	No	The button style. The default value is `null`.
`properties.url`	String, Expression	No	A URL that’s opened on button click. URLs must use a valid protocol scheme such as `http://` or `https://`.
`properties.confirm`	Confirm	No	A confirmation dialog to display after a button click.
`events`	Object	No	Events that trigger an action.
`events.onclick`	Object	No	Fires when a user clicks the button.
`events.onclick.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onclick.properties`	Object	No	Properties to pass to the action.

Checkbox

Available in: Section | Actions | Input

A checkbox that allows a user to specify a single boolean value.

Checkbox Example

Examples

This example shows a checkbox that defaults to selected.

1components:
2  - definition: checkbox
3    properties:
4      label: "Select single boolean value"
5      name: "checkbox"
6      value: true

This example shows checkboxes that render as selected or unselected, a checkbox with a label, and a required checkbox.

1description: "Example usage of the checkbox component"
2components:
3  - definition: modal
4    properties:
5      title: "Checkbox Example"
6      submitLabel: "Submit"
7      closeLabel: "Cancel"
8    components:
9      - definition: input
10        name: "default_selected_checkbox"
11        properties:
12          label: "Checkbox Default Selected"
13        components:
14          - definition: checkbox
15            properties:
16              name: "checkbox1"
17              value: true
18      - definition: input
19        name: "default_unselected_checkbox"
20        properties:
21          label: "Checkbox Default Unselected"
22        components:
23          - definition: checkbox
24            properties:
25              name: "checkbox2"
26              value: false
27      - definition: input
28        name: "checkbox_with_description"
29        properties:
30          label: "Checkbox with Label and Description"
31        components:
32          - definition: checkbox
33            properties:
34              name: "checkbox3"
35              label: Checkbox Label
36              description: Checkbox Description
37      - definition: input
38        name: "required_checkbox"
39        properties:
40          label: "Required Checkbox"
41          required: true
42        components:
43          - definition: checkbox
44            properties:
45              name: "checkbox4"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `checkbox`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the checkbox input. The name is used to retrieve the value on submission.
`properties.value`	Boolean, Expression	No	The initial value applied to the checkbox input. Defaults to `false`.
`properties.label`	String, Expression	No	The label for the checkbox input.
`properties.description`	String, Expression	No	The description for the checkbox input.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a checkbox is selected.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when a checkbox is ticked or unticked.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Checkbox Group

Available in: Section | Actions | Input

A checkbox group that allows a user to choose multiple items from a list of possible options.

Checkbox Group Example

Example

On an initial render, Option 1 is selected and Option 2 isn’t selected by default.

1components:
2  - definition: checkboxGroup
3    properties:
4      name: "options_checkbox"
5      options:
6        - identifier: "option_1"
7          label: "Option 1"
8          value: true
9          description: "This is option 1"
10        - identifier: "option_2"
11          label: "Option 2"
12          value: false

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `checkboxGroup`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the checkbox inputs. The name is used to retrieve the values on submission.
`properties.options`	Options	Yes	A list of checkbox items.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a checkbox is selected.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when a checkbox is ticked or unticked.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Conversations Select

Available in: Section | Actions | Input

This multi-select menu populates its options with a list of public and private channels, DMs, and multi-party DMs that are visible to the current user in the active workspace.

Conversations Select Example

Example

This example selects a single conversation.

1components:
2  - definition: input
3    name: "conversationsSelectId"
4    properties:
5      label: "Select a conversation"
6    components:
7      - definition: conversationsSelect
8        properties:
9          name: "conversationsSelectName"
10          value: "C012AB3CD"
11          defaultCurrent: true

This example allows multiple selections.

1components:
2  - definition: input
3    name: "conversationsSelectMultiId"
4    properties:
5      label: "Select multiple conversations"
6    components:
7      - definition: conversationsSelect
8        properties:
9          name: "conversationsSelectMultiName"
10          multiselect: true
11          value:
12            - "C012AB3CD"
13            - "C345XY6AB"

This example filters to include only public and private channels.

1components:
2  - definition: input
3    name: "conversationsSelectFilterChannelId"
4    properties:
5      label: "Select a channel"
6    components:
7      - definition: conversationsSelect
8        properties:
9          name: "conversationsSelectName"
10          filter:
11            include:
12              - "public"
13              - "private"
14            excludeExternalShared: false

This example filters to include direct messages and exclude bots.

1components:
2  - definition: input
3    name: "conversationsSelectFilterDmId"
4    properties:
5      label: "Select a DM"
6    components:
7      - definition: conversationsSelect
8        properties:
9          name: "conversationsSelectName"
10          filter:
11            include:
12              - "im"
13              - "mpim"
14            excludeBotUsers: true

This example shows a comprehensive usage of the conversationsSelect component.

1description: "Example usage of the conversationsSelect component"
2components:
3  - definition: modal
4    properties:
5      title: "Conversations Select Example"
6      submitLabel: "Submit"
7      closeLabel: "Cancel"
8    components:
9      - definition: section
10        properties:
11          text: "Single conversation select with required properties only"
12      - definition: input
13        name: "conversationsSelectId"
14        properties:
15          label: "Select a conversation"
16        components:
17          - definition: conversationsSelect
18            properties:
19              name: "conversationsSelectName"
20      - definition: divider
21      - definition: section
22        properties:
23          text: "Single conversation select with placeholder"
24      - definition: input
25        name: "conversationsSelectPlaceholderId"
26        properties:
27          label: "Select a conversation"
28        components:
29          - definition: conversationsSelect
30            properties:
31              name: "conversationsSelectPlaceholderName"
32              placeholder: "Choose a conversation"
33      - definition: divider
34      - definition: section
35        properties:
36          text: "Single conversation select with default channel selected"
37      - definition: input
38        name: "conversationsSelectDefaultCurrentId"
39        properties:
40          label: "Select a conversation"
41        components:
42          - definition: conversationsSelect
43            properties:
44              name: "conversationsSelectDefaultCurrentName"
45              defaultCurrent: true
46      - definition: divider
47      - definition: section
48        properties:
49          text: "Single conversation select as required input"
50      - definition: input
51        name: "conversationsSelectRequiredId"
52        properties:
53          label: "Select a conversation"
54          required: true
55        components:
56          - definition: conversationsSelect
57            properties:
58              name: "conversationsSelectRequiredName"
59      - definition: divider
60      - definition: section
61        properties:
62          text: "Single conversation select filtered to only channels"
63      - definition: input
64        name: "conversationsSelectFilterChannelId"
65        properties:
66          label: "Select a conversation"
67        components:
68          - definition: conversationsSelect
69            properties:
70              name: "conversationsSelectFilterChannelName"
71              filter:
72                include:
73                  - "public"
74                  - "private"
75                excludeExternalShared: false
76      - definition: divider
77      - definition: section
78        properties:
79          text: "Single conversation select filtered to only direct messages excluding bots"
80      - definition: input
81        name: "conversationsSelectFilterDmId"
82        properties:
83          label: "Select a conversation"
84        components:
85          - definition: conversationsSelect
86            properties:
87              name: "conversationsSelectFilterDmName"
88              filter:
89                include:
90                  - "im"
91                  - "mpim"
92                excludeBotUsers: true
93      - definition: divider
94      - definition: section
95        properties:
96          text: "Single conversation select with confirm dialog"
97      - definition: input
98        name: "conversationsSelectConfirmId"
99        properties:
100          label: "Select a conversation"
101        components:
102          - definition: conversationsSelect
103            properties:
104              name: "conversationsSelectConfirmName"
105              confirm:
106                title: "Confirm conversation selection"
107                text: "Please confirm the conversation selection"
108                confirm: "Confirm"
109                deny: "Cancel"
110                style: "primary"
111      - definition: divider
112      - definition: section
113        properties:
114          text: "Multi conversation select with required properties only"
115      - definition: input
116        name: "conversationsMultiSelectId"
117        properties:
118          label: "Select conversations"
119        components:
120          - definition: conversationsSelect
121            properties:
122              name: "conversationsMultiSelectName"
123              multiselect: true
124      - definition: divider
125      - definition: section
126        properties:
127          text: "Multi conversation select with default channel selected"
128      - definition: input
129        name: "conversationsMultiSelectDefaultCurrentId"
130        properties:
131          label: "Select conversations"
132        components:
133          - definition: conversationsSelect
134            properties:
135              name: "conversationsMultiSelectDefaultCurrentName"
136              multiselect: true
137              defaultCurrent: true
138      - definition: divider
139      - definition: section
140        properties:
141          text: "Multi conversation select with max selection"
142      - definition: input
143        name: "conversationsMultiSelectMaxSelectionId"
144        properties:
145          label: "Select conversations"
146        components:
147          - definition: conversationsSelect
148            properties:
149              name: "conversationsMultiSelectMaxSelectionName"
150              multiselect: true
151              maxSelection: 2
152      - definition: divider
153      - definition: section
154        properties:
155          text: "Multi conversation select filtered to only channels"
156      - definition: input
157        name: "conversationsMultiSelectFilterChannelId"
158        properties:
159          label: "Select conversations"
160        components:
161          - definition: conversationsSelect
162            properties:
163              name: "conversationsMultiSelectFilterChannelName"
164              multiselect: true
165              filter:
166                include:
167                  - "public"
168                  - "private"
169                excludeExternalShared: false
170      - definition: divider
171      - definition: section
172        properties:
173          text: "Multi conversation select filtered to only direct messages excluding bots"
174      - definition: input
175        name: "conversationsMultiSelectFilterDmId"
176        properties:
177          label: "Select a conversation"
178        components:
179          - definition: conversationsSelect
180            properties:
181              name: "conversationsMultiSelectFilterDmName"
182              multiselect: true
183              filter:
184                include:
185                  - "im"
186                  - "mpim"
187                excludeBotUsers: true

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `conversationsSelect`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the conversations select component. The name is used to retrieve the value on submission.
`properties.placeholder`	String, Expression, Plain Text	No	A placeholder value to display when nothing is selected.
`properties.multiselect`	Boolean, Expression	No	Indicates whether the component supports multiple selections. The default value is `false`.
`properties.maxSelection`	Number, Expression	No	If `multiselect` is `true`, you can optionally specify `maxSelection`. The maximum number of conversations that can be selected. The minimum value is `1`.
`properties.defaultCurrent`	Boolean, Expression	No	Pre-populates the select with the conversation the user was viewing when they opened the modal. The default value is `false`.
`properties.filter`	Filter, Expression	No	Filter the list of available conversations.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a conversation is selected.
`events`	Object	No	Events that trigger an action.
`properties.value`	String, Array, Expression	No	Indicates the conversation, or conversations if `multiselect` is `true`, selected on an initial render. Must match the ID of a conversation in Slack. If the value is an array, it’s an array of strings. If `defaultCurrent` is also supplied, `value` takes precedence.
`events.onchange`	Object	No	Fires when a conversation is selected, or the multi-select menu is confirmed.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Date Picker

Available in: Section | Actions | Input

An element that lets users select a date from a calendar.

Date Picker Example

The date picker doesn’t currently support multiple time zones, which can lead to issues when editing and submitting values. For example, if the field value is stored as 11:00 pm PST on 3/9/2022, the date picker displays the date incorrectly as 3/9/2022 for users in EST. The date picker does not display the time zone or convert the date to the local time zone.

Warning

Examples

This example shows a date picker that displays a confirmation dialog after a date is selected.

1components:
2  - definition: input
3    name: "exampleDatepicker"
4    properties:
5      label: "Example datepicker"
6    components:
7      - definition: datepicker
8        properties:
9          value: "2021-04-01"
10          placeholder: "Choose a date"
11          name: "exampleDatepicker"
12          confirm: "{!view.properties.confirm}"
13            title: "Confirm date selection"
14            text: "Please confirm the date selection"
15            confirm: "Confirm"
16            deny: "Cancel"
17            style: "primary"

This example shows various ways to use a date picker.

1components:
2  - definition: modal
3    properties:
4      title: "Datepicker Example"
5      submitLabel: "Submit"
6      closeLabel: "Cancel"
7    components:
8      - definition: section
9        properties:
10          text: "Datepicker with required properties only"
11      - definition: input
12        name: "exampleDatepickerId"
13        properties:
14          label: "Pick a date"
15        components:
16          - definition: datepicker
17            properties:
18              name: "exampleDatepickerName"
19      - definition: divider
20      - definition: section
21        properties:
22          text: "Datepicker with placeholder"
23      - definition: input
24        name: "exampleDatepickerPlaceholderId"
25        properties:
26          label: "Pick a date"
27        components:
28          - definition: datepicker
29            properties:
30              placeholder: "Choose a date"
31              name: "exampleDatepickerPlaceholderName"
32      - definition: divider
33      - definition: section
34        properties:
35          text: "Datepicker with initial date"
36      - definition: input
37        name: "exampleDatepickerInitialDateId"
38        properties:
39          label: "Pick a date"
40        components:
41          - definition: datepicker
42            properties:
43              value: "2021-04-01"
44              name: "exampleDatepickerInitialDateName"
45      - definition: divider
46      - definition: section
47        properties:
48          text: "Datepicker as required input"
49          required: true
50      - definition: input
51        name: "exampleDatepickerRequiredId"
52        properties:
53          label: "Pick a date"
54        components:
55          - definition: datepicker
56            properties:
57              name: "exampleDatepickerRequiredName"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `datepicker`.
`properties`	Object	Yes	The component’s properties.
`properties.value`	String, Expression	No	The initial date that’s selected when the date picker is loaded in the format `YYYY-MM-DD`.
`properties.placeholder`	String, Plain Text, Expression	No	Text used as a placeholder when the value is empty.
`properties.name`	String, Expression	Yes	A name applied to the date picker. The name is used to retrieve the values on submission.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a date is selected.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when a date is chosen and the date picker closes.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

External Select

This component is a lookup that fetches options from a data source when a user enters text into the field. Use List<Slack.Option> or List<Slack.OptionGroup> to create your data source and return it as a Slack.OptionDataResponse object.

Available in: Section | Actions | Input

Multiple Select External Select Input

Example

This example displays a list of accounts by name in an external select component.

1components:
2    - definition: actions
3        name: "external_select_accounts"
4        components:
5          - definition: externalSelect
6            properties:
7              placeholder: "Look up an account by name"
8              name: "account_lookup"
9              datasource:
10                definition: "apex__DataProviderAccountLookup.getAccountsByName"

Return data to the External Select component using Slack.OptionDataResponse.

This example is from view_opportunity_by_account.view in the sample app.

Tip

1public class DataProviderAccountLookup {
2    public static Slack.OptionDataResponse getAccountsByName(String value) {
3        List<Account> accounts;
4        if (String.isNotBlank(value)) {
5            String name = '%' + value + '%';
6            accounts = [SELECT Id, Name FROM Account WHERE Name LIKE :name WITH SECURITY_ENFORCED LIMIT 10];
7        }
8
9        List<Slack.Option> accountOptions = new List<Slack.Option>();
10        if (accounts != null) {
11            for (Account account : accounts) {
12                Slack.Option option = new Slack.Option(account.Name, account.Id);
13                accountOptions.add(option);
14            }
15        }
16        return new Slack.OptionDataResponse(accountOptions);
17    }
18}

Multiple Selection

To allow multiple selections, set the multiselect property to true.

1components:
2  - definition: externalSelect
3    properties:
4      multiselect: true
5      placeholder: "Select one or more opportunities"
6      name: "external_select_multi"
7      datasource:
8        definition: "apex__MyDataProvider.getOpportunities"
9        properties:
10          objectApiName: "Opportunity"

Pre-selected Option

Pre-selecting renders the select component with a selected value. To pre-select a value, use one of these methods.

Bind an expression directly into the value property. This expression must point to a dataProvider that provides preselected values (see Implement a Data Provider).
Add an array of pre-selected options in the value property, or a single Slack.OptionDataResponse object.

Pre-selected Option Expression Example

1components:
2  - definition: externalSelect
3    properties:
4      multiselect: true
5      placeholder: "Select one or more opportunities"
6      name: "external_select"
7      value: "{!recordsLookup}"
8      datasource:
9        definition: "apex__MyDataProvider.getOpportunities"
10        properties:
11          objectApiName: "Opportunity"

Pre-selected Option Inline Array Example

1components:
2  - definition: externalSelect
3    properties:
4      multiselect: true
5      placeholder: "Select one or more opportunities"
6      name: "external_select"
7      value:
8        - text: "Option 1"
9          value: "value1"
10        - text: "Option 2"
11          value: "value2"
12      datasource:
13        definition: "apex__MyDataProvider.getOpportunities"
14        properties:
15          objectApiName: "Opportunity"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `externalSelect`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the external select items. The name is used to retrieve the value on submission.
`properties.placeholder`	String, Expression, Plain Text	No	A placeholder value for the `externalSelect` menu to display when nothing is selected. The default placeholder value is “Select option(s)”.
`properties.value`	Object, Array of objects, Expression	No	Provide a single option object or array of `options` to set as pre-selected.
`properties.value.text`	String, Plain Text, Mrkdwn	Yes	A label for the selected item.
`properties.value.value`	String, Plain Text	No	The value of the selected item.
`properties.multiselect`	Boolean, Expression	No	Indicates whether the external select component supports multiple selections. The default value is `false`.
`properties.maxSelection`	Number, Expression	No	If `multiselect` is `true`, you can optionally specify `maxSelection`. The maximum number of options that can be selected. The minimum value is `1`.
`properties.minQueryLength`	Number, Expression	No	The minimum number of characters that a user must enter into the external select input before results are queried and updated in available selections. The minimum value is `1`.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a radio button is selected.
`properties.datasource`	String, Object, Expression	Yes	A valid data provider identifier string or object containing an identifier and properties to be passed into a data provider.
`properties.datasource.definition`	String, Object, Expression	Yes	A valid data provider identifier is required to be present within the `datasource` if the `datasource` takes the form of an Object.
`properties.datasource.properties`	Object, Expression	No	Contains any parameters to be passed into the option data provider.

Inline Image

Available in: Section | Context

Display an image alongside additional content, such as text.

Inline Image example

For a component that holds only an image, see image. Both image components use - definition: image. However, they’re available in different containing components, and the layout image has a title property.

Tip

Example

This example is an image within a context component.

1components:
2  - definition: context
3    components:
4      - definition: image
5        properties:
6          url: "https://via.placeholder.com/150"
7          altText: "Placeholder image"
8      - definition: text
9        properties:
10          text: "Check out my image"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `image`.
`properties`	Object	Yes	The component’s properties.
`properties.url`	String, Expression	Yes	The URL of the image to display. URLs must use a valid protocol scheme such as `http://` or `https://`.
`properties.altText`	String, Expression	Yes	A plain text description of the image.

Overflow

Available in: Section | Actions

An overflow menu in a section or actions component.

Overflow example

Examples

This example creates an overflow menu with 3 options.

1components:
2  - definition: overflow
3    properties:
4      name: "overflow_example"
5      options:
6        - identifier: "option_1"
7          label: "Option 1"
8        - identifier: "option_2"
9          label: "Option 2"
10        - identifier: "option_3"
11          label: "Option 3"
12          url: "https://www.example.com"

This example creates an overflow menu in an actions block.

1components:
2  - definition: modal
3    properties:
4      title: "Overflow Example"
5      submitLabel: "Submit"
6      closeLabel: "Cancel"
7    components:
8      - definition: actions
9        name: "actions_block"
10        components:
11          - definition: overflow
12            properties:
13              name: "overflow_in_section"
14              options:
15                - identifier: "option_1"
16                  label: "Option 1"
17                - identifier: "option_2"
18                  label: "Option 2"
19                - identifier: "option_3"
20                  label: "Option 3"
21                  url: "https://www.example.com"
22              confirm:
23                title: "Confirm selection"
24                text: "Please confirm the selection"
25                confirm: "Confirm"
26                deny: "Cancel"
27                style: "primary"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `overflow`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	A name applied to the overflow element, used to retrieve the value when a menu option is selected.
`properties.options`	Options	Yes	A list of options to display in the overflow menu. A minimum of 2 options is required and a maximum of 5 options is allowed.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a checkbox is selected.
`events`	Object	No	Events that trigger an action.
`events.onclick`	Object	No	Fires when an item from the overflow menu is clicked.
`events.onclick.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onclick.properties`	Object	No	Properties to pass to the action.

Radio Group

Available in: Section | Actions | Input

A radio button group that allows a user to choose one item from a list of possible options.

Radio Button Example

Example

On an initial render, Option 1 is selected.

1components:
2  - definition: radioGroup
3    properties:
4      name: "radio_button_group_options"
5      value: "option_1"
6      options:
7        - identifier: "option_1"
8          label: "Option 1"
9          description: "This is a radio button"
10        - identifier: "option_2"
11          label: "Option 2"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `radioGroup`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the radio button inputs. The name is used to retrieve the values on submission.
`properties.value`	String, Expression	No	Optionally indicates the value to select on an initial render. Must match the identifier of one of the items passed in to the `options` field.
`properties.options`	Options	Yes	A list of radio button items.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a radio button is selected.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when the selected radio in a group of radio buttons is changed.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Select

Available in: Section | Actions | Input

A select menu, like a standard HTML <select> tag, creates a dropdown menu with a list of options for a user to choose. The select menu also includes type-ahead functionality, where a user can type a part or all of an option string to filter the list.

Select Example

Menu Options

This example shows a select menu in a modal, with option values specified by options. The optional value parameter provides the input string entered into the select component that’s used to perform the lookup. The value you provide preselects an option from the options identifier or from your data provider.

1components:
2  - definition: modal
3    properties:
4      title: "Create Opportunity"
5      submitLabel: "Create"
6    components:
7      - definition: input
8        properties:
9          label: "Stage"
10          required: true
11        components:
12          - definition: select
13            properties:
14              name: "StageName"
15              value: "Prospecting"
16              placeholder: "Select a stage."
17              options:
18                - identifier: "Prospecting"
19                  label: "Prospecting"
20                - identifier: "Qualification"
21                  label: "Qualification"
22                - identifier: "Needs Analysis"
23                  label: "Needs Analysis"

Alternatively, you can pass an expression to value and use a data provider that returns List<Slack.Option> or List<Slack.OptionGroup>.

1description: 'Find and View Opportunities by Account'
2schema:
3    properties:
4        recordId:
5            type: string
6            required: true
7dataproviders:
8    opportunity:
9        definition: 'apex__DataProviderOpportunityLookup.getOpportunitiesByAccount'
10        properties:
11            accountId: '{!view.properties.recordId}'
12components:
13    - definition: modal
14      properties:
15          title: 'Select an Opportunity'
16          submitLabel: 'View Opportunity'
17       components:
18    - definition: input
19      name: "all_opportunities"
20      properties:
21        label: "All Opportunities By Account"
22      components:
23        - definition: select
24          properties:
25            name: "select_opportunity"
26            placeholder: "Select an Opportunity"
27            options: "{!opportunity}"

Pass in the accountId property to the Apex class.

1public static List<Slack.Option> getOpportunitiesByAccount(String accountId) { ... }

This example is from view_opportunity_by_account.view in the sample app.

Tip

Select Menu in Actions and Input

Place the select component in an actions block when using it from the App Home page.

1- definition: actions
2  components:
3    - definition: select
4      properties:
5        name: "select_options"
6        value: "option_1"
7        placeholder: "Please select an option."
8        options:
9          - identifier: "option_3"
10            label: "Option 3"
11          - identifier: "option_4"
12            label: "Option 4"
13      events:
14        onchange:
15          definition: "apex__action__homeSelectChanged"

On initial render, Option 1 is selected.

1components:
2  - definition: input
3    name: "input_block"
4    properties:
5      label: "Select an option"
6    components:
7      - definition: select
8        properties:
9          name: "select_options"
10          value: "option_1"
11          placeholder: "Please select an option."
12          options:
13            - identifier: "option_1"
14              label: "Option 1"
15              description: "This is option 1"
16            - identifier: "option_2"
17              label: "Option 2"
18          confirm:
19            title: "Confirm select selection"
20            text: "Please confirm selection"
21            confirm: "Confirm"
22            deny: "Cancel"
23            style: "primary"
24        events:
25          onchange:
26            definition: "apex__MyDataProvider.ViewAction"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `select`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	Yes	The name applied to the select items. The name is used to retrieve the value on submission.
`properties.placeholder`	String, Expression, Plain Text	No	A placeholder value for the select menu to display when nothing is selected. Use a descriptive placeholder like “Select a status” to convey the field’s purpose. If you don’t include a placeholder, screen readers override the label and announce “Pick an option”.
`properties.value`	String, Array of strings, Expression	No	Optionally indicates the value, or values if `multiselect`, selected on an initial render. Must match the identifier of one of the options passed to `options` or `optionsGroup`.
`properties.options`	Options	No	Provide a value for `options` or `optionGroups`, but not both. A list of selectable items. If more than 100 `options` are provided, the `options` items are automatically split into `optionGroups` of 100 `options` each.
`properties.optionGroups`	Option Groups	No	Provide a value for `options` or `optionGroups`, but not both. A list of select groups. Each group accepts a label and an array of `options`. Maximum of 100 `options` per group.
`properties.multiselect`	Boolean, Expression	No	Indicates whether the select component supports multiple selections. The default value is `false`.
`properties.maxSelection`	Number, Expression	No	If `multiselect` is `true`, you can optionally specify `maxSelection`. The maximum number of options that can be selected. The minimum value is `1`.
`properties.valueDelimiter`	String, Expression	No	If `multiselect` is `true` and `value` resolves to a String that represents a delimited list, specify `valueDelimiter` with the appropriate list delimiter. For example, a `value` of `option_1;option2` is delimited by `;`.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after an option is selected.
`events`	Object	No	The events on the select component that trigger actions to execute.
`events.onchange`	Object	No	An object that defines the action to take when the `onchange` event fires and the properties to pass to the action.
`events.onchange.definition`	String	No	The action that executes when a user selects an option.
`events.onchange.properties`	Object	No	The properties to pass to the action.

Text

Available in: Context

Use this component to render text in a context component only.

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `text`.
`properties`	Object	Yes	The component’s properties.
`properties.text`	String, Expression, Plain Text, Mrkdwn	Yes	The text for the component.

Text Input

Available in: Input

A text input, similar to the HTML <input> tag, creates a field where a user can enter freeform data. It can appear as a single-line field or a larger textarea using the multiline flag.

Text input fields don’t currently support the onchange event. You can trigger an interaction payload only by pressing the submit button on your modal.

Text Input Example

Example

1components:
2  - definition: input
3    name: "input_block"
4    properties:
5      label: "Name"
6    components:
7      - definition: textInput
8        properties:
9          name: "text_input"
10          placeholder: "Enter Name"
11          value: "Global Media - 400 Widgets"
12          minLength: 2

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `textInput`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String Expression	No	An identifier used to retrieve the value on submission.
`properties.placeholder`	String, Expression, Plain Text	No	A placeholder value for the select menu to display when nothing is selected.
`properties.value`	String, Expression	No	The initial value for the input field.
`properties.minLength`	Integer, Expression	No	The minimum number of characters allowed on form submission.
`properties.maxLength`	Integer, Expression	No	The maximum number of characters allowed on form submission.
`properties.multiline`	Boolean, Expression	No	If `true`, the input field supports multiple lines. The default value is `false`.

Time Picker

Available in: Section | Actions | Input

Select a time of day to a 15-minute increment.

Time Picker Example

The time picker renders as a select element. Slack’s time picker element is in beta and isn’t used by Apex SDK for Slack.

The time picker doesn’t currently support multiple time zones, which can lead to issues when editing and submitting values. For example, if the field value is stored as 11:00 pm PST on 3/9/2022, the time picker displays the time incorrectly as 11:00 pm for users in EST. The time picker does not display the time zone or convert the date to the local time zone.

Warning

Example

1components:
2  - definition: input
3    name: "exampleTimepicker"
4    properties:
5      label: "Example timepicker"
6      hint: "Format: HH:mm"
7    components:
8      - definition: timepicker
9        properties:
10          value: "09:00"
11          placeholder: "Provide a time"
12          name: "exampleTimepicker"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `timepicker`.
`properties`	Object	Yes	The component’s properties.
`properties.value`	String, Expression	No	The initial time that’s selected when the time picker is loaded. The format is `HH:mm` where `HH` is 24-hour format of an hour (00 to 23) and `mm` is minutes with leading zeros (00 to 59). The time zone is local to the Slack user client.
`properties.placeholder`	String, Plain Text, Expression	No	Text used as a placeholder when the `value` is empty.
`properties.name`	String, Expression	Yes	A name applied to the time picker. The name is used to retrieve the value on submission.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a time is selected.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when a time is chosen in the time picker.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Users Select

Available in: Section | Actions | Input

This multi-select menu populates its options with a list of Slack users visible to the current user in the active workspace.

Users Select Example

Example

This example allows a single selection.

1components:
2  - definition: input
3    name: "usersSelectId"
4    properties:
5      label: "Select a user"
6    components:
7      - definition: usersSelect
8        properties:
9          name: "usersSelectName"
10          value: "U01KHPH4A6T"

This example allows multiple selections.

1components:
2  - definition: input
3    name: "usersSelectMultiId"
4    properties:
5      label: "Select multiple users"
6    components:
7      - definition: usersSelect
8        properties:
9          name: "usersSelectMultiName"
10          multiselect: true
11          value:
12            - "U01KHPH4A6T"
13            - "WAWUZ49PT"

This example shows a comprehensive usage of the usersSelect component.

1description: "Example usage of the usersSelect component"
2components:
3  - definition: modal
4    properties:
5      title: "Users Select Example"
6      submitLabel: "Submit"
7      closeLabel: "Cancel"
8    components:
9      - definition: section
10        properties:
11          text: "Single user select with required properties only"
12      - definition: input
13        name: "usersSelectId"
14        properties:
15          label: "Select a user"
16        components:
17          - definition: usersSelect
18            properties:
19              name: "usersSelectName"
20      - definition: divider
21      - definition: section
22        properties:
23          text: "Single user select with placeholder"
24      - definition: input
25        name: "usersSelectPlaceholderId"
26        properties:
27          label: "Select a user"
28        components:
29          - definition: usersSelect
30            properties:
31              name: "usersSelectPlaceholderName"
32              placeholder: "Choose a user"
33      - definition: divider
34      - definition: section
35        properties:
36          text: "Single user select with initial user"
37      - definition: input
38        name: "usersSelectInitialUserId"
39        properties:
40          label: "Select a user"
41        components:
42          - definition: usersSelect
43            properties:
44              name: "usersSelectInitialUserName"
45              value: "USLACKBOT"
46      - definition: divider
47      - definition: section
48        properties:
49          text: "Single user select as required input"
50      - definition: input
51        name: "usersSelectRequiredId"
52        properties:
53          label: "Select a user"
54          required: true
55        components:
56          - definition: usersSelect
57            properties:
58              name: "usersSelectRequiredName"
59      - definition: divider
60      - definition: section
61        properties:
62          text: "Single user select with confirm dialog"
63      - definition: input
64        name: "usersSelectConfirmId"
65        properties:
66          label: "Select a user"
67        components:
68          - definition: usersSelect
69            properties:
70              name: "usersSelectConfirmName"
71              confirm:
72                title: "Confirm user selection"
73                text: "Please confirm the user selection"
74                confirm: "Confirm"
75                deny: "Cancel"
76                style: "primary"
77      - definition: divider
78      - definition: section
79        properties:
80          text: "Multi user select with required properties only"
81      - definition: input
82        name: "usersMultiSelectId"
83        properties:
84          label: "Select users"
85        components:
86          - definition: usersSelect
87            properties:
88              name: "usersMultiSelectName"
89              multiselect: true
90      - definition: divider
91      - definition: section
92        properties:
93          text: "Multi user select with initial users"
94      - definition: input
95        name: "usersMultiSelectInitialUsersId"
96        properties:
97          label: "Select users"
98        components:
99          - definition: usersSelect
100            properties:
101              name: "usersMultiSelectInitialUsersName"
102              multiselect: true
103              value:
104                - "USLACKBOT"
105                - "U01KZHYT6RY" # Slack Developer Tools user; depending on the workspace used this user may not exist
106      - definition: divider
107      - definition: section
108        properties:
109          text: "Multi user select with max selection"
110      - definition: input
111        name: "usersMultiSelectMaxSelectionId"
112        properties:
113          label: "Select users"
114        components:
115          - definition: usersSelect
116            properties:
117              name: "usersMultiSelectMaxSelectionName"
118              multiselect: true
119              maxSelection: 2

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `usersSelect`.
`properties`	Object	Yes	The component’s properties.
`properties.name`	String, Expression	No	An identifier used to retrieve the value on submission.
`properties.placeholder`	String, Expression, Plain Text	No	A placeholder value to display when nothing is selected.
`properties.value`	String, Array, Expression	No	Indicates the user, or users if `multiselect`, selected on an initial render. Must match the ID of a user in Slack. If the value is an array, it’s an array of strings.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a radio button is selected.
`properties.multiselect`	Boolean, Expression	No	Indicates whether the select component supports multiple selections. The default value is `false`.
`properties.maxSelection`	Number, Expression	No	If `multiselect` is `true`, you can optionally specify `maxSelection`. The maximum number of options that can be selected. The minimum value is `1`.
`events`	Object	No	Events that trigger an action.
`events.onchange`	Object	No	Fires when a user is selected, or the multi-select menu is confirmed.
`events.onchange.definition`	String	No	The identifier of the action that executes when the event fires.
`events.onchange.properties`	Object	No	Properties to pass to the action.

Beta Feature

This feature is not generally available. It is not part of your purchased Services. This feature is subject to change, may be discontinued with no notice at any time in SFDC’s sole discretion, and SFDC may never make this feature generally available. Make your purchase decisions only on the basis of generally available products and features. This feature is made available on an AS IS basis and use of this feature is at your sole risk.