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.

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

Note

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.

1components:
2  - definition: actions
3    name: "action_block"
4    components:
5      - definition: select
6        properties:
7          name: "select_options"
8          value: "option_1"
9          placeholder: "Please select an option."
10          options:
11            - identifier: "option_1"
12              label: "Option 1"
13              description: "This is option 1"
14            - identifier: "option_2"
15              label: "Option 2"
16      - definition: button
17        properties:
18          label: "Button"
19          name: "my_button"

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

1description: "This view contains an actions block"
2components:
3  - definition: modal
4    properties:
5      title: "Actions Block Example"
6    components:
7      - definition: actions
8        name: "my_actions_block"
9        components:
10          - definition: checkboxGroup
11            properties:
12              name: "exampleCheckboxGroupName"
13              options:
14                - identifier: "option_1"
15                  label: "Option 1"
16                  value: true
17                - identifier: "option_2"
18                  label: "Option 2"
19                  value: true
20          - definition: radioGroup
21            properties:
22              name: "exampleRadioGroupName"
23              options:
24                - identifier: "option_1"
25                  label: "Option 1"
26                  description: "This is a radio button"
27                - identifier: "option_2"
28                  label: "Option 2"
29          - definition: button
30            properties:
31              label: "Action Button Example"
32              name: "actionButton"
33              value: "hello"
34            events:
35              onclick:
36                definition: "apex__action__SelectOption"

This example creates an action block with onchange events.

1description: "This is a simple view to test block actions via events"
2components:
3  - definition: modal
4    properties:
5      title: "Events Example"
6    components:
7      - definition: actions
8        name: "actions_block"
9        components:
10          - definition: select
11            properties:
12              placeholder: "Static Select"
13              name: "exampleSelect"
14              options:
15                - identifier: "option_1"
16                  label: "Option 1"
17                  description: "This item is option 1"
18                - identifier: "option_2"
19                  label: "Option 2"
20            events:
21              onchange:
22                definition: "apex__action__SelectOption"
23                properties:
24                  actionDescription: "select onchange"
25          - definition: conversationsSelect
26            properties:
27              name: "exampleConversationsSelect"
28              placeholder: "Conversations Select"
29            events:
30              onchange:
31                definition: "apex__action__SelectConversation"
32                properties:
33                  actionDescription: "conversationsSelect onchange"
34          - definition: usersSelect
35            properties:
36              name: "exampleUsersSelect"
37              placeholder: "Users Select"
38            events:
39              onchange:
40                definition: "apex__action__SelectUsers"
41                properties:
42                  actionDescription: "usersSelect onchange"

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

1description: "This is a simple view to test block actions via events"
2components:
3  - definition: modal
4    properties:
5      title: "Events Example"
6    components:
7      - definition: actions
8        name: "checkbox_action_block"
9        components:
10          - definition: checkboxGroup
11            properties:
12              name: "exampleCheckboxGroupName"
13              options:
14                - identifier: "option_1"
15                  label: "Option 1"
16                  value: true
17                - identifier: "option_2"
18                  label: "Option 2"
19                  value: true
20            events:
21              onchange:
22                definition: "apex__action__SelectOptions"
23                properties:
24                  actionDescription: "checkbox onchange"
25          - definition: radioGroup
26            properties:
27              name: "exampleRadioGroupName"
28              options:
29                - identifier: "option_1"
30                  label: "Option 1"
31                  description: "This is a radio button"
32                - identifier: "option_2"
33                  label: "Option 2"
34            events:
35              onchange:
36                definition: "apex__action__SelectOptionChange"
37                properties:
38                  actionDescription: "radioGroup onchange"
39          - definition: button
40            properties:
41              label: "Action Button Example"
42              value: "abc123"
43            events:
44              onclick:
45                definition: "apex__action__ClickButton"
46                properties:
47                  actionDescription: "button onclick"
48          - definition: button
49            properties:
50              label: "Action Button With Name and Event"
51              name: "button_with_events"
52              value: "abc123"
53            events:
54              onclick:
55                definition: "apex__action__ClickButton"
56                properties:
57                  actionDescription: "button onclick"
58          - definition: overflow
59            properties:
60              name: "exampleOverflow"
61              options:
62                - identifier: "overflow_1"
63                  label: "Overflow 1"
64                - identifier: "overflow_2"
65                  label: "Overflow 2"
66            events:
67              onclick:
68                definition: "apex__action__ClickOverflow"
69                properties:
70                  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.

1description: "Example usage of the context component"
2components:
3  - definition: modal
4    properties:
5      title: "Context Example"
6      submitLabel: "Submit"
7      closeLabel: "Cancel"
8    components:
9      - definition: context
10        name: "context_block"
11        components:
12          - definition: text
13            properties:
14              text:
15                text: "*This* is :smile: markdown"
16                type: "mrkdwn"
17          - definition: image
18            properties:
19              url: "https://image.freepik.com/free-photo/red-drawing-pin_1156-445.jpg"
20              altText: "Book cover"
21          - definition: text
22            properties:
23              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.

1components:
2  - definition: divider

This divider is added after the header in a message.

1components:
2  - definition: message
3    components:
4      - definition: header
5        properties:
6          text: "{!view.properties.headerText}"
7      - 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

1components:
2  - definition: header
3    name: "headerId"
4    properties:
5      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

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.

Tip

Examples

This example creates a standalone image.

1components:
2  - definition: image
3    name: "standalone_image"
4    properties:
5      url: "https://via.placeholder.com/150"
6      altText: "Placeholder image"
7      title: "Placeholder image title"

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

1description: "Example usage of the image component"
2components:
3  - definition: modal
4    properties:
5      title: "Image Example"
6    components:
7      - definition: image
8        name: "standaloneImage"
9        properties:
10          url: "http://placekitten.com/500/500"
11          altText: "Cat photo"
12          title: "Enjoy this cat photo"
13      - definition: divider
14      - definition: section
15        properties:
16          text: "An inline image in a section block."
17        components:
18          - definition: image
19            properties:
20              url: "http://placekitten.com/500/500"
21              altText: "Cat photo"
22      - definition: divider
23      - definition: context
24        name: "imageInContext"
25        components:
26          - definition: image
27            properties:
28              url: "http://placekitten.com/500/500"
29              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.

1components:
2  - definition: input
3    name: "input_block"
4    properties:
5      required: true
6      label: "Input Block"
7    components:
8      - definition: textInput
9        properties:
10          value: "default value"

This example creates an input block with a checkbox component.

1components:
2  - definition: input
3        name: "checkbox"
4        properties:
5          label: "Checkbox"
6        components:
7          - definition: checkbox
8            properties:
9              name: "single_checkbox"
10              value: true

This example creates input blocks with nested elements.

1description: "Input Blocks with nested elements"
2components:
3  - definition: modal
4    properties:
5      title: "Input Block Example"
6    components:
7      - definition: input
8        name: "my_text_input_block"
9        properties:
10          required: true
11          label: "My text input block"
12        components:
13          - definition: textInput
14            properties:
15              value: "hello world"
16              name: "my_input_element"
17              multiline: false
18              placeholder: "Enter Text Here"
19              minLength: 2
20              maxLength: 25
21      - definition: input
22        name: "my_radio_group_input_block"
23        properties:
24          required: true
25          label: "My radioGroup input block"
26        components:
27          - definition: radioGroup
28            properties:
29              name: "simple_radio_buttons"
30              value: "option_1"
31              options:
32                - identifier: "option_1"
33                  label: "Option 1"
34                  description: "This item is option 1"
35                - identifier: "option_2"
36                  label: "Option 2"
37              confirm:
38                title: "Confirm Selection"
39                text: "Please confirm your selected option."
40                confirm: "Confirm"
41                deny: "Cancel"
42                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`.

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.

Warning

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.

1components:
2  - definition: section
3    properties:
4      text: "Hello, world!"

This example renders markdown.

1components:
2  - definition: section
3    properties:
4      text:
5        text: "This text includes *bold* and _italic_."
6        type: "mrkdwn"

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

1schema:
2  properties:
3    fieldName:
4      type: string
5    fieldValue:
6      type: string
7components:
8  - definition: modal
9    properties:
10      title: "My Field"
11    components:
12      - definition: section
13        properties:
14          text:
15            text: "*{!view.properties.fieldName}:* {!view.properties.fieldValue}"
16            type: "mrkdwn"

A section can contain up to 10 text fields.

1components:
2  - definition: section
3    properties:
4      fields:
5        - text: "This the *first* field."
6          type: "mrkdwn"
7        - text: "This the *second* field."
8          type: "mrkdwn"

You can include a single component in a section.

1components:
2  - definition: section
3    name: "my_section_block"
4    properties:
5      text: "This is a text field"
6    components:
7      - definition: image
8        properties:
9          url: "https://via.placeholder.com/150"
10          altText: "Placeholder image"

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

1components:
2  - definition: modal
3    properties:
4      title: "An Example Section"
5    components:
6      - definition: section
7        name: "section_text"
8        properties:
9          text: "Section block with text only"
10      - definition: section
11        name: "section_markdown"
12        properties:
13          fields:
14            - text: "Section block with a section input component"
15              emoji: true
16      - definition: section
17        name: "simple_markdown_section_text_fields"
18        properties:
19          text: "text field"
20          fields:
21            - text: "Field 1 :smile:"
22              emoji: true
23            - text: "Field 2"
24            - text: "Field 3"
25            - text: "Field 4"
26            - text: "Field 5"
27            - text: "Field 6"
28            - text: "Field 7"
29            - text: "Field 8"
30            - text: "Field 9"
31            - text: "Field with link: https://www.salesforce.com/"
32              type: "mrkdwn"
33              verbatim: false
34        components:
35          - definition: select
36            properties:
37              name: "section_select"
38              placeholder: "Section Select Input"
39              options:
40                - identifier: "option_1"
41                  label: "Option 1"
42                  description: "This is option 1"
43                - identifier: "option_2"
44                  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`.

Beta Feature

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