Layout Components

Groups element components together, such as a header or section.

Use layout components to position content in a surface. Most layout components can contain other components. The contained components must be elements.

note: Layout components must be rendered within a surface or an iteration.

Layout components have a visibility property, which defaults to true.

Use these layout components to build your views.

Actions

Available in: Modal | Message | Home tab

Use an actions component to group interactive elements together.

Examples

This example shows an action block with a select component.

components:
  - definition: actions
    name: "action_block"
    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"
      - definition: button
        properties:
          label: "Button"
          name: "my_button"

This example shows an action block with a checkboxGroup, radioGroup, and a button component.

description: "This view contains an actions block"
components:
  - definition: modal
    properties:
      title: "Actions Block Example"
    components:
      - definition: actions
        name: "my_actions_block"
        components:
          - definition: checkboxGroup
            properties:
              name: "exampleCheckboxGroupName"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  value: true
                - identifier: "option_2"
                  label: "Option 2"
                  value: true
          - definition: radioGroup
            properties:
              name: "exampleRadioGroupName"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  description: "This is a radio button"
                - identifier: "option_2"
                  label: "Option 2"
          - definition: button
            properties:
              label: "Action Button Example"
              name: "actionButton"
              value: "hello"
            events:
              onclick:
                definition: "apex__action__SelectOption"

This example creates an action block with onchange events.

description: "This is a simple view to test block actions via events"
components:
  - definition: modal
    properties:
      title: "Events Example"
    components:
      - definition: actions
        name: "actions_block"
        components:
          - definition: select
            properties:
              placeholder: "Static Select"
              name: "exampleSelect"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  description: "This item is option 1"
                - identifier: "option_2"
                  label: "Option 2"
            events:
              onchange:
                definition: "apex__action__SelectOption"
                properties:
                  actionDescription: "select onchange"
          - definition: conversationsSelect
            properties:
              name: "exampleConversationsSelect"
              placeholder: "Conversations Select"
            events:
              onchange:
                definition: "apex__action__SelectConversation"
                properties:
                  actionDescription: "conversationsSelect onchange"
          - definition: usersSelect
            properties:
              name: "exampleUsersSelect"
              placeholder: "Users Select"
            events:
              onchange:
                definition: "apex__action__SelectUsers"
                properties:
                  actionDescription: "usersSelect onchange"

This example creates an action block with onchange and onclick events.

description: "This is a simple view to test block actions via events"
components:
  - definition: modal
    properties:
      title: "Events Example"
    components:
      - definition: actions
        name: "checkbox_action_block"
        components:
          - definition: checkboxGroup
            properties:
              name: "exampleCheckboxGroupName"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  value: true
                - identifier: "option_2"
                  label: "Option 2"
                  value: true
            events:
              onchange:
                definition: "apex__action__SelectOptions"
                properties:
                  actionDescription: "checkbox onchange"
          - definition: radioGroup
            properties:
              name: "exampleRadioGroupName"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  description: "This is a radio button"
                - identifier: "option_2"
                  label: "Option 2"
            events:
              onchange:
                definition: "apex__action__SelectOptionChange"
                properties:
                  actionDescription: "radioGroup onchange"
          - definition: button
            properties:
              label: "Action Button Example"
              value: "abc123"
            events:
              onclick:
                definition: "apex__action__ClickButton"
                properties:
                  actionDescription: "button onclick"
          - definition: button
            properties:
              label: "Action Button With Name and Event"
              name: "button_with_events"
              value: "abc123"
            events:
              onclick:
                definition: "apex__action__ClickButton"
                properties:
                  actionDescription: "button onclick"
          - definition: overflow
            properties:
              name: "exampleOverflow"
              options:
                - identifier: "overflow_1"
                  label: "Overflow 1"
                - identifier: "overflow_2"
                  label: "Overflow 2"
            events:
              onclick:
                definition: "apex__action__ClickOverflow"
                properties:
                  actionDescription: "overflow onclick"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `actions`.
`components`	Array	Yes	A maximum of 25 components to render inside the actions component.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

Context

