Generating Custom Rows from existing content
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.
To make it possible, we built a Simplified Row Schema, a JSON that describes each row and its contents with the minimum number of elements, to easily transform existing content into a destination format compliant by the Beefree SDK system.
While the Saved Rows feature provides the complex and continuously evolving object used in the message page, the Simplified Row Schema makes it easy to build an API that feeds the editor with contents from different origins like e-commerce stores, blogs, or digital asset management systems.
Simplified Row Schema
General row schema
The following is an example of four different row objects:
First: A row with a single column and 2 text modules (a title and a paragraph) inside.
Second: A row with 2 equal columns and 2 text modules (a title and a paragraph) inside each one. These columns will not stack when the message is open on mobile devices.
Third: A row with a background image on it.
Four: A row with a display condition.
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
Set a row display condition. Check the display conditions documentation for further details.
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.
See the example above in General Row Schema.
modules
List of content modules inside a column
type
Every module is identified by a type parameter. Available types are:
title
paragraph
image
button
divider
HTML
Each module type has a set of available options. If none is included, the editor will use the default values.
Content types scheme and parameters
Text
title adds the text with the following attributes:
Font-size: 18px
Font-weight: Bold
Text-align: left
paragraph will use the following formatting:
Font-size: 14px
Text-align: left
text contains the string that will be displayed as content:
Must be a plain text string
Quotation marks must be escaped to be compliant with the JSON format
If not included, a default “Loren Ipsum” text string will be used
Additional text parameters
Image
src image public URL
href Image action URL (link)
alt alternate text
dynamicSrc when added, the content applies the dynamic image behavior and uses the value as dynamic URL
Button
text text string that will be displayed as the button content. Must be a plain text string.
If not included, a default text string will be used
href button action URL (link)
Additional button parameters
Divider
Currently there are no additional parameters.
HTML
Last updated