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.

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

Use the following layout components to build your views.

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.

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

This example creates an action block with onchange events.

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

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be actions.
componentsArrayYesA maximum of 5 components to render inside the actions component.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.

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.

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be context.
componentsArrayYesA maximum of 10 text and image components to render inside the context component.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.

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.

This divider is added after the header in a message.

Keys

KeyTypeRequiredDescription
definitionstringYesThe value must be divider.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.

Available in: Modal | Message | Home tab

A header with large, bold text.

Header Example

Example

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be header.
propertiesObjectYesThe component's properties.
properties.textString, Plain Text, ExpressionYesThe text for the header component.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.

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.

Examples

This example creates a standalone image.

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

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be image.
propertiesObjectYesThe component's properties.
properties.urlString, ExpressionYesThe URL of the image to display. URLs must use a valid protocol scheme such as http:// or https://.
properties.altTextString, ExpressionYesA plain text description of the image.
properties.titleString, Plain Text, ExpressionNoThe title for the image. This value can be provided only for a standalone image.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.

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.

This example creates an input block with a checkbox component.

This example creates input blocks with nested elements.

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be input.
propertiesObjectYesThe component's properties.
properties.labelString, Plain Text, ExpressionYesThe input label
properties.hintString, ExpressionNoA hint that can be used to convey format or other input requirements for the input component rendered within the input.
properties.requiredBoolean, ExpressionNoIf true, the form can't be submitted when a field in the input component is empty. The default value is false.
properties.dispatchActionBoolean, ExpressionNoIf true, an element within the input dispatches to an action bound to it. The default value is false.
componentsArrayYesA 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.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates 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.

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.

This example renders markdown.

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

A section can contain up to 10 text fields.

You can include a single component in a section.

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

Keys

KeyTypeRequiredDescription
definitionStringYesThe value must be section.
propertiesObjectYesThe component's properties.
properties.textString, Expression, Plain Text, MrkdwnNoThe 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.fieldsArray of items of type String, Plain Text, Mrkdwn, ExpressionNoAn array of text fields to render within the component. Required if the text property is absent. The maximum number of text fields is 10.
componentsArrayNoA single component to render inside the input.
nameString, ExpressionNoThe name to uniquely identify this component within the view.
visibilityBoolean, ExpressionNoIndicates whether the component is shown (true) or hidden (false). The default value is true.