Genesis - Custom Fields Builder

What this solution does

Website development on Bitrix often involves complex content organization tasks. Standard infoblock properties are well-suited for simple data types such as strings, numbers, or lists. However, when a content manager needs to populate a slider, an FAQ block, or a staff list with photos and job titles within a single page, standard methods prove insufficient. The traditional approach of creating separate infoblocks or generating dozens of properties complicates administration and increases database load.

The Genesis module is a tool designed to create complex data structures within a single property. This addresses flexibility issues when building landing pages or product cards. For instance, when rendering a benefits gallery where each element includes an icon, title, description, and link, using multiple separate properties (one for each data type) is inconvenient as it requires the content manager to strictly adhere to a specific filling order.

Creating a separate information block for tasks like 'Advantages' is reliable but often excessive. The Genesis module offers an alternative: storing complex data structures in JSON format while providing a convenient visual interface for editing.

The Genesis module adapts a concept familiar to developers for use with Bitrix information blocks. Data is stored in a 'String' type property as JSON, offering two distinct interfaces. The schema builder is designed for developers, while the visual editor is intended for content managers.

The property settings include a visual constructor that allows creating data structures without manually writing JSON schemas. Direct code editing is available via Raw JSON mode when required.

The JavaScript interface allows dynamic field addition by specifying:

Key: technical field name for use in templates.

Name: label displayed to the manager.

Type: selection from supported data types.

Header: checkbox determining field visibility in the collapsed element list.

Supported data types:

Text (input).

Multiline text (textarea).

Image (with preview).

File.

Element binding: selection of elements from other information blocks via the standard Bitrix search window.

Nested list (list): capability to create recursive structures (list within a list).

Content editing interface

The Genesis module provides a custom field builder that renders an advanced interface within the element card. This is a full-featured content management panel rather than a simple JSON text field. Key capabilities include Drag & Drop sorting to rearrange elements, AJAX file uploads for images and documents without page reload, and inline thumbnail visualization. The module supports nesting; creating a 'Nested List' field opens a pop-up window containing an additional list. It also features smart binding selection, allowing users to choose infoblock elements by ID directly within the editing window without navigating away.

Technical data storage features

All data is serialized into JSON using the JSON_UNESCAPED_UNICODE flag. This ensures compact storage in the database. When retrieving elements via GetList, no additional JOIN queries to property tables are required. The result is returned as a single string, which can be easily converted into an array using json_decode in result_modifier.php or within a component template.

Field sets are configured via the administrative panel's graphical interface without modifying source code. A raw JSON editing mode (editRawJson) is available for developers to copy and transfer entire data structures between elements or projects.

The module supports nested structures (Nested Lists) through recursion and the handling of the migx_list type within the SchemaBuilder class. This enables the creation of multi-level menus and complex catalogs within a single element. For example: Level 1 is a "Service Category" (title and icon), and Level 2 contains a list of specific services within that category (name and price).

Implementing such schemes in standard Bitrix InfoBlocks would require creating separate sections, which can complicate visual rendering on a single page. Here, the entire structure is defined via JSON schema configuration.

General iT can install and configure this module and check how it works on your website.