Setting up Content Items with Complex Structures Using Sub columns(JSON)

Overview

Sub columns(JSON) is one of the extension items that can be set in content structures, allowing you to register data in any JSON format. This enables you to set up deep nested structures or store JSON data obtained from external systems as is. Additionally, you can automatically generate UI from the defined JSON data, allowing for flexible use such as setting nested structures in combination with repeated items, or using it as subitems in card UI with block editors.

In this tutorial, we will introduce the setting of [Sub columns(JSON)] and the expected usage methods.

What You Will Learn

You will learn examples of using Sub columns(JSON) and how to set them up.

• Inputting JSON Data Directly
• Setting nested items along with item repetition
• Using as a subitem in the block editor

Inputting JSON Data Directly

When you want to use JSON data directly without the need for UI, there are no restrictions on the JSON structure.
You will set the JSON structure and its validation in the JSON schema.

Here, as an example, we will set up an item with a deep nested structure of "Organization → Department → Team → Service".

Content Structure Settings

Set the following content structure:

Field	Description
Field Name	Department
Field Setting	Sub columns(JSON)
Build UI from JSON schema	Disabled
JSON schema (Input Restriction Tab)	Input the following JSON

{
  "title": "Organization → Department → Team → Service",
  "type": "object",
  "properties": {
    "id": { "type": "string" },
    "name": { "type": "string" },
    "departments": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "code": { "type": "string" },
          "name": { "type": "string" },
          "teams": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "name": { "type": "string" },
                "services": {
                  "type": "array",
                  "items": {
                    "type": "object",
                    "properties": {
                      "name": { "type": "string" }
                    },
                    "additionalProperties": false,
                    "required": ["name"]
                  }
                }
              },
              "additionalProperties": false,
              "required": ["name", "services"]
            }
          }
        },
        "additionalProperties": false,
        "required": ["code", "name", "teams"]
      }
    }
  },
  "additionalProperties": false,
  "required": ["id", "name", "departments"]
}

The above JSON schema defines the following items:

• Organization: id, name, departments
• Department: code, name, teams
• Team: name, services
• Service: name

Content Editing Screen

Entering JSON data in the content editing screen.
You can input JSON data in the editor format input form. If there are items outside the defined scope or if defined items are missing, a validation error will be displayed. Therefore, the frontend can be implemented assuming that the specified JSON structure will be returned.

Below is an example of the expected JSON:

{
  "id": "org-001",
  "name": "Headquarters",
  "departments": [
    {
      "code": "",
      "name": "",
      "teams": [
        {
          "name": "",
          "services": [
            {
              "name": "Audit Team"
            }
          ]
        }
      ]
    },
    {
      "code": "HR",
      "name": "HR Department",
      "teams": [
        {
          "name": "Recruitment Team",
          "services": [
            {
              "name": "Engineer Recruitment Team"
            }
          ]
        },
        {
          "name": "Training Team",
          "services": [
            {
              "name": "Engineer Training Team"
            }
          ]
        }
      ]
    }
  ]
}

Please also confirm that a validation error occurs if there are missing or extra items in the JSON data.

Setting nested items along with item repetitionRelease version: β / RCversion

By enabling "Build UI from JSON schema" in the content structure, the UI is automatically generated from the defined JSON data, allowing for intuitive content registration.

Here, we introduce an example of setting a two-level nested structure by combining item repetition setting and sub-item (JSON) repetition setting.

Content Structure setting

First, create the following items in the content structure:

Item	Description
Item Name	FAQ Item
Item Setting	Sub-item (JSON)
Build UI from JSON schema	Enabled
JSON schema (Input Restriction Tab)	Enter the following JSON

{
  "type": "object",
  "properties": {
    "faqCategory": {
      "type": "string",
      "title": "FAQ Category"
    },
    "faqs": {
      "type": "array",
      "title": "FAQ",
      "items": {
        "type": "object",
        "properties": {
          "question": {
            "type": "string",
            "title": "Question"
          },
          "answer": {
            "type": "string",
            "format": "textarea",
            "title": "Answer"
          }
        }
      }
    }
  }
}

Next, set the repetition setting for the created sub-item (JSON).

Content editing screen

When accessing the content editing screen, you can see that you can add FAQ categories with item repetition and add FAQs with sub-item (JSON) repetition.

Using as a subitem in the block editorRelease version: β / RCversion

By using Sub columns(JSON), you can register multiple data within a single item.
You can create a card UI using this feature and use it as a subitem in the block editor.

Content Structure Settings

First, create the following items in the content structure.

Item	Content
Item Name	News Card
Item Setting	Sub columns(JSON)
Build UI from JSON schema	Enabled
JSON schema (Input Restriction Tab)	Input the following JSON

{
  "type": "object",
  "properties": {
    "news": {
      "type": "array",
      "title": "List of News",
      "description": "You can register up to 10 latest news",
      "minItems": 1,
      "maxItems": 10,
      "items": {
        "type": "object",
        "properties": {
          "title": {
            "type": "string",
            "title": "Title",
            "description": "Please enter the title of the news",
            "maxLength": 100
          },
          "link": {
            "type": "string",
            "title": "Link",
            "description": "Please enter the URL of the news article"
          },
          "publishDate": {
            "type": "string",
            "title": "Publication Date",
            "format": "date"
          },
          "category": {
            "type": "string",
            "title": "Category",
            "enum": ["press", "blog", "event", "update"],
            "enumNames": ["Press Release", "Blog", "Event", "Update"]
          }
        },
        "required": ["title", "link"]
      }
    }
  }
}

Next, set the created Sub columns(JSON) as a subitem in the block editor.

Content Editing Screen

When accessing the content editing screen, you can see the News Card item that can be selected in the block editor.

Notes

• The feature that builds the UI from JSON data definitions does not support nested structures deeper than Object → Array → Object (i.e., a repeating UI nested within another repeating UI).
• Sub columns(JSON) are currently not intended to be used as search fields. If you need to perform searches, please use other fields.

Related Documents

• Editing content structures
• Editing Content