Row Schema

Introduction

Schemas are structured definitions that describe the format, rules, and relationships of data within a system. They ensure consistency and validate inputs. In Beefree SDK, the Simple Row Schema defines how rows are structured within the email, page, and popup builders, controlling layout, styling, and responsive behavior. This documentation breaks down the schema's properties, requirements, and usage examples to help you implement and extend row configurations effectively.

Reference the Simple Schema GitHub repository for more information.

Schema Overview

This section summarizes the purpose and key characteristics of the Simple Row Schema.

• Schema Name: Simple Row

• Purpose: Defines the structure of rows in Beefree's layout system, including columns, styling, and mobile behavior.

• Mandatory Fields: name, columns

• Related Schemas:

  • simple_column.schema.json (nested columns)

  • definitions.schema.json (shared validation rules)

Structure Definition

Below is the JSON Schema definition and a detailed breakdown of each property.

JSON Schema

{
    "$schema": "http://json-schema.org/draft-07/schema",
    "$id": "simple_row.schema.json",
    "title": "Simple Row",
    "type": "object",
    "required": [
      "name",
      "columns"
    ],
    "additionalProperties": false,
    "properties": {
      "name": {
        "type": "string"
      },
      "locked": {
        "type": "boolean"
      },
      "colStackOnMobile": {
        "type": "boolean"
      },
      "rowReverseColStackOnMobile": {
        "type": "boolean"
      },
      "contentAreaBackgroundColor": {
        "type": "string"
      },
      "background-color": {
        "type": "string"
      },
      "background-image": {
        "type": "string"
      },
      "background-position": {
        "type": "string"
      },
      "background-repeat": {
        "type": "string"
      },
      "customFields": {
        "type": "object"
      },
      "border-radius": {
        "$ref": "definitions.schema.json#/definitions/borderRadius"
      },
      "border-color": {
        "type": "string"
      },
      "border-width": {
        "$ref": "definitions.schema.json#/definitions/borderWidth"
      },
      "columnsBorderRadius": {
        "$ref": "definitions.schema.json#/definitions/borderRadius"
      },
      "columnsSpacing": {
        "type": "integer",
        "minimum": 0,
        "maximum": 99
      },
      "vertical-align": {
        "type": "string",
        "enum": [
          "top",
          "middle",
          "bottom"
        ]
      },
      "display-condition": {
        "type": "object",
        "required": [
          "type"
        ],
        "properties": {
          "type": {
            "type": "string"
          },
          "label": {
            "type": "string"
          },
          "description": {
            "type": "string"
          },
          "before": {
            "type": "string"
          },
          "after": {
            "type": "string"
          }
        }
      },
      "metadata": {
        "type": "object"
      },
      "padding-top": {
        "$ref": "definitions.schema.json#/definitions/padding"
      },
      "padding-right": {
        "$ref": "definitions.schema.json#/definitions/padding"
      },
      "padding-bottom": {
        "$ref": "definitions.schema.json#/definitions/padding"
      },
      "padding-left": {
        "$ref": "definitions.schema.json#/definitions/padding"
      },
      "columns": {
        "type": "array",
        "minItems": 1,
        "maxItems": 12,
        "items": {
          "$ref": "simple_column.schema.json"
        }
      }
    }
  }

Field Descriptions

The following table lists the field descriptions along with their corresponding data type, whether or not they are mandatory, and their description.

Property	Type	Mandatory	Description
name	string	Yes	The name of the row
columns	array	Yes	The columns in the row
locked	boolean	No	Whether the row is locked
colStackOnMobile	boolean	No	Whether columns stack on mobile
rowReverseColStackOnMobile	boolean	No	Whether columns stack in reverse on mobile
contentAreaBackgroundColor	string	No	The background color of the content area
background-color	string	No	The background color of the row
background-image	string	No	The background image of the row
background-position	string	No	The background position of the row
background-repeat	string	No	The background repeat property of the row
border-radius	integer	No	The border radius of the row (0-60)
border-color	string	No	The border color of the row
border-width	integer	No	The border width of the row (0-30)
columnsBorderRadius	integer	No	The border radius of the columns (0-60)
columnsSpacing	integer	No	The spacing between columns (0-99)
vertical-align	enum	No	The vertical alignment of the row
display-condition	object	No	The display condition of the row
padding-top	integer	No	The top padding of the row (0-60)
padding-right	integer	No	The right padding of the row (0-60)
padding-bottom	integer	No	The bottom padding of the row (0-60)
padding-left	integer	No	The left padding of the row (0-60)
customFields	object	No	Custom fields for the row
metadata	object	No	Metadata for the row

Usage Examples

Reference an example of the schema in the following code snippet.

Example Row

{
  "name": "Sample Row",
  "locked": false,
  "colStackOnMobile": true,
  "rowReverseColStackOnMobile": false,
  "contentAreaBackgroundColor": "#FFFFFF",
  "background-color": "#F0F0F0",
  "background-image": "<https://example.com/background.png>",
  "background-position": "center",
  "background-repeat": "no-repeat",
  "customFields": {
    "custom1": "value1",
    "custom2": "value2"
  },
  "border-radius": 10,
  "border-color": "#000000",
  "border-width": 2,
  "columnsBorderRadius": 5,
  "columnsSpacing": 10,
  "vertical-align": "middle",
  "display-condition": {
    "type": "visibility",
    "label": "Show on mobile",
    "description": "Display this row on mobile devices",
    "before": "2023-01-01",
    "after": "2022-01-01"
  },
  "metadata": {
    "author": "John Doe",
    "version": "1.0"
  },
  "padding-top": 10,
  "padding-right": 10,
  "padding-bottom": 10,
  "padding-left": 10,
  "columns": [
    ...
  ]
}

Additional Considerations

Consider the following when working when Simple Row Schema in Beefree SDK:

• Extensibility: Use customFields for non-standard properties.