Настройка форм

Обновлено: 29.09.2025

НазначениеНазначение

Настройка форм позволяет гибко управлять отображением элементов в карточках основных сущностей системы. Конфигурация задаётся в формате JSON и предоставляет следующие возможности:

• настройка отображения главных свойств;
• управление вкладками;
• управление секциями: добавление, изменение структуры, заголовков и набора полей;
• отображение и точное позиционирование полей в сетке карточки;
• добавление текстовых подсказок для полей;
• стилизация элементов с помощью CSS-классов.

ИспользованиеИспользование

Чтобы изменить настройки формы:

1. Перейдите в компоненту Менеджер сущностей.
2. Найдите нужную сущность.
3. Откройте вкладку Настройки формы:

В редакторе JSON доступны вспомогательные функции для работы с конфигурацией:

1. Вставить системные настройки — заполняет поле редактора конфигурацией по умолчанию. Функция полезна для начала новой настройки или сброса изменений.
2. Форматировать — автоматически приводит структуру конфигурации к читаемому виду, расставляя отступы и переносы строк.

Настройка заголовка карточкиНастройка заголовка карточки

Главные свойства сущности отображаются в заголовке её карточки, за что отвечает раздел headerParams. Возможности редактора позволяют:

• скрывать стандартные свойства;
• выводить дополнительные, которые имеют приоритет в ваших процессах;
• изменять тип свойства.

Структура, представленная ниже, определяет, какие свойства отображаются в заголовке карточки сущности:

{
  "headerParams": {
    "mainProperties": [
      {
        "property": "organization",
        "type": "link"
      },
      {
        "property": "manager",
        "type": "popup"
      },
      {
        "property": "project",
        "type": "popup"
      },
      {
        "property": "created",
        "type": "text"
      }
    ]
  }
}

mainProperties — это массив главных свойств. Каждое свойство задаётся двумя параметрами:

• property — системное название поля (например, organization, manager).
• type — тип отображения:
  • popup — используется для навигационных свойств. При клике откроется всплывающее окно с данными связанной сущности, из которого можно перейти в её карточку.
  • link — используется для навигационных свойств. Отображается как обычная ссылка.
  • text — можно использовать для любых свойств. Отображается как обычный текст.

Исходя из примера конфигурации выше, в заголовке карточки будут показаны четыре свойства:

1. Организация (тип link) — открывает карточку сущности.
2. Менеджер (тип popup) — открывает окно с данными менеджера.
3. Проект (тип popup) — открывает окно с данными проекта.
4. Создано (тип text) — отображается как обычный текст.

Управление вкладкамиУправление вкладками

tabParams — это объект конфигурации, который управляет вкладками внутри карточки сущности. tabs — это массив, который определяет каждую вкладку.

Каждый элемент в массиве tabs описывает логический блок информации.

