Blocks Support in Rocket.Chat

Blocks support in Rocket.Chat

Slack has introduced new blocks field to the message object. The message blocks are composed of Json data which can be used to display messages in the clients in more concise and cleaner way. The blocks is an array field where block elements can be stacked together in the visual order where the top block element is displayed first and so on. The block elements can hold static content or interactive components. When blocks field is used in the message object the previous msg which holds the message text becomes fallback for notifications. So slack suggest to define the entire desired visible message,within that blocks array. Blocks can also be used in the attachments field of the message object to display any other extra data like rich messages… etc.

Example of Blocks:

{
  "channel": "C1H9RESGL",
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Blocks Example*."
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "ok",
            "emoji": true
          },
          "value": "click_me_123"
        }
      ]
    }
  ]
}

Types of Blocks

Blocks are a series of components that can be combined to create visually rich and compellingly interactive messages. There are several types of blocks which provide both static components and interactive components. Among them, Few important block types are Section, Actions Blocks.

Section Block:

A section block is the most basic block and is also flexible it can hold a simple text block, a combination of one of the available block elements like datepickers, overflows, buttons .. etc.

The section block contains these fields:

Field	Type	Description
type text Block_id fields accessory	String Object String Object[] Object	For section block the type will be section The text for the block Id for the block which is unique to every block Array of text objects. Any text objects included with fields will be rendered in a compact format. Any one of the element object

Example:

{
  "type": "section",
  "text": {
    "text": "*Sally* has requested you set the deadline for the Nano launch project",
    "type": "mrkdwn"
  },
  "accessory": {
    "type": "datepicker",
    "action_id": "datepicker123",
    "initial_date": "1990-04-28",
    "placeholder": {
      "type": "plain_text",
      "text": "Select a date"
    }
  }
}

Action Block Unlike Section Block which can hold only one accessory element Action Block can hold an array of different types of block elements like overflow, datepicker, button.. Etc.

An Action Block contains these fields.

Field	Type	Description
type	String	For action block the type will be actions
block_id	String	Id for the block which is unique to every block
elements	Object[]	An array of interactive element objects - buttons, select menus, overflow menus, or date pickers

In slack only 5 element objects are allowed in the elements array.

Example:

{
  "type": "actions",
  "block_id": "actions1",
  "elements": [
    {
      "type": "button",
      "text": {
          "type": "plain_text",
          "text": "Cancel"
      },
      "value": "cancel",
      "action_id": "button_1"
    }
  ]
}

Types of Block elements

There are several Block Elements available where some provide static content and some provide interactive content. These Block elements can be used inside the block types like section and action blocks. The different types of Block elements are

Button
Image
Overflow
DatePicker

Button Element

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

Field	Type	Description
type text action_id url Value Confirm	String Object String String String Object	For button element the type would be button The text on the button Id for the action which is unique to every action. This is used to identify the source The url to be displayed in the browser The value to be send along with response payload A confirm object that defines an optional confirmation dialog after the button is clicked.

Image Element

An element to insert an image - this element can be used in section only. If you want a block with only an image in it, you're looking for the image block.

Fields in menu with static_option:

Field	Type	Description
type image_url alt_text	String String String Object	The type of element. In this case type is always image. The URL of the image to be displayed. A plain-text summary of the image. This should not contain any markup.

Overflow Element:

Like Menu button overflow button shows options to select and the users can select the options a response object is sent to the app. But unlike menu element overflow element doesn’t have any placeholder text or an initial option. Overflow element helps to display options in a clear and concise way.

For overflow element the maximum number of options are 5 and minimum no of options are 2.

Field	Type	Description
type action_id options Confirm	String String Object[] Object	For a overflow element the type would be overflow Id for the action which is unique to every action. This is used to identify the source An array of option object. Option object contains fields like text, value, url. A confirm object that defines an optional confirmation dialog after the button is clicked.

DatePicker element

The date picker will be very helpful in selecting dates from a calendar-style UI. and sending those responses to the app so that ap can do tasks like scheduling meetings.

Field	Type	Description
type placeholder action_id initial_date Confirm	String Object String Object Object	For a datepicker element the type would be datepicker The placeholder text shown on the datepicker element Id for the action which is unique to every action. This is used to identify the source The initial date that is selected when the element is loaded. A confirm object that defines an optional confirmation dialog after the button is clicked.

Blocks in Rocket.Chat

The message object is the very soul of a conversation in Rocket.Chat. It encapsulates all the information need in order to represent a single entry on a message list. The message Object contains the fields like id, rid, msg, ts, attachments..etc. In the Rocket.Chat message object the msg field holds the text of the message and all the secondary data like images, videos, rich messages in attachments field.

To implement blocks in Rocket.chat we can include a field called blocks which is an array of block types along with the msg field so that it won’t break any previous implementations.

{
  "_id": "message-id",
  "rid": "room-id",
  "msg": "Hello World!",
  "ts": {
    "$date": 1480377601
  },
  "u": {
    "_id": "user-id",
    "username": "username"
  },
  "attachments": [
    {
      "text": "Yay for gruggy!",
      "thumb_url": "http://res.guggy.com/logo_128.png",
      "title": "Attachment Example",
      "title_link": "https://youtube.com",
      "title_link_download": true,
      "ts": "2016-12-09T16:53:06.761Z",
      "video_url": "http://www.w3schools.com/tags/movie.mp4"
    }
  ],
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Blocks Example*."
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "ok",
            "emoji": true
          },
          "value": "click_me_123"
        }
      ]
    }
  ],
  "_updatedAt": {
    "$date": 1480377601
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks Support in Rocket.Chat