Data Structure

Defining a data structure involves specifying the variables and their types, which can then be used within the blocks that utilize this data structure.

Available Types

The following types can be used for the variables defined in your data structure:

• string
• number
• icon
• button
• link
• image

Multilanguage Text

To define a multilingual text, declare a variable as string and append $L to the variable name. For longer text content, such as paragraphs, use $PL instead of $L.

Example:

{
  "title$L": "string",
  "subtitle$L": "string",
  "description$PL": "string",
  "image": "image",
  "button1": "button",
  "button2": "button"
}

Binary Variable

To define a binary variable (for a checkbox in the edit data block form), declare the variable as string and append $B to the variable name.

Example:

{
  "productTitle$L": "string",
  "productDescription$PL": "string",
  "image": "image",
  "price": "string",
  "available$B": "string"
}

In the example above, available$B will appear as a checkbox in the edit data block form. Within the block definition, you can use this variable, for example, to hide a product if available$B is False.

Color Variable

To allow color selection in the data block form, define a variable as string and append $C to the variable name.

Example:

{
  "productTitle$L": "string",
  "productDescription$PL": "string",
  "image": "image",
  "background$C": "string"
}

File Variable

To enable easy file selection from your cloud (if configured, see Cloud), define a variable as string and append $F to the variable name. This will display a file selector on the right side of the field in the edit data block form.

Example (useful for PDFs):

{
  "productTitle$L": "string",
  "productDescription$PL": "string",
  "image": "image",
  "pdf$F": "string"
}

Groups

Variables can be organized into groups by nesting them inside an object. This is useful for keeping your data structure organized, especially when you have a large number of variables.

Example:

{
  "title$L": "string",
  "description$PL": "string",
  "product": {
    "title$L": "string",
    "description$PL": "string",
    "price": "string",
    "image": "image"
  },
  "accessory": {
    "title$L": "string",
    "description$PL": "string",
    "price": "string",
    "image": "image"
  },
  "pdf$F": "string"
}

Note: Creating groups results in a more compact edit data form. Each group can be opened in a separate modal for editing.

Arrays

In a data structure, you can define arrays with up to two dimensions (i.e., a maximum of one nested array). Arrays are useful when your block contains repetitive content and you want the flexibility to add or remove elements without redefining the structure.

For example:

• In a gallery block, you can add any number of images.

• In a header or footer block, you can easily add or remove links.

Single-Dimensional Arrays

You can define an array containing a single variable like this:

{
  "images": ["image"]
}

Or an array containing multiple variables like this:

{
  "images": [
    {
      "title$L": "string",
      "image": "image",
      "link": "link"
    }
  ]
}

Two-Dimensional Arrays (Nested Arrays)

A two-dimensional array contains a nested array inside it. This is useful in cases such as a block with a submenu.

Example:

{
  "logoImage": "image",
  "heroTitle$L": "string",
  "heroDescription$L": "string",
  "heroButton": "button",
  "logoText": "string",
  "mainMenu": [
    {
      "link": "link",
      "subMenu": ["link"]
    }
  ]
}

Groups and Array

You cannot define and array inside a group.

Edit or Delete

A data structure can only be edited or deleted if it is not currently used by any block.