Available in: Modal | Message | Home tab

Displays message context, which can include images and text.

Context Example

Example

This example shows a context component with some text and an image.

description: "Example usage of the context component"
components:
  - definition: modal
    properties:
      title: "Context Example"
      submitLabel: "Submit"
      closeLabel: "Cancel"
    components:
      - definition: context
        name: "context_block"
        components:
          - definition: text
            properties:
              text:
                text: "*This* is :smile: markdown"
                type: "mrkdwn"
          - definition: image
            properties:
              url: "https://image.freepik.com/free-photo/red-drawing-pin_1156-445.jpg"
              altText: "Book cover"
          - definition: text
            properties:
              text: "Author: KA Applegate"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `context`.
`components`	Array	Yes	A maximum of 10 text and image components to render inside the context component.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

Divider

Available in: Modal | Message | Home tab

A content divider, like an <hr>, to split up different components inside a message.

Examples

Here's a simple divider.

components:
  - definition: divider

This divider is added after the header in a message.

components:
  - definition: message
    components:
      - definition: header
        properties:
          text: "{!view.properties.headerText}"
      - definition: divider

Keys

Key	Type	Required	Description
`definition`	string	Yes	The value must be `divider`.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

Header

Available in: Modal | Message | Home tab

A header with large, bold text.

Header Example

Example

components:
  - definition: header
    name: "headerId"
    properties:
      text: "Header text value"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `header`.
`properties`	Object	Yes	The component's properties.
`properties.text`	String, Plain Text, Expression	Yes	The text for the header component.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

Image

Available in: Modal | Message | Home tab

A simple image block, designed to make photos pop.

Image layout component example

tip: For a component that holds an image and text or other content, see inline image. Both image components use - definition: image. However, they're available in different containing components, and the layout image has a title property.

Examples

This example creates a standalone image.

components:
  - definition: image
    name: "standalone_image"
    properties:
      url: "https://via.placeholder.com/150"
      altText: "Placeholder image"
      title: "Placeholder image title"

This example creates several images in a section and context component.

description: "Example usage of the image component"
components:
  - definition: modal
    properties:
      title: "Image Example"
    components:
      - definition: image
        name: "standaloneImage"
        properties:
          url: "http://placekitten.com/500/500"
          altText: "Cat photo"
          title: "Enjoy this cat photo"
      - definition: divider
      - definition: section
        properties:
          text: "An inline image in a section block."
        components:
          - definition: image
            properties:
              url: "http://placekitten.com/500/500"
              altText: "Cat photo"
      - definition: divider
      - definition: context
        name: "imageInContext"
        components:
          - definition: image
            properties:
              url: "http://placekitten.com/500/500"
              altText: "Cat photo"

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.
`properties.title`	String, Plain Text, Expression	No	The title for the image. This value can be provided only for a standalone image.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

Input

Available in: Modal | Message | Home tab

A layout component that can contain input elements in a components array.

Examples

This example creates an input block with a text input component.

components:
  - definition: input
    name: "input_block"
    properties:
      required: true
      label: "Input Block"
    components:
      - definition: textInput
        properties:
          value: "default value"

This example creates an input block with a checkbox component.

components:
  - definition: input
        name: "checkbox"
        properties:
          label: "Checkbox"
        components:
          - definition: checkbox
            properties:
              name: "single_checkbox"
              value: true

This example creates input blocks with nested elements.

description: "Input Blocks with nested elements"
components:
  - definition: modal
    properties:
      title: "Input Block Example"
    components:
      - definition: input
        name: "my_text_input_block"
        properties:
          required: true
          label: "My text input block"
        components:
          - definition: textInput
            properties:
              value: "hello world"
              name: "my_input_element"
              multiline: false
              placeholder: "Enter Text Here"
              minLength: 2
              maxLength: 25
      - definition: input
        name: "my_radio_group_input_block"
        properties:
          required: true
          label: "My radioGroup input block"
        components:
          - definition: radioGroup
            properties:
              name: "simple_radio_buttons"
              value: "option_1"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  description: "This item is option 1"
                - identifier: "option_2"
                  label: "Option 2"
              confirm:
                title: "Confirm Selection"
                text: "Please confirm your selected option."
                confirm: "Confirm"
                deny: "Cancel"
                style: "primary"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `input`.