1. state — уникальный системный идентификатор вкладки. Он становится частью URL при переходе на эту вкладку (например, #/deal/123/**profile**).
2. header — заголовок (название) вкладки, который видит пользователь. Может быть:
   • Ключом перевода (например, "shared.groups.main").
   • Прямым текстом (например, "Главное").
3. config — (необязательный) объект с конфигурацией содержимого вкладки. Если его нет, вкладка содержит контент по умолчанию (например, список задач, взаимодействий).
4. groups — основной массив групп полей, которые всегда отображаются на вкладке.
5. order — число, определяющее позицию вкладки. Чем меньше число, тем левее вкладка. Вкладки сортируются по возрастанию этого значения. Например, вкладка с order: 100 будет левее вкладки с order: 101.

{
  "tabParams": {
    "tabs": [
      {
        "state": "profile",
        "header": "Главное",
        "config": {
          "groups": [
            {
              "type": "fields",
              "header": "Свойства",
              "fields": [
                {
                  "name": "Наименование",
                  "hint": ""
                }
              ]
            }
          ]
        },
        "order": 100
      }
    ]
  }
}

Как управлять вкладками:Как управлять вкладками:

1. Добавить вкладку: создайте новый объект в массиве tabs, указав уникальный state, header и order.
2. Изменить порядок: отредактируйте значения order у нужных вкладок.
3. Перенести свойства: переместите объекты groups или отдельные fields из конфигурации (config) одной вкладки в конфигурацию другой.

Управление секциямиУправление секциями

В карточке сущности поля сгруппированы по секциям для логической организации информации. Это упрощает навигацию для пользователей. Настройка форм позволяет адаптировать карточки, если стандартная компоновка не соответствует вашим рабочим процессам.

Возможности настройки секций:

• Переименование секции: измените значение свойства header.
• Скрытие заголовка: удалите свойство header (секция станет статичной и потеряет возможность сворачиваться).
• Перемещение секций: измените порядок объектов в JSON-массиве.

Структура группы полейСтруктура группы полей

Каждый элемент в массиве groups описывает логический блок информации.

1. type — тип группы. В текущей реализации используется для отображения простых свойств "fields".
2. header — заголовок группы полей (например, "Свойства").
3. fields — массив, непосредственно содержащий сами поля.

{
  "type": "fields",
  "header": "Свойства",
  "fields": [
    {
      "name": "Наименование",
      "hint": ""
    }
  ]
}

Структура поляСтруктура поля

Каждый элемент в массиве fields описывает одно конкретное поле.

1. name — системное название поля (например, "name", "code").
2. hint — текст всплывающей подсказки. Пустая строка означает, что подсказки нет.
3. className — (необязательный) CSS-класс для стилизации поля. Например, "w-150" может задавать ширину в 150px.
4. position — (необязательный) объект для сложного позиционирования поля внутри сетки группы. Например, resolutionComment занимает место с колонки 1, начиная со второй строки, и растягивается на 2 колонки ("size": 2).

Пример конфигурации с двумя секциями, вторая секция не имеет свойства header:

[
  {
    "type": "fields",
    "header": "Основное",
    "fields": [
      {
        "name": "name"
      },
      {
        "name": "manager"
      },
      {
        "name": "description"
      }
    ]
  },
  {
    "type": "fields",
    "fields": [
      {
        "name": "createdBy"
      },
      {
        "name": "modifiedBy"
      }
    ]
  }
]

Настройка позиции полейНастройка позиции полей

По умолчанию поля распределяются по двум колонкам: нечётные слева, чётные справа. В примере ниже поля createdBy и modifiedBy будут в левой колонке, а created и modified — в правой:

[
  {
    "type": "fields",
    "header": "SYSTEM",
    "fields": [
      {
        "name": "createdBy"
      },
      {
        "name": "created"
      },
      {
        "name": "modifiedBy"
      },
      {
        "name": "modified"
      }
    ]
  }
]

Позицию можно указать точнее, задав для каждого поля свойство position, которое содержит несколько параметров:

• row — номер строки (от 1 до N);
• column — позиция в колонке:
  • 1 — левая колонка;
  • 1.5 — правая половина левой колонки;
  • 2 — правая колонка;
  • 2.5 — правая половина правой колонки;
• size — занимаемое место:
  • 0.5 — половина колонки;
  • 1 — целая колонка;
  • 1.5 — полторы колонки;
  • 2 — вся строка.

На иллюстрации показано, как свойства row, column и size определяют расположение поля:

В примере ниже поле corporateTaxRate займёт половину левой колонки в 3-й строке, а поле billingMode — всё оставшееся пространство в этой строке:

[
  {
    "type": "fields",
    "header": "shared.groups.finance",
    "fields": [
      // ...
      {
        "name": "billingMode",
        "position": {
          "row": 3,
          "column": 1.5,
          "size": 1.5
        }
      },
      // ...
      {
        "name": "corporateTaxRate",
        "position": {
          "row": 3,
          "column": 1,
          "size": 0.5
        }
      }
      // ...
    ]
  }
]

Добавление подсказокДобавление подсказок

Для любого поля можно добавить текстовую подсказку, добавив свойство hint с необходимым текстом:

[
  {
    "type": "fields",
    "header": "Основное",
    "fields": [
      {
        "name": "manager",
        "hint": "Внимание: менеджер Кампании должен иметь доступ к клиентам!"
      }
    ]
  }
]

После этого подсказка отобразится в интерфейсе:

Стилизация с помощью CSS-классовСтилизация с помощью CSS-классов

Вы можете стилизовать или выделить поле в карточке, добавив любой доступный класс из библиотеки Bootstrap. Для этого используется свойство className:

[
  //...
  {
    "type": "fields",
    "header": "shared2.groups.finance",
    "fields": [
      {
        "name": "billingType",
        "hint": "",
        "className": "text-success"
      },
      {
        "name": "currency",
        "hint": "",
        "className": "text-danger"
      },
      //...
    ]
  },
  //...
]

Так это выглядит в интерфейсе: