Интерфейс и компоновка

Общий вид

Все таблицы имеют типовой вид и смешанный интерфейс создатель-пользователь.

Общий вид таблицы

Плейсменты

Таблицы имеют 4 базовых плейсмента для размещения полей картинка 👆.

Хедер — расположен после заголовка таблицы. Поля автоматически переносятся на следующую строку при уменьшении размера окна.
Префильтр — определяет условия фильтрации значений Строчной части передаваемые в браузер пользователя.
Строчная часть — может иметь множество колонок в ширину, для горизонтальной прокрутки используйте клик-энд-драг левой кнопкой мыши.
Футеры
- Футеры колонок — расположены под соответствующими колонками строчной части.
- Общий футер — расположен после строчной части, функционал аналогичен Хедеру.

Тот или иной плейсмент может отсутствовать в зависимости от типа таблицы:

Области таблиц

Есть исключение: в расчетных таблицах возможно использование префильтра. При его использовании таблица по прежнему рассчитывается целиком, но строки строчной части передаются на клиент в соответствии с условиями фильтрации.

Плейсменты не только определяют положение полей в интерфейсе, но и порядок вычисления их значений.

Порядок аналогичен расположению в таблице: Хедер —> Префильтр —> Строчная часть —> Футеры колонок —> Футер.

Доступ к настройкам таблицы

Управление таблицей

При клике левой кнопкой мыши на name таблицы сохраняет его в буфере.

Дерево навигации

Дерево

Дерево навигации отображается в виде верхнего меню категорий и левой колонки. Колонку с деревом можно скрыть.

Таблицы могут быть прикреплены в дерево, или для расчетных таблиц в циклах в циклы.

Таблицы показываются в соответствии со своим номером сортировки. Возможно скрыть таблицу из дерева для всех или только для отдельных ролей.

В Дерево помимо таблиц можно добавить:

Ссылки на url
Ярлыки на таблицы

Настройки вида

Пользователи и Создатель могут настраивать и сохранять удобные им виды отображения полей.

Глаз

Индивидуальные настройки полей сохраняются для связки пользователь-браузер.
Создатель имеет возможность переводить свои персональные настройки в общедоступные (хранящиеся на сервере).
Одинарный щелчок правой кнопкой мыши на глазе выводит вид по умолчанию.
Двойной щелчок правой кнопкой мыши скрывает поля, видимые только Создателю.
Настройки полей редактируются вручную в параметре таблицы наборы полей.

Отображение скрытых полей

Если поле скрыто (постоянно или временно), то для Создателя оно все равно будет отображаться в специальной области:

Скрытые поля

Редактирование настроек поля

Настройки поля

Дублировать — открывает панель редактирования в режиме добавления поля, подставляя в нее настройки текущего поля.
Вставить после — открывает панель редактирования поля в режиме добавления нового поля заполняя текущую таблицу, плейсмент, сортировку (sort + 10). При успешном добавлении сдвигает у всех последующих полей в плейсменте сортировку на +10.
Удалить — запускает таймер удаления поля.

Быстрый способ открыть панель редактирования поля — клик правой кнопкой мыши на иконке выпадающего меню.

Назначение секций

Видео на YouTube: Секции

Секции позволяют структурировать интерфейс в хедере и футере.

Поля внутри секций могут быть объединены в группы blocknum имеющие собственные номера.

При недостаточной ширине экрана поля будут переносится в пределах группы.

Поля могут быть перенесены принудительно параметром nextline: true.

Параметр fill: true будет дозаполнять ширины полей до ширины самой широкой строки при наличии автоматических переносов.

Видео на YouTube: Адаптивность

Адаптивность настраивается как при помощи параметров секции, так и функцией форматирования setFloatFormat. В видео показано через функцию форматирования.

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

Настройки секции хранятся в параметре заголовок в виде строки и применяются только при активном параметре с новой строки в первом поле секции.

Если поле будет отключено в параметре показывать в WEB, то параметры секции отключаются.

При скрытии поля через глаз параметры секции не отключаются.

Если у поля активно с новой строки но ваключен заголовок, то поле будет отображаться с новой строки и будет наследовать параметры предыдущей секции. В отличии от nextline: true функции setFloatFormat поле будет отделено от группы даже если имеет такой же blocknum:.

Синтаксис настроек секций

** — инициализируют начало строки с параметрами секции.
: — разделяет параметр и его значение.
, — разделяет номера групп и неймы полей при их перечислении.

; — разделяет параметры.

Заголовок секции**param_1:blocknum,field_name:value;param_2:blocknum,field_name:value;

Заголовок секции**plate:1:yellowgreen; -- назначает плашке группы 1 цвет yellowgreen

Создание, редактирование и удаление секций

Создание секции Редактирование секции

Параметры секций

CSS calc

Первая строка всегда зарезервирована под название секции. Если вы хотите, чтобы название было пустым — оставьте первую строку пустой.

