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 BEE Plugin 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.

  1. Simplified Row Schema
  2. General row schema
  3. General row parameters
  4. Content types scheme and parameters

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.



[{
    "name": "First item", // Identifies the row
    "columns": [{ // The columns inside the row
        "weight": 12, // This weight identifies a single column row
        "modules": [{ // This describes the content modules inside the column
            "type": "title", // Every module is identified by a type parameter
            "text": "How am I supposed to fight?"
        },
        {
            "type": "paragraph",
            "text": "Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going."
        }]
    }]
},
{
    "name": "Second item",
    "colStackOnMobile": false,
    "columns": [{
        "weight": 6,
        "modules": [{
            "type": "title",
            "text": "You're going to do his laundry?"
        },
        {
            "type": "paragraph",
            "text": "Oh Leela! You're the only person I could turn to; you're the only person who ever loved me."
        }]
    },
    {
        "weight": 6,
        "modules": [{
            "type": "title",
            "text": "Well how'd you become king then?"
        },
        {
            "type": "paragraph",
            "text": "The Lady of the Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. THAT is why I am your king."
        },
        {
            "type": "paragraph",
            "text": "Listen, strange women lyin\' in ponds distributin\' swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony."
        }]
    }]
},
{
    "background-image": "https://yourdomain/yourpath/background.png",
    "background-repeat": "repeat",
    "background-position": "top center",
    "background-color": "#fff",
    "name": "Text on background pattern",
    "columns": [{
        "weight": 12,
        "modules": [{
            "type": "paragraph",
            "text": "Behind the word mountains, far from the countries Vokalia and Consonantia."
          }]
      }]
 },
{
    "name": "Developer joke",
    "display-condition": {
        "type": "Jokes",
        "label": "developers",
        "description": "Only developers will see this content",
        "before": "{% if recipient.role == \'Developer\' %}",
        "after": "{% endif %}"
    },
    "columns": [{
        "weight": 12,
        "modules": [{
            "type": "paragraph",
            "text": "Chuck Norris writes code that optimizes itself"
          }]
      }]
 }]

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




{
  "type": "title",
  "text": "I'm a headline."
}, {
  "type": "paragraph",
  "text": "I can be a long paragraph, a short sentence, or a simple word."
}

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



"align": "center" "left" "right"
"size": integer // value in px
"bold": boolean
"italic": boolean
"underline": boolean
"color": "#CFCFCF"
"linkColor": "#CFCFCF"

Image




{
    "type": "image",
    "src": "https://static.pexels.com/photos/248280/pexels-photo-248280.jpeg",
    "href": "https://www.beefree.io", //optional 
    "alt": "This is a sample image", //optional 
    "dynamicSrc": "http://srcto/dynamic/src" //optional 
}

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




{
  "type": "button",
  "text": "Read more",
  "href": "https://lipsum.com"
},{
  "module": "button",
  "text": "Keep in touch",
  "href": "mailto:growth@beefree.io?subject=Custom content test&body=Sent from a custom 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



"color": "#CFCFCF"
"background-color": "#C2C2C2"

Divider




{"type":"divider"}

Currently there are no additional parameters.

HTML




{"type":"html","html":"
This is custom HTML."}