Образы

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

Холст образа не ограничен по длине. По нему можно перемещаться с помощью вертикальной прокрутки.

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

Рабочая область

Рабочая область образа состоит из следующих элементов:

• Верхняя панель:
  • Кнопки Визуальный конструктор и YAML-редактор образа
  • Кнопка Модель данных
  • Кнопка Выйти для выхода из режима редактирования
  • Кнопка Опубликовать для публикации дашборда
• Панель дашборда:
  • Вкладка Образы с панелью иерархии образов
  • Вкладка Показатели дашборда (работа с элементами во вкладке описана на странице Общие показатели дашборда)
• Панель настроек образа/виджета:
  • Вкладка Общие настройки образа
  • Вкладка Общие настройки виджетов

Вкладка Образы

Во вкладке отображается иерархический список всех созданных в дашборде образов и их компонентов.

При создании дашборда автоматически добавляется образ, который назначается домашним. Домашний образ отображается в режиме просмотра.

Образы в списке сортируются по названию в следующем порядке: 0-9, A-Z, a-z, А-Я, а-я.

Добавление образа

Чтобы добавить новый образ, кликните + в правом верхнем углу панели образов.

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

Панель настроек образа

Панель состоит из двух вкладок: с общими настройками для образа и для виджетов.

Вкладка общих настроек образа

Во вкладке можно изменять настройки образа.

Название

В названии образа можно использовать системные переменные, переменные дашборда и входящие значения в формате {inputs.Название переменной}. Например, в название необходимо передать имя сотрудника (Иванов Иван). Это можно сделать так: Сотрудник: {inputs.Имя сотрудника}. В этом случае при открытии образа в боковом или модальном окне над ним появится название Сотрудник: Иванов Иван, а окно может содержать детальную информацию об этом сотруднике.

Указать название образа можно как в поле, так и в расширенном редакторе.

При изменении названия образа оно также изменяется на панели образов.

Ключ

В этом поле можно посмотреть и изменить ключ образа. Ключ образа используется при создании связей между образами в YAML-редакторе, например для навигации.

Максимальная ширина

С помощью параметра Максимальная ширина задается максимальная ширина образа, на которую он может растягиваться (в пикселях). По умолчанию образ растягивается на всю ширину окна.

Отступы в просмотре

Если переключатель Отступы в просмотре включен, то после публикации образа между компонентами на холсте видны небольшие отступы. Это может сделать просмотр удобнее.

Цвет фона

Можно настроить цвет фона:

• Режим Авто — используется цвет по умолчанию
• Режим Базовый — можно выбрать любой цвет и задать его через палитру или НЕХ-код

Выбранный цвет фона отображается в режиме просмотра и редактирования.

Автообновление данных

При включении этой настройки данные в режиме просмотра обновляются по заданному интервалу времени (по умолчанию — 5 минут).

Входящие значения

Переменные типа Входящее значение можно использовать в формулах виджетов образа. Работа с переменной подробно описана на странице Переменные.

Фильтр

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

Вкладка общих настроек виджетов

Во вкладке можно изменять настройки, которые применяются ко всем виджетам в образе:

• Расширенные настройки отображения
• Размер заголовка
• Цвет заголовка
• Толщина заголовка
• Размер текста
• Режим фильтрации
• Переключатель Игнорировать фильтры
• Состояние

Подробное описание этих настроек находится на странице Виджеты.

Действия с образами

Действия с образами можно выполнять в контекстном меню. Чтобы открыть его, кликните по иконке с тремя точками справа от названия образа.

Доступны следующие действия:

• Сделать домашним (позволяет сделать домашним любой образ. При этом текущий домашний образ потеряет это свойство)
• Дублировать (создается полная копия образа и его содержимого. Новому образу присваивается новый ключ. В дублированном образе используется название родительского, к которому добавляется порядковый номер в скобках)
• Удалить (удаляет образ без возможности восстановления)

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

Чтобы свернуть список, нажмите на иконку еще раз.

Конструктор образов

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

Изначально образ пуст. Чтобы начать его наполнять, нажмите + Создать строку.

После создания строки в ней автоматически появляется колонка.

При наведении курсора на колонку в строке появляются кнопки +. Нижняя и верхняя кнопки добавляют новые строки.

Боковые кнопки добавляют новые колонки.

При выделении колонки в конструкторе она автоматически выделяется и раскрывается в иерархии панели образов.

Также образ можно редактировать в YAML-редакторе.

Действия со строками

Во вкладке Образы с помощью контекстного меню со строками можно выполнять следующие действия:

• Дублировать (полное копирование и вставка строки под строку, которая дублируется)
• Очистить (удаляет содержимое строки и оставляет одну колонку с настройками по умолчанию)
• Удалить (также удалятся все колонки в строке)

Действия с колонками

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

Доступны следующие действия:

• Дублировать (полное копирование и вставка колонки)
• Очистить (если в колонке есть компоненты)
• Удалить (если удалить единственную колонку в строке, колонка удаляется вместе со строкой)

При клике правой кнопкой мыши по колонке на холсте можно вставить ранее скопированный компонент в колонку. Для этого кликните Вставить.

Настройки колонок

Можно настроить высоту и ширину колонок.