label: false — скрывает заголовок секции.
gap: 10 — добавляет отступ между полями в секции.
gap: 1, 2, fieldname1 : 10 — изменяет отступы в конкретных группах и полях.
title: false or true — режим, в котором скрываются названия полей.
title: 1, 3, fieldname1 : false or true — только для определенных номеров групп и полей.
border: false or true or color — назначает обводку и стандартный background поля. Обрабатывает /.
border: 1, 2, fieldname1 : false or true or color — для конкретных групп и полей. Обрабатывает /.
plate: false or true or yellowgreen — замена цвета плашки или ее отмена если передать false. Обрабатывает /.
plate: 1, 3 : false or true or yellowgreen — для конкретных групп. Обрабатывает /.
outline: true or false or yellowgreen — добавляет обводку для всех групп. Если указан цвет, то с цветом. Обрабатывает /.
outline: 1, 2 : true or false or yellowgreen — для конкретных групп. Обрабатывает /.
plateh: 400 or 80vh or false — устанавливает высоту всех групп. Обрабатывает /. Может быть использован CSS calc.
plateh: 2 : 400 or 80vh or false — устанавливает высоту конкретной группы. Обрабатывает /. Может быть использован CSS calc.
platemh: 400 or 80vh or false — устанавливает максимальную высоту всех групп. Обрабатывает /. Может быть использован CSS calc.
platemh: 2, 3 : 400 or 80vh or false — устанавливает максимальную высоту конкретных групп. Обрабатывает /. Может быть использован CSS calc.

В border, plate, outline, plateh и platemh можно указать значение через / — значение перед дробью будет работать, когда в секции нет переноса групп из-за недостаточной ширины экрана. После дроби — когда есть перенос.

Например: plate: 1 : false/true — до переноса плашка будет скрыта, после переноса хотя бы одной группы — показана.

Аналог setFloatFormat:

blocknum: — число, определяет номер группы, в которую будет определено поле. Поля в группы склеиваются только если они расположены рядом. Если вы назначите одинаковый номер двум полям стоящим отдельно — это будут две разные группы с одинаковыми номерами.
nextline: — если true, то поле будет сразу будет перенесено на следующую строку в группе.
maxwidth: — число, если задано определяет до какой ширины в px поле будет расширяться, если позволяет ширина экрана. Если в одной строке несколько полей имеют этот параметр, то они будут расширяться пропорционально своей базовой ширине, заданной в настройках поля.
fill: — true, если задано, то поле будет расширяться до максимально возможной ширины блока, определенного самой широкой строкой.
height: — число, высота поля в px. Если задано, то высота поля будет отлична от стандартной. Также меняется отображение содержимого поля.
maxheight: — число, максимальная высота поля в px. Если задано, то поле будет определять свою высоту автоматически в зависимости от содержимого. Но не более заданной максимальной высоты. Может быть указано в vh и css calc.
glue: — true, склеивает поле с находящимся слева от него. Склеенные поля будут переносится вместе. При минимальной ширине экрана переносится не будут.
breakwidth: — число, определяет ширину, при которой произойдет перенос поля. Если не указано, то перенос произойдет только когда поле достигнет ширины по умолчанию.

Дополнительное управление блоками:

blocktitle: — задает имя для группы, отображаемое в верхнем правом углу плашки.
titleleft: — 100 или 20%. Помещает заголовок слева от поля, а не сверху.
titleright: — 100 или 20%. Помещает заголовок справа от поля, а не сверху.
platemaxdiff: 200 — устанавливает для всех блоков правило переноса блока на следующую строку при превышении разницы высоты текущего и предыдущего блоков больше, чем на указаное значение в пикселях.
platemaxdiff: 2, 3 : 200 — устанавливает для указанных блоков правило переноса блока на следующую строку при превышении разницы высоты текущего и указанного блока больше, чем на указаное значение в пикселях.

PRO Вид панелями

Только в PRO-версии

Если заполнен параметр вид панелями, то таблица будет отображаться в виде панелей.

Какие именно поля попадают в панель — настраивается.

Панели

Панели можно перетаскивать если включен параметр сортировка по полю порядок.

Разбивка на страницы в виде панелями и канбаном не работает!

Вид не работает на мобильных устройствах! Там строчная часть отображается в виде таблицы.

PRO Канбан

Только в PRO-версии

Если в канбан-поле выбран селект, то его значения будут разбиты на колонки.

Порядок колонок будет соответствовать параметру order функции selectRowListForTree в поле селекта.

Канбан

Перетаскивание из колонки в колонку будет доступно, если у пользователя есть доступ на изменение поля селект выбранного как канбан-поле.

Также селект может рассчитываться на основании полей хедера или префильтра. Таким образом вы можете получить разный набор колонок для разных пользователей или в зависимости от других условий.

Разных набор значений для разных строк работать не будет.

Панели могут быть раскрашены — параметр h_kanban_colors:

{
"1": "beige",
"2": "oldlace",
"": "mistyrose"
}

Также к каждой колонке может быть расчитан html. Параметры: h_kanban_html_type, h_kanban_html_height и h_kanban_html_code, который получает переменную $#kanban содержащую основание канбан-поля для колонки:

=: str`"<div style='font-size: 16px'>Сумма:<b>" ++ $summ + "</b> шт.</div>"`

summ: listSum(list: $list)

    list: selectList(table: 'panels_view_test'; field: 'spent_num'; where: 'status' = $#kanban)

kanbans

Вид не работает на мобильных устройствах! Там строчная часть отображается в виде таблицы.

PRO Поворот таблицы

Только в PRO-версии

Если у таблицы задан параметр ширина колонок при повороте, то строки будут отображены в виде колонок с заданной шириной.

Заголовки колонок будут отображены если у таблицы выбрано основное поле.

Поворот таблицы

⟵ сюда туда ⟶