Образы

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

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

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

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

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

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

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

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

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

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

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

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

Панель содержит основные настройки образа.

Название

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

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

Ключ

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

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

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

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

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

Цвет фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В колонку можно добавлять:

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

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

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

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

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

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

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

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

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

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

Виджет

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

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

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

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

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

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

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

Виджет можно:

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

Плейсхолдер

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

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

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

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

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

Также открыть контекстное меню плейсхолдера можно кликнув по нему правой кнопкой мыши.

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

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

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

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

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

Строка

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

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

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

Разделитель

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

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

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