• Высота:
  • px (высота колонки указывается в пикселях — фиксированно)
  • % (высота колонки рассчитывается относительно экрана, на котором отображается отчет — динамично)

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

• Ширина (задается в долях холста или в пикселях)

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

Если ширина окна браузера уменьшается, колонки сужаются. Достигнув минимального значения ширины, они визуально переносятся на строку ниже, при этом структура строк образа не меняется. Это помогает автоматически адаптировать отчет под экраны мобильных устройств.

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

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

Компоненты образа

Существует 5 компонентов, которые можно использовать в образе:

• Виджет
• Плейсхолдер
• Вкладки
• Строка
• Разделитель

Виджет

Чтобы увидеть список виджетов, которые можно добавить в образ, нажмите на кнопку Виджет.

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

Для виджетов доступны следующие действия:

• Копировать (для этого кликните по нему ПКМ на холсте и выберите Копировать)
• Вставить (можно вставить только в пустую колонку)
• Дублировать (полное копирование и вставка виджета в строку, в которой находится дублируемый виджет. Для этого виджета создается новый уникальный ключ)
• Очистить (удаляет виджет из колонки)
• Создать вложенность (виджет переместится в колонку, созданную внутри исходной)
• Удалить (удаляет виджет и колонку)

Плейсхолдер

С помощью плейсхолдера можно отображать другой образ внутри колонки.

Чтобы добавить плейсхолдер в колонку, кликните Плейсхолдер.

Доступны следующие варианты добавления:

• Без образа (добавляет пустой плейсхолдер, который можно заполнить образом в режиме просмотра, с помощью Действия)
• Созданный образ (можно добавить любой образ, кроме редактируемого. Редактируемый образ не отображается в списке)
• Сгенерированный скриптом (необходимо выбрать скрипт с блоком Вернуть данные и описанием на YAML. Другие скрипты возвращают пустой образ)

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

Для плейсхолдеров доступны следующие действия:

• Копировать (для этого кликните по нему ПКМ на холсте и выберите Копировать)
• Дублировать (полное копирование и вставка плейсхолдера в новую колонку в той же строке)
• Очистить (очищает содержимое колонки)
• Создать вложенность (плейсхолдер переместится в колонку, созданную внутри исходной)
• Удалить (также удаляется колонка)

Настройки плейсхолдера:

• Название (должно быть уникальным)
• Образ (Нет/Созданный/Сгенерированный скриптом)
• Ширина

Подробная информация о том, как открыть образ в плейсхолдере, приведена на странице действия по клику Открыть образ.

Особенности работы с плейсхолдером

При работе с плейсхолдером необходимо учитывать следующие особенности:

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

Вкладки

С помощью вкладок можно размещать несколько виджетов или плейсхолдеров в одном компоненте и переключаться между ними. Чтобы добавить компонент с вкладками, нажмите Вкладки.

На панели справа в настройках компонента можно настроить его ширину. Высота компонента всегда настраивается автоматически, в том числе при переключении между вкладками.

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

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

Создание вкладки

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

Внутри компонента можно создать неограниченное количество вкладок. При большом количестве вкладок в полосе сверху появляется кнопка с троеточием. При наведении на нее курсора можно выбрать необходимую вкладку.

Действия с вкладками

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

Для компонента доступны следующие действия:

• Дублировать (дублируемая колонка с вкладками появится справа от оригинала внутри той же строки. Дублируются все настроенные вкладки и их содержимое)
• Очистить (компонент удаляется из колонки, при этом настройки ширины и длины для нее сохраняются)
• Удалить (компонент полностью удаляется)

Для вкладок в компоненте доступны следующие действия:

• Дублировать (дублируется всё содержимое. Дублируемая вкладка появится справа от оригинальной. К названию дублированной вкладки добавляется порядковый номер в скобках)
• Очистить (содержимое вкладки очищается, на ее месте остается одна строка с пустой колонкой)
• Удалить (вкладка полностью удаляется. При удалении единственной вкладки очищается колонка)

Условие отображения вкладки

Через параметр Отображать можно задать формулу или выбрать переменную, по которой фильтруются данные во вкладке. Доступны следующие варианты отображения:

• Всегда
• По переменной
• По формуле

Если вкладка не подходит под условие отображения, то в режиме редактирования рядом с ее названием появляется соответствующая иконка.

Вкладки в режиме просмотра

В режиме просмотра вкладки отображаются следующим образом:

• Если используется только одна вкладка, в которую добавлен компонент, переключатель вкладок не отображается
• Если добавлена только одна вкладка без компонента, вкладки не отображаются
• Если ни одна из вкладок не подходит под условие отображения, в режиме просмотра они не отображаются

Строка

Чтобы добавить вложенную строку внутри колонки, кликните Строка.

Внутри колонки можно добавить несколько вложенных строк, а во вложенной строке — добавлять новые колонки.

В колонках вложенных строк можно создавать только виджеты и плейсхолдеры.

Разделитель

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

Чтобы добавить новый разделитель в образ, кликните Разделитель.

Для разделителя можно задать высоту:

• px (высота разделителя указывается в пикселях — фиксированно)
• % (высота разделителя рассчитывается относительно экрана, на котором отображается отчет — динамично)