GRID Block

The GRID block displays data in a tabular format of "name-value" pairs with various display options.

Display Options

  • BLOCK — each GRID element is displayed as a separate block on a new line, forming a vertical list.
  • LINE — elements are displayed in a single line as cards, wrapping to the next line when there is insufficient width.
  • ROW — a classic two-column format "NAME | VALUE".
  • TABLE — a tabular mode with a denser grid; support depends on the client application version. In some clients, it may appear as ROW.

How It Looks in the Interface

  • BLOCK

    Fields are listed one below the other, each on a new line.

    Example:

    Project: BUGS
        Category: im
        Summary: Implementation required...

  • LINE

    Fields are shown as compact cards in a single line. If space is insufficient, the cards wrap to the next line.

    Example:

    [Project: BUGS] [Category: im] [Priority: High]
        [Executor: John Doe]

  • ROW

    "Name-value" pairs are displayed in two columns: NAME on the left and VALUE on the right.

    Example:

    Project      | BUGS
        Category     | im
        Priority     | High

  • TABLE

    A tabular version with a denser grid. Depending on the client, it may look like ROW.

    Example:

    Project    | BUGS
        Category   | im
        Deadline   | 11/04/2015 05:50:43 PM

Warning

Do not mix different display formats within a single GRID entry. If different types of representation are needed, create separate GRID blocks.

General Parameters of the GRID Element

Name
type

Description

DISPLAY*
string

Display format: BLOCK, LINE, ROW, TABLE

NAME
string

Field name. In ROW mode, it may be absent, in which case VALUE takes the full width of the row

VALUE
string

Field value. BB codes are supported for VALUE. In ROW mode, it may be absent, in which case NAME takes the full width of the row

WIDTH
integer

Width of the block or column in pixels

HEIGHT
integer

Height of the block in pixels

COLOR_TOKEN
string

Color token for the value: primary, secondary, alert, base

COLOR
string

HEX color of the value (#RGB or #RRGGBB)

LINK
string

External link for the value

USER_ID
integer

Internal reference to the user

CHAT_ID
integer

Internal reference to the chat

Supported BB Codes for VALUE

Code

Purpose

USER

Mention a user with a link to their profile in the chat

CHAT

Link to the chat

SEND

Clickable action "send text to chat"

PUT

Clickable action "insert text into input field"

CALL

Clickable action for calling

BR

Line break

B

Bold text

U

Underlined text

I

Italic text

S

Strikethrough text

URL

Link

Examples

How to Use Examples in Documentation

Block Representation

DISPLAY: 'BLOCK' displays elements one below the other.

Block Representation

Example

{
            GRID: [
                {
                    NAME: 'Description',
                    VALUE: 'Implementation required to add structured entities to messages and notifications in the messenger.',
                    DISPLAY: 'BLOCK',
                    WIDTH: 250
                },
                {
                    NAME: 'Category',
                    VALUE: 'Requests',
                    DISPLAY: 'BLOCK',
                    WIDTH: 100
                }
            ]
        }
        
[
            'GRID' => [
                [
                    'NAME' => 'Description',
                    'VALUE' => 'Implementation required to add structured entities to messages and notifications in the messenger.',
                    'DISPLAY' => 'BLOCK',
                    'WIDTH' => 250
                ],
                [
                    'NAME' => 'Category',
                    'VALUE' => 'Requests',
                    'DISPLAY' => 'BLOCK',
                    'WIDTH' => 100
                ]
            ]
        ]

Line Representation

DISPLAY: 'LINE' displays elements in a line, wrapping to the next line when there is insufficient space.

Line Representation

In the mobile version, elements are displayed one below the other.

Example

{
            GRID: [
                {
                    NAME: 'Priority',
                    VALUE: 'High',
                    COLOR_TOKEN: 'alert',
                    COLOR: '#ff0000',
                    DISPLAY: 'LINE',
                    WIDTH: 250
                },
                {
                    NAME: 'Category',
                    VALUE: 'Requests',
                    DISPLAY: 'LINE'
                }
            ]
        }
        
[
            'GRID' => [
                [
                    'NAME' => 'Priority',
                    'VALUE' => 'High',
                    'COLOR_TOKEN' => 'alert',
                    'COLOR' => '#ff0000',
                    'DISPLAY' => 'LINE',
                    'WIDTH' => 250
                },
                [
                    'NAME' => 'Category',
                    'VALUE' => 'Requests',
                    'DISPLAY' => 'LINE'
                ]
            ]
        ]

Two-Column Representation

DISPLAY: 'ROW' displays data in two columns.

Two-Column Representation

Example

{
            GRID: [
                {
                    NAME: 'Priority',
                    VALUE: 'High',
                    DISPLAY: 'ROW'
                },
                {
                    NAME: 'Category',
                    VALUE: 'Requests',
                    DISPLAY: 'ROW'
                }
            ]
        }
        
[
            'GRID' => [
                [
                    'NAME' => 'Priority',
                    'VALUE' => 'High',
                    'DISPLAY' => 'ROW',
                    'WIDTH' => 250
                },
                [
                    'NAME' => 'Category',
                    'VALUE' => 'Requests',
                    'DISPLAY' => 'ROW'
                ]
            ]
        ]

Continue Learning

Previous
Divider Block
Next
Images Block