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

2-column text

2-column text

Double-column text is a combination module provided by the message card building tool, which is used to build content for side-by-side display.

Component display

In the message card building tool, the double-column text combination module is shown in the figure below. Different from the multi-column layout component’s style adjustment and the ability to embed other components and elements, double-column text is only used to display text information.

The JSON configuration example is as follows. Double-column text is defined in the content module (div), and the layout of multi-column text is controlled through the fields element.

Parameter description

The parameters contained in the field element are described in the following table.

ParametersRequiredTypeDescription

is_short

Yes

Boolean

Whether to lay out side by side. Value:

  • true: side by side
  • false: not side by side

text

Yes

Struct

Internationalized text content. Use the data structure of the text component to display content. For details, see Text component.

Sample card

The JSON code example is as follows:

// If you want to use this JSON example, please note that you need to manually clear the comments at the beginning of //
{
"header": {
"title": {
"tag": "plain_text",
"content": "You have a leave request pending"
}
},
"elements": [
{
"tag": "div",
"fields": [
{
"is_short": true, // side by side layout
"text": {
"tag": "lark_md",
"content": "**Applicant**\nXiaolei Wang"
}
},
{
"is_short": true, // side by side layout
"text": {
"tag": "lark_md",
"content": "**Leave type:**\nAnnual leave"
}
},
{
"is_short": false, // non-side-by-side layout
"text": {
"tag": "lark_md",
"content": ""
}
},
{
"is_short": false, // non-side-by-side layout
"text": {
"tag": "lark_md",
"content": "**Time:**\n2020-4-8 to 2020-4-10 (3 days in total)"
}
},
{
"is_short": false, // non-side-by-side layout
"text": {
"tag": "lark_md",
"content": ""
}
},
{
"is_short": true, // non-side-by-side layout
"text": {
"tag": "lark_md",
"content": "**Remarks**\nDue to an emergency at home, I need to go back and forth to my hometown, so I am asking for leave"
}
}
]
}
]
}
The contents of this article