Custom Rows allows you to easily generate draggable rows from your application content, or other application content, without any design process or complex user interaction.
General row parameters
name
The row’s name:
A string of plain text that identifies the row.
Displayed in the row card when the row is shown in the Rows panel.
Included in the textual content used in searches
background image
Set a row background image.
Properties:
background-image: valid image url
background-repeat: repeat | no-repeat
background-position: top | bottom + left | center | right
background-color: #c2c2c2 // CSS value
display conditions
Properties:
display-condition
type
label
description
before
after
mobile
Disable stacking on mobile. Set the value to “false” to disable stacking on mobile. If the value is “true”, or not provided, the columns will stack on mobile.
colStackOnMobile: true | false
columns
List of the row columns. Each column type is identified with a weight parameter to indicate how much horizontal space they fill.
We use a 12-column grid with the following values as available combinations:
12
9, 3
8, 4
6, 6
6, 3, 3
4, 8
4, 4, 4
3, 9
3, 3, 6
3, 6, 3
3, 3, 3, 3
All the columns weight inside a row must sum 12 as the total value.
Simplified Row Schema
This simplified row schema is designed to help you structure and validate rows. It allows you to define rows that contain columns, which can hold various design elements like buttons, images, text, and more, all while enforcing clear rules for responsiveness, styling, and structure. Its simplicity lies in its modular approach: each column and module follows a predictable pattern with reusable definitions like padding and predefined options for properties like alignment and color.
You can reference the simplified schema in the following code snippet:
