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.
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:
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
parameter in the Parameter description chapter below.Configure column layout
After selecting a column in a multi-column layout, you can configure the style of the column layout.
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.
The parameter description of multi-column layout is shown in the following table.
Parameters | Required | Type | Description |
---|---|---|---|
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:
Default: none. |
background_style | No | String | Background color style for multi-column layouts. Value:
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:
|
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.
|
Parameters | Required | Type | Description |
---|---|---|---|
tag | Yes | String | Column container identifier, fixed value: |
width | No | String | Column width property. Value:
|
weight | No | number | Effective when |
vertical_align | No | String | The vertical alignment of members within the column. Value:
|
elements | No | Elements[] ColumnSet[] | The card element that needs to be displayed in the column. |
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 effect | Narrow screen and mobile adaptive effect |
---|---|
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 effect | Narrow screen and mobile adaptive effect |
---|---|