Пакет новых UI/UX элементов: файлы, формы разделов, отборы и другое. Октябрь 2026.

Новые возможности UI/UX элементов в релизе 5.75 касаются в равной степени веб- и андроид-клиентов. В Samples на https://github.com/dvdocumentation/nodalogic доступны примеры NodaLayout_Media_Demo_final.nod и Demo_SectionForm.nod

Отборы в разделах

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

Переопределение формы раздела

Раздел по умолчанию – список узлов, но можно поставить на него произвольную форму. Для этого надо указать некий узел, из которого система возьмет разметку.

Все события проходят через Общие события, т.е. обработчики надо приписывать в общих событиях а не в узле.

Визуальные элементы файлов и автоматизация работы с файлами

С файлами, как таковыми, и так можно было работать в платформе, но дополнения этого релиза организуют пользовательские элементы для них и автоматизируют синхронизацию/кеширование.

Предположим, вам надо организовать в форме документа место (или несколько мест) где будут прикреплены файлы, например инструкции или договоры. При клике они должны открываться, т.е. под ними должен быть файл. Это поле должно быть как-то визуализировано. Возможно, пользователю в это поле самому нужно будет добавлять файлы.

Для этого размещаем элемент «Files» - секция файлов. Она может быть редактируемая ("editable":true), т.е. пользователь сам добавляет/меняет файлы. И, что важно, она автоматизирует работу по синхронизации/кешированию файлов.

Синхронизация может быть через s3-хранилище или через Flask-сервер NodaLogic.

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

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

{"type":"Files", "id":"docs", "caption":"Документация",
 "value":"@docs", "editable":true, "sync":"server"}

"docs": [
  {"name":"Инструкция.pdf", "description":"Монтажная инструкция",
   "mime":"application/pdf", "size":2457600,
   "storage":"server", "path":"manuals/instruction.pdf", "sync_status":"synced"},
  {"name":"Схема.docx", "storage":"s3", "url":"https://example.invalid/scheme.docx",
   "sync_status":"pending"}
]

Разработчику незачем заботиться ни о синхронизации ни о визуализации процесса.

Аналогично, если пользователь добавляет файл на устройстве то в зависимости от того как настроена синхронизация, он автоматически через очередь загрузится на сервер и в документ поместится ссылка. При выборе файла на телефоне оригинал попадает во внутренний каталог приложения, после чего его можно синхронизировать по sync:"server" либо "s3"; "local" оставляет его локальным. В вебе добавление выполняется через существующую систему Flask-файлы/S3.

Также на Android можно не размещать визуальную секцию файлов, а обойтись кнопкой На Android доступен дополнительный PlugIn:

self.PlugIn([{"type":"FileButton","id":"attach", "caption":"Добавить файл",
              "target":"docs", "sync":"server"}])

Редактируемая картинка и синхронизация/кеширование файлов изображений

В платформе есть PictureGallery либо можно своими средствами прицеплять картинки, но добавление свойства editable:true в элемент Picture решает другую задачу: вы можете разметить в разметке экрана место, где должна быть картинка. Примеры: «фото левой двери», «фото правой двери», «дефект общий план» и т.д. Это дает пользователю возможность либо загрузить либо используя камеру сфотографировать объект, а после он будет помещен в этот элемент.

Удаление/редактирование/предпросмотр – все есть

Автоматизация синхронизации аналогична работе с файлами, но синхронизация пока происходит только через s3 (у файлов — 2 варианта)

(раздел) Пару слов о синхронизации изображений в целом и s3

Несмотря на то, что изображения тоже файлы, но у них используются другие механизмы – галерея, камера и виджет галереи. И там синхронизация пока доступна только через s3. Вам не обязательно использовать s3 по умолчанию, на своем инстансе NodaLogic сервера вы можете прописать свое s3-хранилище. Настройки и доступы прописываются на сервере, они не хранятся на андроид-клиентах в целях безопасности. Работа происходит через временные токены. В новых релизах добавится Flask-файлы для изображений, пока их нет. У этих двух подходов к хранению есть свои нюансы и преимущества, но в целом – s3 лучше, Flask проще тем, что не надо настраивать.

Вот такая табличка для понимания:

Синхронизация изображений

На данный момент:

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

В платформе уже используется SVG-строки для пиктограмм (кнопок, меню), а в новом релизе это еще немного расширено. Теперь svg можно вывести в Picture вместо картинки, а также svg появилось в элементе Card. Карточка с пиктограммой или dashboard-карточка распространённый паттерн в дизайне. Пиктограмму можно разместить в разных местах – слева (по умолчанию), сверху и т.д.

Card показывает SVG (svg, svg_size, svg_color) слева (image_position:"left", по умолчанию), справа, сверху или снизу. В value размещаются обычные элементы, например VerticalLayout с названием и адресом.

{"type":"Card", "svg":"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='3' fill='#4f7890'/></svg>",
 "svg_size":42, "image_position":"left", "value":[[
   {"type":"VerticalLayout", "value":[
     {"type":"Text", "value":"Объект", "bold":true},
     {"type":"Text", "value":"Насосная станция № 3", "size":14},
     {"type":"Text", "value":"Москва, Промышленная, 14", "size":12}
   ]}
 ]]}

Вертикальный и горизонтальный разделитель

Это просто визуальные элементы Divider и VerticalDivider для визуального упорядочивания элементов

Минимизация диаграмм

Для диаграмм доступно свойство sparkle:true для вывода графика в минималистичном виде (см. следующий раздел)

Ультраминимализм

Специально сделал примеры для веб- и android-платформы для демонстрации нового языка дизайна, который поддерживается в NodaLogic. Тут упор делается на пиктограммы и типографику. Основная идея: DataFirst (данные важнее всего, daten über alles) – никаких отвлекающих элементов, весь фокус на данных. Никаких рамок и карточек с закруглениями, тенями и границами – это 2010-х годов, из material только лаконичные иконки, разделители и текст. Это не строгий гайдлайн, просто авторская рекомендация.