Building Blocks

Here is the list of objects, block elements, and blocks you can use to create interactions for your apps.

Objects

Text object

FieldTypeRequired?Description

type

String

Yes

The type of text object that you want to add. The available values are plain_text and mrkdwn.

text

String

Yes

The actual text.

emoji

Boolean

No

Works with the plain_text type.

Example

{
  type: 'plain_text',
  text: 'lorem ipsum πŸš€',
  emoji: true,
}

Option object

FieldTypeRequired?Description

text

Object

Yes

The text that is to be displayed on the menu. The value can either be plain_text or mrkdwn.

value

String

Yes

The actual value that the option represents.

Example

{
  value: 'option_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum πŸš€',
      emoji: true,
    }
}

Block elements

button

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case,button.

text

Object

Yes

The text that is to be displayed on the menu. The value can either be plain_text or mrkdwn.

value

String

No

A value sent along with the button information when an action is made upon the element.

url

String

No

A URL that the button points to.

style

String

No

The style of the button. The value can either be primary or danger.

actionId

String

Yes

A unique identifier for an action made upon the element.

Example

{
  type: 'button',
  text: {
      type: 'plain_text',
      text: 'danger❗',
      emoji: true,
    },
  actionId: 'button_1_danger',
  style: 'danger',
}

image

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case, image.

imageUrl

String

Yes

The URL of the image.

altText

String

Yes

The text describing the image being displayed.

Example

{
  type: 'image',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
}

overflow menu

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case, overflow.

options

Array

Yes

An array with the possible options (the options object).

actionId

String

Yes

A unique identifier for an action made upon the element.

Example

{
  type: 'overflow',
  actionId: 'overflow_1',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
  ],
}

plain text input

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case, plain_text_input.

actionId

String

Yes

A unique identifier for an action made upon the element.

placeholder

Object

Yes

A placeholder text for the input (plain text object).

initialValue

String

No

The initial value of the field.

multiline

Boolean

No

A flag that indicates whether the field should be a single line (default) or a larger text area.

Example

{
  type: 'plain_text_input',
  actionId: 'plain_text_input_1',
  placeholder: {
      type: 'plain_text',
      text: 'Enter name',
      emoji: true,
    },
  initialValue: 'John Doe',
  multiline: false,
}

static select menu

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case, static_select.

actionId

String

Yes

A unique identifier for an action made upon the element.

placeholder

Object

Yes

A placeholder text for the input (plain text object).

initialValue

String

No

The initial value selected (value field from the options object).

options

Array

Yes

An array with the possible options (the options object).

Example

{
  type: 'static_select',
  actionId: 'overflow_1',
  initialValue: 'option_2',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

multi-static select menu

FieldTypeRequired?Description

type

String

Yes

The type of the block element, in this case, multi_static_select.

actionId

String

Yes

A unique identifier for an action made upon the element.

placeholder

Object

Yes

A placeholder text for the input (plain text object).

initialValue

Array of strings

No

The initial values selected (value field from the options object).

options

Array

Yes

An array with the possible options (the options object).

Example

{
  type: 'multi_static_select',
  actionId: 'overflow_1',
  initialValue: ['option_1' ,'option_2'],
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum πŸš€',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

Blocks

section

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, section.

text

Object

Yes

The text that is to be displayed on the button. The value can either be plain_text or mrkdwn.

accessory

Object

No

One element that can be a button element, an image element, or an overflow menu.

Example

{
  type: 'section',
  blockId: 'section_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum πŸš€',
      emoji: true,
    }
  accessory: { /* one of the accessory elements */ } ,
}

Notice how the section block and the button element are used in the Contextual Bar app.

divider

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, divider.

Example

{
  type: 'divider',
  blockId: 'divider_1',
}

image

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, image.

imageUrl

String

Yes

The URL of the image.

altText

String

Yes

A text describing the image being displayed.

title

Object

No

The text to be displayed as the image's title. The value can either be plain_text or mrkdwn.

Example

{
  type: 'image',
  blockId: 'image_1',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
  title: {
      type: 'plain_text',
      text: 'lorem ipsum πŸš€',
      emoji: true,
    }
}

actions

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, actions.

elements

Array

Yes

A list of interactive block elements.

Example

{
  type: 'actions',
  blockId: 'actions_1',
  elements: [ /* block elements */ ]
}

context

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, context.

elements

Array

Yes

A list of block elements. Allowed elements are plain text object and image element.

Example

{
  type: 'context',
  blockId: 'context_1',
  elements: [ /* block elements */ ]
}

input

FieldTypeRequired?Description

blockId

String

No

A unique identifier for the block.

type

String

Yes

The type of the block, in this case, input.

element

Array

Yes

The input element, that can be plain text input, static select menu, and multi static select menu.

Example

{
  type: 'input',
  blockId: 'input_1',
  element: { /* input element */ }
}

Now that we've seen the different building blocks that can be used for our apps, let's take a look at how to use action buttons to initiate a set of actions in the next section.

Last updated

Rocket.Chat versions receive support for six months after release.