# 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](/docs/platform/salesforce-slack-sdk/guide/layout.md). When working with events from the App Home page, put your [elements](/docs/platform/salesforce-slack-sdk/guide/elements.md) in an `actions` block. ## Button Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) An interactive button. The button can be a trigger for anything from opening a simple link to starting a complex workflow. ![Button Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/button_standard.png) **Examples** Render a button within an `actions` block. ```yaml - definition: actions name: "apex_actions" components: - definition: button properties: label: "Confirm" style: "primary" name: "confirm_button" ``` ```yaml components: - definition: button properties: name: "my_button" label: "Delete" value: "delete_record" style: "danger" events: onclick: definition: "apex__action__ViewRecord" properties: recordId: "006R0000003FpnoIAC" 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The button label. | | `properties.name` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the button element. The name is used to retrieve the value on submission. | | `properties.value` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A URL that's opened on button click. URLs must use a valid protocol scheme such as `http://` or `https://`. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm) | No | A confirmation dialog to display after a button click. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `events.onclick` | Object | No | Fires when a user clicks the button. | | `events.onclick.definition` | String | No | The identifier of the [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onclick.properties` | Object | No | Properties to pass to the action. | ## Checkbox Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) A checkbox that allows a user to specify a single boolean value. ![Checkbox Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/checkbox_standard.png) **Examples** This example shows a checkbox that defaults to selected. ```yaml components: - definition: checkbox properties: label: "Select single boolean value" name: "checkbox" value: true ``` This example shows checkboxes that render as selected or unselected, a checkbox with a label, and a required checkbox. ```yaml description: "Example usage of the checkbox component" components: - definition: modal properties: title: "Checkbox Example" submitLabel: "Submit" closeLabel: "Cancel" components: - definition: input name: "default_selected_checkbox" properties: label: "Checkbox Default Selected" components: - definition: checkbox properties: name: "checkbox1" value: true - definition: input name: "default_unselected_checkbox" properties: label: "Checkbox Default Unselected" components: - definition: checkbox properties: name: "checkbox2" value: false - definition: input name: "checkbox_with_description" properties: label: "Checkbox with Label and Description" components: - definition: checkbox properties: name: "checkbox3" label: Checkbox Label description: Checkbox Description - definition: input name: "required_checkbox" properties: label: "Required Checkbox" required: true components: - definition: checkbox properties: 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the checkbox input. The name is used to retrieve the value on submission. | | `properties.value` | Boolean, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The initial value applied to the checkbox input. Defaults to `false`. | | `properties.label` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The label for the checkbox input. | | `properties.description` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The description for the checkbox input. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a checkbox is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `events.onchange` | Object | No | Fires when a checkbox is ticked or unticked. | | `events.onchange.definition` | String | No | The identifier of the [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. | ## Checkbox Group Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) A checkbox group that allows a user to choose multiple items from a list of possible options. ![Checkbox Group Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/checkbox_group_standard.png) **Example** On an initial render, Option 1 is selected and Option 2 isn't selected by default. ```yaml components: - definition: checkboxGroup properties: name: "options_checkbox" options: - identifier: "option_1" label: "Option 1" value: true description: "This is option 1" - identifier: "option_2" label: "Option 2" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the checkbox inputs. The name is used to retrieve the values on submission. | | `properties.options` | [Options](/docs/platform/salesforce-slack-sdk/guide/composition.md#options) | Yes | A list of checkbox items. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a checkbox is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `events.onchange` | Object | No | Fires when a checkbox is ticked or unticked. | | `events.onchange.definition` | String | No | The identifier of the [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. | ## Conversations Select Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#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](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/conversations-select.png) **Example** This example selects a single conversation. ```yaml components: - definition: input name: "conversationsSelectId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectName" value: "C012AB3CD" defaultCurrent: true ``` This example allows multiple selections. ```yaml components: - definition: input name: "conversationsSelectMultiId" properties: label: "Select multiple conversations" components: - definition: conversationsSelect properties: name: "conversationsSelectMultiName" multiselect: true value: - "C012AB3CD" - "C345XY6AB" ``` This example filters to include only public and private channels. ```yaml components: - definition: input name: "conversationsSelectFilterChannelId" properties: label: "Select a channel" components: - definition: conversationsSelect properties: name: "conversationsSelectName" filter: include: - "public" - "private" excludeExternalShared: false ``` This example filters to include direct messages and exclude bots. ```yaml components: - definition: input name: "conversationsSelectFilterDmId" properties: label: "Select a DM" components: - definition: conversationsSelect properties: name: "conversationsSelectName" filter: include: - "im" - "mpim" excludeBotUsers: true ``` This example shows a comprehensive usage of the `conversationsSelect` component. ```yaml description: "Example usage of the conversationsSelect component" components: - definition: modal properties: title: "Conversations Select Example" submitLabel: "Submit" closeLabel: "Cancel" components: - definition: section properties: text: "Single conversation select with required properties only" - definition: input name: "conversationsSelectId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectName" - definition: divider - definition: section properties: text: "Single conversation select with placeholder" - definition: input name: "conversationsSelectPlaceholderId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectPlaceholderName" placeholder: "Choose a conversation" - definition: divider - definition: section properties: text: "Single conversation select with default channel selected" - definition: input name: "conversationsSelectDefaultCurrentId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectDefaultCurrentName" defaultCurrent: true - definition: divider - definition: section properties: text: "Single conversation select as required input" - definition: input name: "conversationsSelectRequiredId" properties: label: "Select a conversation" required: true components: - definition: conversationsSelect properties: name: "conversationsSelectRequiredName" - definition: divider - definition: section properties: text: "Single conversation select filtered to only channels" - definition: input name: "conversationsSelectFilterChannelId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectFilterChannelName" filter: include: - "public" - "private" excludeExternalShared: false - definition: divider - definition: section properties: text: "Single conversation select filtered to only direct messages excluding bots" - definition: input name: "conversationsSelectFilterDmId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectFilterDmName" filter: include: - "im" - "mpim" excludeBotUsers: true - definition: divider - definition: section properties: text: "Single conversation select with confirm dialog" - definition: input name: "conversationsSelectConfirmId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsSelectConfirmName" confirm: title: "Confirm conversation selection" text: "Please confirm the conversation selection" confirm: "Confirm" deny: "Cancel" style: "primary" - definition: divider - definition: section properties: text: "Multi conversation select with required properties only" - definition: input name: "conversationsMultiSelectId" properties: label: "Select conversations" components: - definition: conversationsSelect properties: name: "conversationsMultiSelectName" multiselect: true - definition: divider - definition: section properties: text: "Multi conversation select with default channel selected" - definition: input name: "conversationsMultiSelectDefaultCurrentId" properties: label: "Select conversations" components: - definition: conversationsSelect properties: name: "conversationsMultiSelectDefaultCurrentName" multiselect: true defaultCurrent: true - definition: divider - definition: section properties: text: "Multi conversation select with max selection" - definition: input name: "conversationsMultiSelectMaxSelectionId" properties: label: "Select conversations" components: - definition: conversationsSelect properties: name: "conversationsMultiSelectMaxSelectionName" multiselect: true maxSelection: 2 - definition: divider - definition: section properties: text: "Multi conversation select filtered to only channels" - definition: input name: "conversationsMultiSelectFilterChannelId" properties: label: "Select conversations" components: - definition: conversationsSelect properties: name: "conversationsMultiSelectFilterChannelName" multiselect: true filter: include: - "public" - "private" excludeExternalShared: false - definition: divider - definition: section properties: text: "Multi conversation select filtered to only direct messages excluding bots" - definition: input name: "conversationsMultiSelectFilterDmId" properties: label: "Select a conversation" components: - definition: conversationsSelect properties: name: "conversationsMultiSelectFilterDmName" multiselect: true filter: include: - "im" - "mpim" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the conversations select component. The name is used to retrieve the value on submission. | | `properties.placeholder` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md), [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text) | No | A placeholder value to display when nothing is selected. | | `properties.multiselect` | Boolean, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Indicates whether the component supports multiple selections. The default value is `false`. | | `properties.maxSelection` | Number, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#input), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Filter the list of available conversations. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a conversation is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `properties.value` | String, Array, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. | ## Date Picker Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) An element that lets users select a date from a calendar. ![Date Picker Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/datepicker_standard.png) :::warning 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. ::: **Examples** This example shows a date picker that displays a confirmation dialog after a date is selected. ```yaml components: - definition: input name: "exampleDatepicker" properties: label: "Example datepicker" components: - definition: datepicker properties: value: "2021-04-01" placeholder: "Choose a date" name: "exampleDatepicker" confirm: "{!view.properties.confirm}" title: "Confirm date selection" text: "Please confirm the date selection" confirm: "Confirm" deny: "Cancel" style: "primary" ``` This example shows various ways to use a date picker. ```yaml components: - definition: modal properties: title: "Datepicker Example" submitLabel: "Submit" closeLabel: "Cancel" components: - definition: section properties: text: "Datepicker with required properties only" - definition: input name: "exampleDatepickerId" properties: label: "Pick a date" components: - definition: datepicker properties: name: "exampleDatepickerName" - definition: divider - definition: section properties: text: "Datepicker with placeholder" - definition: input name: "exampleDatepickerPlaceholderId" properties: label: "Pick a date" components: - definition: datepicker properties: placeholder: "Choose a date" name: "exampleDatepickerPlaceholderName" - definition: divider - definition: section properties: text: "Datepicker with initial date" - definition: input name: "exampleDatepickerInitialDateId" properties: label: "Pick a date" components: - definition: datepicker properties: value: "2021-04-01" name: "exampleDatepickerInitialDateName" - definition: divider - definition: section properties: text: "Datepicker as required input" required: true - definition: input name: "exampleDatepickerRequiredId" properties: label: "Pick a date" components: - definition: datepicker properties: 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The initial date that's selected when the date picker is loaded in the format `YYYY-MM-DD`. | | `properties.placeholder` | String, [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Text used as a placeholder when the value is empty. | | `properties.name` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | A name applied to the date picker. The name is used to retrieve the values on submission. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a date is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `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](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) 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` or `List` to create your data source and return it as a [Slack.OptionDataResponse](/docs/platform/salesforce-slack-sdk/guide/data-providers.md#external-select) object. Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) ![Multiple Select External Select Input](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/external_select.png) **Example** This example displays a list of accounts by name in an external select component. ```yaml components: - definition: actions name: "external_select_accounts" components: - definition: externalSelect properties: placeholder: "Look up an account by name" name: "account_lookup" datasource: definition: "apex__DataProviderAccountLookup.getAccountsByName" ``` Return data to the External Select component using `Slack.OptionDataResponse`. :::tip This example is from `view_opportunity_by_account.view` in the [sample app](/docs/platform/salesforce-slack-sdk/guide/setup-install-app.md). ::: ```java public class DataProviderAccountLookup { public static Slack.OptionDataResponse getAccountsByName(String value) { List accounts; if (String.isNotBlank(value)) { String name = '%' + value + '%'; accounts = [SELECT Id, Name FROM Account WHERE Name LIKE :name WITH SECURITY_ENFORCED LIMIT 10]; } List accountOptions = new List(); if (accounts != null) { for (Account account : accounts) { Slack.Option option = new Slack.Option(account.Name, account.Id); accountOptions.add(option); } } return new Slack.OptionDataResponse(accountOptions); } } ``` ### Multiple Selection To allow multiple selections, set the `multiselect` property to `true`. ```yaml components: - definition: externalSelect properties: multiselect: true placeholder: "Select one or more opportunities" name: "external_select_multi" datasource: definition: "apex__MyDataProvider.getOpportunities" properties: 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. 1. Bind an expression directly into the `value` property. This expression must point to a dataProvider that provides preselected values (see [Implement a Data Provider](/docs/platform/salesforce-slack-sdk/guide/data-providers.md)). 2. Add an array of pre-selected options in the `value` property, or a single [`Slack.OptionDataResponse`](/docs/platform/salesforce-slack-sdk/guide/apex_ref_options.md#optiondataresponse-class) object. **Pre-selected Option Expression Example** ```yaml components: - definition: externalSelect properties: multiselect: true placeholder: "Select one or more opportunities" name: "external_select" value: "{!recordsLookup}" datasource: definition: "apex__MyDataProvider.getOpportunities" properties: objectApiName: "Opportunity" ``` **Pre-selected Option Inline Array Example** ```yaml components: - definition: externalSelect properties: multiselect: true placeholder: "Select one or more opportunities" name: "external_select" value: - text: "Option 1" value: "value1" - text: "Option 2" value: "value2" datasource: definition: "apex__MyDataProvider.getOpportunities" properties: 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the external select items. The name is used to retrieve the value on submission. | | `properties.placeholder` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md), [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Provide a single option object or array of `options` to set as pre-selected. | | `properties.value.text` | String, [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text), [Mrkdwn](/docs/platform/salesforce-slack-sdk/guide/composition.md#mrkdwn) | Yes | A label for the selected item. | | `properties.value.value` | String, [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text) | No | The value of the selected item. | | `properties.multiselect` | Boolean, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Indicates whether the external select component supports multiple selections. The default value is `false`. | | `properties.maxSelection` | Number, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a radio button is selected. | | `properties.datasource` | String, Object, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Contains any parameters to be passed into the option data provider. | ## Inline Image Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Context](/docs/platform/salesforce-slack-sdk/guide/layout.md#context) Display an image alongside additional content, such as text. ![Inline Image example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/image_element.png) :::tip For a component that holds only an image, see [image](/docs/platform/salesforce-slack-sdk/guide/layout.md#image). Both image components use `- definition: image`. However, they're available in different containing components, and the layout image has a `title` property. ::: **Example** This example is an image within a context component. ```yaml components: - definition: context components: - definition: image properties: url: "https://via.placeholder.com/150" altText: "Placeholder image" - definition: text properties: 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The URL of the image to display. URLs must use a valid protocol scheme such as `http://` or `https://`. | | `properties.altText` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | A plain text description of the image. | ## Overflow Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) An overflow menu in a section or actions component. ![Overflow example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/overflow_standard.png) **Examples** This example creates an overflow menu with 3 options. ```yaml components: - definition: overflow properties: name: "overflow_example" options: - identifier: "option_1" label: "Option 1" - identifier: "option_2" label: "Option 2" - identifier: "option_3" label: "Option 3" url: "https://www.example.com" ``` This example creates an overflow menu in an actions block. ```yaml components: - definition: modal properties: title: "Overflow Example" submitLabel: "Submit" closeLabel: "Cancel" components: - definition: actions name: "actions_block" components: - definition: overflow properties: name: "overflow_in_section" options: - identifier: "option_1" label: "Option 1" - identifier: "option_2" label: "Option 2" - identifier: "option_3" label: "Option 3" url: "https://www.example.com" confirm: title: "Confirm selection" text: "Please confirm the selection" confirm: "Confirm" deny: "Cancel" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | A name applied to the overflow element, used to retrieve the value when a menu option is selected. | | `properties.options` | [Options](/docs/platform/salesforce-slack-sdk/guide/composition.md#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](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a checkbox is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `events.onclick` | Object | No | Fires when an item from the overflow menu is clicked. | | `events.onclick.definition` | String | No | The identifier of the [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onclick.properties` | Object | No | Properties to pass to the action. | ## Radio Group Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) A radio button group that allows a user to choose one item from a list of possible options. ![Radio Button Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/radio_standard.png) **Example** On an initial render, Option 1 is selected. ```yaml components: - definition: radioGroup properties: name: "radio_button_group_options" value: "option_1" options: - identifier: "option_1" label: "Option 1" description: "This is a radio button" - identifier: "option_2" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | The name applied to the radio button inputs. The name is used to retrieve the values on submission. | | `properties.value` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#options) | Yes | A list of radio button items. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a radio button is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `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](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. | ## Select Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) A select menu, like a standard HTML `` 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](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/textinput_standard.png) **Example** ```yaml components: - definition: input name: "input_block" properties: label: "Name" components: - definition: textInput properties: name: "text_input" placeholder: "Enter Name" value: "Global Media - 400 Widgets" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | An identifier used to retrieve the value on submission. | | `properties.placeholder` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md), [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text) | No | A placeholder value for the select menu to display when nothing is selected. | | `properties.value` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The initial value for the input field. | | `properties.minLength` | Integer, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The minimum number of characters allowed on form submission. | | `properties.maxLength` | Integer, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | The maximum number of characters allowed on form submission. | | `properties.multiline` | Boolean, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | If `true`, the input field supports multiple lines. The default value is `false`. | ## Time Picker Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#input) Select a time of day to a 15-minute increment. ![Time Picker Example](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/timepicker_standard.png) 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. :::warning 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. ::: **Example** ```yaml components: - definition: input name: "exampleTimepicker" properties: label: "Example timepicker" hint: "Format: HH:mm" components: - definition: timepicker properties: value: "09:00" placeholder: "Provide a time" 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Text used as a placeholder when the `value` is empty. | | `properties.name` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | Yes | A name applied to the time picker. The name is used to retrieve the value on submission. | | `properties.confirm` | [Confirm](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a time is selected. | | `events` | Object | No | Events that trigger an [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `events.onchange` | Object | No | Fires when a time is chosen in the time picker. | | `events.onchange.definition` | String | No | The identifier of the [action](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. | ## Users Select Available in: [Section](/docs/platform/salesforce-slack-sdk/guide/layout.md#section) | [Actions](/docs/platform/salesforce-slack-sdk/guide/layout.md#actions) | [Input](/docs/platform/salesforce-slack-sdk/guide/layout.md#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](https://a.sfdcstatic.com/developer-website/sfdocs/salesforce-slack-sdk/media/usersselect_standard.png) **Example** This example allows a single selection. ```yaml components: - definition: input name: "usersSelectId" properties: label: "Select a user" components: - definition: usersSelect properties: name: "usersSelectName" value: "U01KHPH4A6T" ``` This example allows multiple selections. ```yaml components: - definition: input name: "usersSelectMultiId" properties: label: "Select multiple users" components: - definition: usersSelect properties: name: "usersSelectMultiName" multiselect: true value: - "U01KHPH4A6T" - "WAWUZ49PT" ``` This example shows a comprehensive usage of the `usersSelect` component. ```yaml description: "Example usage of the usersSelect component" components: - definition: modal properties: title: "Users Select Example" submitLabel: "Submit" closeLabel: "Cancel" components: - definition: section properties: text: "Single user select with required properties only" - definition: input name: "usersSelectId" properties: label: "Select a user" components: - definition: usersSelect properties: name: "usersSelectName" - definition: divider - definition: section properties: text: "Single user select with placeholder" - definition: input name: "usersSelectPlaceholderId" properties: label: "Select a user" components: - definition: usersSelect properties: name: "usersSelectPlaceholderName" placeholder: "Choose a user" - definition: divider - definition: section properties: text: "Single user select with initial user" - definition: input name: "usersSelectInitialUserId" properties: label: "Select a user" components: - definition: usersSelect properties: name: "usersSelectInitialUserName" value: "USLACKBOT" - definition: divider - definition: section properties: text: "Single user select as required input" - definition: input name: "usersSelectRequiredId" properties: label: "Select a user" required: true components: - definition: usersSelect properties: name: "usersSelectRequiredName" - definition: divider - definition: section properties: text: "Single user select with confirm dialog" - definition: input name: "usersSelectConfirmId" properties: label: "Select a user" components: - definition: usersSelect properties: name: "usersSelectConfirmName" confirm: title: "Confirm user selection" text: "Please confirm the user selection" confirm: "Confirm" deny: "Cancel" style: "primary" - definition: divider - definition: section properties: text: "Multi user select with required properties only" - definition: input name: "usersMultiSelectId" properties: label: "Select users" components: - definition: usersSelect properties: name: "usersMultiSelectName" multiselect: true - definition: divider - definition: section properties: text: "Multi user select with initial users" - definition: input name: "usersMultiSelectInitialUsersId" properties: label: "Select users" components: - definition: usersSelect properties: name: "usersMultiSelectInitialUsersName" multiselect: true value: - "USLACKBOT" - "U01KZHYT6RY" # Slack Developer Tools user; depending on the workspace used this user may not exist - definition: divider - definition: section properties: text: "Multi user select with max selection" - definition: input name: "usersMultiSelectMaxSelectionId" properties: label: "Select users" components: - definition: usersSelect properties: name: "usersMultiSelectMaxSelectionName" multiselect: true 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](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | An identifier used to retrieve the value on submission. | | `properties.placeholder` | String, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md), [Plain Text](/docs/platform/salesforce-slack-sdk/guide/composition.md#plain-text) | No | A placeholder value to display when nothing is selected. | | `properties.value` | String, Array, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/composition.md#confirm), [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | A confirmation dialog to display after a radio button is selected. | | `properties.multiselect` | Boolean, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | No | Indicates whether the select component supports multiple selections. The default value is `false`. | | `properties.maxSelection` | Number, [Expression](/docs/platform/salesforce-slack-sdk/guide/expressions.md) | 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](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). | | `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](/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md) that executes when the event fires. | | `events.onchange.properties` | Object | No | Properties to pass to the action. |