Перейти к содержанию

Руководство по настройке функционала «Вид формы»#

Общее описание#

Функционал «Вид формы» позволяет гибко и динамически изменять интерфейс, структуру и поведение форм системы без необходимости вмешательства в исходный код (XML или JavaScript). С помощью конфигурации в формате JSON администратор может перемещать элементы, скрывать ненужные поля, менять заголовки, настраивать форматы отображения и управлять колонками таблиц.

Создание и настройка документа «Вид формы»#

Для применения новых настроек интерфейса необходимо создать документ «Вид формы». В карточке документа заполняются следующие поля:

  1. Ключ формы (FormKey): Системное имя оригинальной формы, к которой будет применен данный вид.
  2. Название вида: Человекочитаемое название (например, «Компактный вид для менеджеров»).
  3. По-умолчанию (чекбокс): Указывает системе, что данный вид должен применяться автоматически при открытии формы (если права пользователя это позволяют).
  4. Роли: Список ролей пользователей, которым будет доступен данный вид интерфейса.
  5. JSON-конфигурация: Текстовое поле, в которое вписывается код в формате JSON. Именно этот код содержит инструкции по изменению внешнего вида формы.

0. Принцип работы и системные особенности#

Механизм конфигурации опирается на идентификаторы элементов (ID) и работает по принципу «Извлечь и Вставить» (Extract & Inject).

  • Идентификация (ID): Чтобы система могла обратиться к элементу, у него должен быть системный идентификатор (id, name, datafield или objectField).
  • Перемещение, а не копирование: Если вы указываете ID элемента в новом месте на форме, система физически перемещает его из старого места в новое. Невозможно отобразить один и тот же контрол дважды. Если вы случайно укажете один и тот же ID в двух разных группах, система перенесет его только один раз, а дубликат проигнорирует (выведя предупреждение в консоль).
  • Системные элементы (знак $): Элементы, не имеющие явного ID (например, переносы строк), обозначаются системными токенами с префиксом $ (например, $Break, $Layout).
  • Бесконечные переносы строк ($Break): Вы можете расставлять элементы $Break в JSON в любом необходимом количестве. Если на исходной форме физически закончились теги переноса строк, система автоматически сгенерирует новые валидные переносы на лету. Если же переносов строки не было на исходной форме, они не будут работать вовсе.
  • Только отображение: Можно изменять только свойства, которые не влияют на загрузку данных, т.е. dataField, displayMember, valueMember не изменяются.

1. Управление свойствами контролов#

Вы можете менять свойства любого элемента формы, просто указав его ID и нужные параметры в JSON. Система поддерживает строгий список (Whitelist) разрешенных свойств.

Основные доступные свойства:

  • Видимость и доступность: visible (показать/скрыть), enabled, readOnly (только чтение), locked, noBlock.
  • Текст и контент: caption (заголовок), text, title, placeholder (текст-подсказка в пустом поле), hint (всплывающая подсказка), showButtonText.
  • Размеры и позиционирование: width, height, autoHeight, editorWidth, captionWidth, flex, align, vPosition, hPosition, padding.
  • Стилизация текста: fontStyle, fontWeight, fontColor, fontSize (и аналогичные свойства для caption...), textAlign.
  • Форматирование данных: format, mask, maxLength, min, max, digits, decimalDigits, validCharacters.
  • Списки и выбор (Lookup/Комбобоксы): showValueMember, filterCondition, rowsCount, codeBoxWidth.

Пример изменения свойств контрола: 

1
2
3
4
5
6
7
{
  "TextBoxName": {
    "caption": "ФИО Клиента",
    "width": "100%",
    "readOnly": true
  }
}

2. Перемещение контролов на форме#

Для изменения порядка элементов внутри контейнера (группы, Layout и т.д.) используется массив itemsOrder. Вы можете переносить элементы не только внутри их родной группы, но и извлекать контролы из любых других групп на форме.

Пример: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "GroupContactInfo": {
    "itemsOrder": [
      "TextBoxPhone",
      "$Break",
      "TextBoxEmail",
      "TextBoxAddress" 
    ]
  }
}
Примечание: Если элемент TextBoxAddress изначально находился в другой вкладке или группе, он будет автоматически извлечен оттуда и помещен в GroupContactInfo.

3. Работа с колонками таблиц (Grid и AnalyticalGrid)#

Таблицы (гриды) являются изолированными контейнерами: при настройке грида система ищет и переставляет колонки только внутри этой конкретной таблицы.

  • Перемещение колонок: Для таблиц и групп колонок (ColumnGroup) используется свойство columnsOrder (а не itemsOrder).
  • Настройка колонок: Свойства колонок (видимость, ширина) указываются внутри объекта columns.
  • Настройка внутреннего контента: Если колонка содержит внутри себя сложный контрол (например, Lookup), его свойства можно изменить через вложенный объект content.

Пример настройки Grid: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "GridClients": {
    "columnsOrder": [
      "ColID",
      "ColFullName",
      "ColStatus"
    ],
    "columns": {
      "ColID": {
        "visible": false
      },
      "ColStatus": {
        "width": 150,
        "content": {
          "readOnly": true,
          "textAlign": "center"
        }
      }
    }
  }
}

4. Работа с таблицами ViewGrid#

Настройка ViewGrid осуществляется по тем же правилам, что и для обычных таблиц (через columnsOrder и columns). Дополнительно для ViewGrid доступны специфические настройки, такие как:

  • rowHeight (высота строки)
  • fixed (закрепление колонки)
  • aggregateType (тип агрегации)

5. Работа с досками Kanban [В разработке]#

Примечание: Данный функционал заложен в архитектуру, но в текущей версии системы временно отключен.

В будущем для элементов типа Kanban будет доступен блок конфигурации kanban. Он позволит:

  • Настраивать порядок полей в краткой карточке (fieldsOrder).
  • Настраивать порядок полей в развернутой карточке (fieldsExtendedOrder).
  • Менять свойства отдельных полей и их внутренних агрегатов через объект fields.

6. Практический совет: Получение базового JSON-слепка#

Писать JSON-конфигурацию с нуля (особенно для крупных форм с множеством полей) сложно и чревато опечатками. Для удобства работы в системе предусмотрен механизм получения «слепка» текущей формы.

Специальная команда (через консоль разработчика в браузере) позволяет выгрузить текущую структуру формы в формате готового JSON, например: 

1
JSON.parse(_lx.current.getStructureSnapshot())

Получив этот слепок, администратору достаточно:

  1. Скопировать его в текстовый редактор.
  2. Удалить те узлы, которые не требуют изменений.
  3. Поменять порядок ID в массивах itemsOrder / columnsOrder или дописать нужные свойства.
  4. Вставить получившийся компактный код в документ «Вид формы».