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

Available in: Section | Actions

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

Examples

Render a button within an actions block.

- definition: actions
  name: "apex_actions"
  components:
    - definition: button
      properties:
        label: "Confirm"
        style: "primary"
        name: "confirm_button"

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

Checkbox

Available in: Section | Actions | Input

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

Examples

This example shows a checkbox that defaults to selected.

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.

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

Checkbox Group

Available in: Section | Actions | Input

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

Example

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

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

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.

Example

This example selects a single conversation.

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.

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.

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.

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.

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

Date Picker

Available in: Section | Actions | Input

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

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.

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.

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

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

Example

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

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.

public class DataProviderAccountLookup {
    public static Slack.OptionDataResponse getAccountsByName(String value) {
        List<Account> accounts;
        if (String.isNotBlank(value)) {
            String name = '%' + value + '%';
            accounts = [SELECT Id, Name FROM Account WHERE Name LIKE :name WITH SECURITY_ENFORCED LIMIT 10];
        }

        List<Slack.Option> accountOptions = new List<Slack.Option>();
        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.

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).
2. Add an array of pre-selected options in the value property, or a single Slack.OptionDataResponse object.

Pre-selected Option Expression Example

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

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

Inline Image

Available in: Section | Context

Display an image alongside additional content, such as text.

tip: 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.

Example

This example is an image within a context component.

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

Overflow

Available in: Section | Actions

An overflow menu in a section or actions component.

Examples

This example creates an overflow menu with 3 options.

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.

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

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.

Example

On an initial render, Option 1 is selected.

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

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.

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.

components:
  - definition: modal
    properties:
      title: "Create Opportunity"
      submitLabel: "Create"
    components:
      - definition: input
        properties:
          label: "Stage"
          required: true
        components:
          - definition: select
            properties:
              name: "StageName"
              value: "Prospecting"
              placeholder: "Select a stage."
              options:
                - identifier: "Prospecting"
                  label: "Prospecting"
                - identifier: "Qualification"
                  label: "Qualification"
                - identifier: "Needs Analysis"
                  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>.

description: 'Find and View Opportunities by Account'
schema:
    properties:
        recordId:
            type: string
            required: true
dataproviders:
    opportunity:
        definition: 'apex__DataProviderOpportunityLookup.getOpportunitiesByAccount'
        properties:
            accountId: '{!view.properties.recordId}'
components:
    - definition: modal
      properties:
          title: 'Select an Opportunity'
          submitLabel: 'View Opportunity'
       components:
    - definition: input
      name: "all_opportunities"
      properties:
        label: "All Opportunities By Account"
      components:
        - definition: select
          properties:
            name: "select_opportunity"
            placeholder: "Select an Opportunity"
            options: "{!opportunity}"

Pass in the accountId property to the Apex class.

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

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

Select Menu in Actions and Input

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

- definition: actions
  components:
    - definition: select
      properties:
        name: "select_options"
        value: "option_1"
        placeholder: "Please select an option."
        options:
          - identifier: "option_3"
            label: "Option 3"
          - identifier: "option_4"
            label: "Option 4"
      events:
        onchange:
          definition: "apex__action__homeSelectChanged"

On initial render, Option 1 is selected.

components:
  - definition: input
    name: "input_block"
    properties:
      label: "Select an option"
    components:
      - definition: select
        properties:
          name: "select_options"
          value: "option_1"
          placeholder: "Please select an option."
          options:
            - identifier: "option_1"
              label: "Option 1"
              description: "This is option 1"
            - identifier: "option_2"
              label: "Option 2"
          confirm:
            title: "Confirm select selection"
            text: "Please confirm selection"
            confirm: "Confirm"
            deny: "Cancel"
            style: "primary"
        events:
          onchange:
            definition: "apex__MyDataProvider.ViewAction"

Keys

Text

Available in: Context

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

Keys

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.

Example

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

Time Picker

Available in: Section | Actions | Input

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

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

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

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.

Example

This example allows a single selection.

components:
  - definition: input
    name: "usersSelectId"
    properties:
      label: "Select a user"
    components:
      - definition: usersSelect
        properties:
          name: "usersSelectName"
          value: "U01KHPH4A6T"

This example allows multiple selections.

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.

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