Platform Introduction
Develop Process
Quick Starts
Develop Web Apps
Develop Bots
Develop Gadgets (Not Recommended)
Develop Docs Add-ons
Develop Base Extensions
Develop Workplace Blocks
Message Card
Quick Start
Component
Content components
Interactive components
Combinations
Card JSON components
Build card content
Configuring card callbacks
Send message card
Message Card Example
SSO&End User Consent
AppLink Protocol
Configure App Entry
Tools and SDKs
FAQ
Management Practice
Platform Notices
Deprecated Guides

Multi-column layout

Multi-column layout

Multi-column layout is a layout container capability provided by the message card building tool. You can use multi-column layout to arrange multiple column containers horizontally, and freely combine graphic and text content within the column containers. This solves the problem of multi-column content alignment and also enables flexible graphic and text mixing.

Features

The multi-column layout container consists of multi-column layout (column_set) and column (column). Multiple columns can be filled horizontally in a container, and element components such as text and pictures can be stacked vertically within each column, or a new multi-column layout can be nested.

The nested relationship between multi-column layout, columns, and element components is shown in the figure below.

The hierarchical relationship of multi-column layouts is nested within columns, as shown in the figure below.

The layout container provides attributes such as content alignment, container width, and interaction mode to facilitate you to better layout the content. Based on this layout method, you can build data tables, product article lists, travel information, etc. mixed message cards that are rich in graphics and text, and interactive and friendly.

Note:

Component display

In the message card building tool, the multi-column layout component is configured as follows:

  • Set column proportions

    When adding a multi-column layout component, you can select the applicable column proportions.

  • Configure layout style

    After selecting a multi-column layout, you can configure the style and interaction of the layout.

    • Flex mode: Set the display of multi-column layout in narrow screen scenarios. You can choose None, Stretch, Flow, Bisect, Trisect. For specific parameter configuration instructions, please refer to the flex_mode parameter in the Parameter description chapter below.
    • Horizontal column spacing: The spacing between columns in a multi-column layout, optional Default, Small.
    • Background style: Optional Default (that is, the default white background style), Gray.
    • Bind loop variable: You can add loop object array variables. For descriptions of variables, see Configure Card Variables.
    • Interaction: After enabling interaction, you can configure jump links for multi-column layouts. Supports enabling differentiated jumps and configuring different jump links for PC, Android, and iOS.
  • Configure column layout

    After selecting a column in a multi-column layout, you can configure the style of the column layout.

    • Width: After selecting Weighted, you can manually set Weight, and the system will adapt the width of each column according to the proportion. When Auto is selected, the column width remains consistent with the width of the elements within the column.
    • Vertical alignment mode: You can choose Top, Center, Bottom.

Application scenarios

Multi-column layout is often used in the following scenarios:

  • Data report push scenario: Using multi-column layout, you can quickly build a neat and screen-adaptive multi-column data table, which solves the tedious typesetting process of traditional report construction and the style problem of being unable to adapt to various screens.

  • Mixed picture and text scenario: Multi-column layout and flexible horizontal and vertical column layout capabilities allow you to quickly build ideal picture and text message cards. Effectively reduce the time-consuming manual adjustment of graphic and text layout.

Parameter description

The parameter description of multi-column layout is shown in the following table.

ParametersRequiredTypeDescription

tag

Yes

String

The identifier of the multi-column layout container, fixed value: column_set.

flex_mode

Yes

String

The adaptive method of each column under the narrow screen of mobile and PC. Value:

  • none: Do not adapt the layout, and compress the column width proportionally on narrow screens.
  • stretch: The column layout changes to a row layout, and the width of each column (row) is forced to stretch to 100%, and all columns are adaptively stacked up and down.
  • flow: Column flow arrangement (automatic line wrapping). When a row cannot be displayed in the next column, it will automatically be displayed in the next row.
  • bisect: Two columns of equal distribution layout.
  • trisect: three-column equal distribution layout.

Default: none.

background_style

No

String

Background color style for multi-column layouts. Value:

  • default: The default white background style, black background in dark mode.
  • grey: gray background style.

When there is a nesting of multi-column layouts, the color of the upper multi-column layout overrides the color of the lower multi-column layout.

horizontal_spacing

No

String

The horizontal column spacing between columns in a multi-column layout. Value:

  • default: Default spacing.
  • small: Narrow spacing.

columns

No

column[]

In a multi-column layout container, the configuration information of each column container. See column parameter description below for details.

action

No

action

Set the interaction configuration when clicking the layout container. Currently only jump interactions are supported. If there is an interactive component in the layout container, the interaction defined by the interactive component will be responded to first.