`properties`	Object	Yes	The component's properties.
`properties.label`	String, Plain Text, Expression	Yes	The input label
`properties.hint`	String, Expression	No	A hint that can be used to convey format or other input requirements for the input component rendered within the input.
`properties.required`	Boolean, Expression	No	If `true`, the form can't be submitted when a field in the input component is empty. The default value is `false`.
`properties.dispatchAction`	Boolean, Expression	No	If `true`, an element within the input dispatches to an action bound to it. The default value is `false`.
`components`	Array	Yes	A single component to render inside the input. The component can be a checkbox group, a conversations-select, date picker, radio group, select, text input, time picker, or users select.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.

warning: When properties.required is false, Slack appends (optional) on the field label. (optional) isn't currently localized when your Slack locale and Salesforce locale are different. To ensure labels are localized correctly, update your Slack locale to match your Salesforce locale.

Section

Available in: Modal | Message | Home tab

Use a section to render plain text or mrkdwn and optionally a single component, like an image.

Examples

This example renders plain text.

components:
  - definition: section
    properties:
      text: "Hello, world!"

This example renders markdown.

components:
  - definition: section
    properties:
      text:
        text: "This text includes *bold* and _italic_."
        type: "mrkdwn"

Use markdown to render a field value based on a view property.

schema:
  properties:
    fieldName:
      type: string
    fieldValue:
      type: string
components:
  - definition: modal
    properties:
      title: "My Field"
    components:
      - definition: section
        properties:
          text:
            text: "*{!view.properties.fieldName}:* {!view.properties.fieldValue}"
            type: "mrkdwn"

A section can contain up to 10 text fields.

components:
  - definition: section
    properties:
      fields:
        - text: "This the *first* field."
          type: "mrkdwn"
        - text: "This the *second* field."
          type: "mrkdwn"

You can include a single component in a section.

components:
  - definition: section
    name: "my_section_block"
    properties:
      text: "This is a text field"
    components:
      - definition: image
        properties:
          url: "https://via.placeholder.com/150"
          altText: "Placeholder image"

This example contains a few sections with text and text fields.

components:
  - definition: modal
    properties:
      title: "An Example Section"
    components:
      - definition: section
        name: "section_text"
        properties:
          text: "Section block with text only"
      - definition: section
        name: "section_markdown"
        properties:
          fields:
            - text: "Section block with a section input component"
              emoji: true
      - definition: section
        name: "simple_markdown_section_text_fields"
        properties:
          text: "text field"
          fields:
            - text: "Field 1 :smile:"
              emoji: true
            - text: "Field 2"
            - text: "Field 3"
            - text: "Field 4"
            - text: "Field 5"
            - text: "Field 6"
            - text: "Field 7"
            - text: "Field 8"
            - text: "Field 9"
            - text: "Field with link: https://www.salesforce.com/"
              type: "mrkdwn"
              verbatim: false
        components:
          - definition: select
            properties:
              name: "section_select"
              placeholder: "Section Select Input"
              options:
                - identifier: "option_1"
                  label: "Option 1"
                  description: "This is option 1"
                - identifier: "option_2"
                  label: "Option 2"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `section`.
`properties`	Object	Yes	The component's properties.
`properties.text`	String, Expression, Plain Text, Mrkdwn	No	The text for the component. Required if the `fields` property is empty or absent. If the value is a string, the component renders plain text. To render mrkdwn, use the mrkdwn object.
`properties.fields`	Array of items of type String, Plain Text, Mrkdwn, Expression	No	An array of text fields to render within the component. Required if the `text` property is absent. The maximum number of text fields is 10.
`components`	Array	No	A single component to render inside the input.
`name`	String, Expression	No	The name to uniquely identify this component within the view.
`visibility`	Boolean, Expression	No	Indicates whether the component is shown (`true`) or hidden (`false`). The default value is `true`.