The sample configuration is as follows, which supports embedded url elements. For the description of this element, see url.

{
"action": {
"multi_url": {
"url": "https://open.larksuite.com",
"pc_url": "https://open.feishu.com",
"ios_url": "https://developer.apple.com/",
"android_url": "https://developer.android.com/"
}
}
}

Column parameter description

ParametersRequiredTypeDescription

tag

Yes

String

Column container identifier, fixed value: column.

width

No

String

Column width property. Value:

  • auto: The column width is consistent with the width of the elements in the column.
  • weighted: Column widths are distributed according to the weight defined by the weight parameter.

weight

No

number

Effective when width takes the value weighted, indicating the width ratio of the current column. Value range: 1 ~ 5

vertical_align

No

String

The vertical alignment of members within the column. Value:

  • top: Top alignment.
  • center: Center alignment.
  • bottom: bottom alignment.

elements

No

Elements[]

ColumnSet[]

The card element that needs to be displayed in the column.

JSON examples and effects

Example 1: Data report

JSON example:

{
"elements": [
{
"tag": "markdown",
"content": "**Overview of Personal Approval Efficiency**\n"
},
{
"tag": "column_set",
"flex_mode": "bisect",
"background_style": "grey",
"horizontal_spacing": "default",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "Amount of approved orders\n**${total_count} orders**\n${total_percent}"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "Average approval time\n**${hours} hours**\n${hours_percent}"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"elements": [
{
"tag": "markdown",
"text_align": "center",
"content": "Pending rate\n**${pending}**\n${pending_rate}"
}
]
}
]
},
{
"tag": "markdown",
"content": "**Team approval efficiency reference:**"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "grey",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**Approver**",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**Approval time**",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "**Comparison of changes last week**",
"text_align": "center"
}
]
}
]
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${person}",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${time}",
"text_align": "center"
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "top",
"elements": [
{
"tag": "markdown",
"content": "${week_rate}",
"text_align": "center"
}
]
}
],
"_varloop": "${group_table}"
}
]
}

Show results:

Desktop effectNarrow screen and mobile adaptive effect

image.png

image.png

Example 2: Travel card

JSON example:

{
"header": {
"title": {
"tag": "plain_text",
"content": "🏨 The hotel application has been approved, please select the room type"
},
"template": "green"
},
"elements": [
{
"tag": "markdown",
"content": "**Check-in hotel:**[Hangzhouxxxx Hotel](https://open.larksuite.com/)\n<font color='grey'>📍 Xihu District, Hangzhou City, Zhejiang Province</font> "
},
{
"tag": "hr"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"horizontal_spacing": "default",
"action": {
"multi_url": {
"url": "https://open.larksuite.com",
"android_url": "https://developer.android.com/",
"ios_url": "https://developer.apple.com/",
"pc_url": "https://www.windows.com"
}
},
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "center",
"elements": [
{
"tag": "img",
"img_key": "img_v2_120b03c8-27e3-456f-89c0-90ede1aa59ag",
"mode": "fit_horizontal",
"alt": {
"tag": "plain_text",
"content": ""
}
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 3,
"elements": [
{
"tag": "markdown",
"text_align": "left",
"content": "**Superior Twin Room**\n<font color='grey'>Double breakfast|40-47㎡|With windows|Twin beds</font>\n<font color='red'> From ¥699</font>"
}
]
}
]
},
{
"tag": "hr"
},
{
"tag": "column_set",
"flex_mode": "none",
"background_style": "default",
"horizontal_spacing": "default",
"action": {
"multi_url": {
"url": "https://open.larksuite.com",
"android_url": "https://developer.android.com/",
"ios_url": "https://developer.apple.com/",
"pc_url": "https://www.windows.com"
}
},
"columns": [
{
"tag": "column",
"width": "weighted",
"weight": 1,
"vertical_align": "center",
"elements": [
{
"tag": "img",
"img_key": "img_v2_120b03c8-27e3-456f-89c0-90ede1aa59ag",
"mode": "fit_horizontal",
"alt": {
"tag": "plain_text",
"content": ""
}
}
]
},
{
"tag": "column",
"width": "weighted",
"weight": 3,
"elements": [
{
"tag": "markdown",
"text_align": "left",
"content": "**Boutique King Room**\n<font color='grey'>Double breakfast|40-47㎡|With window|Big bed</font>\n<font color='red'> From ¥666</font>"
}
]
}
]
}
]
}
Desktop effectNarrow screen and mobile adaptive effect

image.png

image.png