Образы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактирование образа

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

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

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

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

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

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

В режиме редактирования пустые колонки обозначены пунктирной сеткой — это ориентир для размещения виджетов.

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

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

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

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

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

Для строки можно задать следующие настройки:

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

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

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

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

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

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

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

Высота колонок

Высота колонок задается в:

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

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

Ширина колонок

Ширина колонок задается в долях образа (fr) или в пикселях (px).

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

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

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

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

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

Отступы

Отступы задают свободное пространство внутри компонента. Их можно настроить отдельно для образаб строки и колонки. Сами виджеты собственных настраиваемых отступов не имеют. Управление отступами осуществляется на уровне образа, строки или колонки.

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

Как задать отступы

Отступы можно настроить с двух сторон:

• Горизонтальные (левый и правый) — сдвигают внутрь все вложенные компоненты вместе с их содержимым
• Вертикальные (верхний и нижний) — добавляют пространство сверху и снизу

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

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

Расстояние между элементами

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

Для колонки с автоматической шириной расстояние уменьшает доступное для распределения пространство; для колонки с фиксированной шириной — только сдвигает колонки относительно друг друга, не меняя их ширину.

Расстояние между элементами:

• На уровне образа — задает интервал между строками: строки отделяются друг от друга равномерными зазорами
• На уровне строки — задает расстояние между колонками внутри строки
• На уровне колонки — задает интервал между вложенными строками

Фон контейнера

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

Фон настраивается для образа, строки и колонки и может быть задан в одном из трех режимов:

• Авто — фон окрашивается в цвет фона виджетов (из настроек образа в разделе «Темы»)
• Прозрачный — фон берется из фона образа
• Базовый — вы выбираете любой цвет через палитру

Отступы на уровне образа

Задают отступы образа относительно его границ — слева, справа, сверху и снизу. Все содержимое (строки и вложенные колонки) сдвигается внутрь, доступное пространство уменьшается.

Отступы на уровне строки

Задают пространство внутри строки:

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

Отступы на уровне колонки

Поведение зависит от содержимого колонки:

• Колонка с вложенными строками — отступы применяются к самой колонке
• Пустая колонка или колонка с одним вложенным элементом (виджетом, плейсхолдером, вкладкой или разделителем) — при добавлении такого элемента колонка становится «ячейкой» для него, и отступы с расстоянием задаются на уровне строки, а не колонки

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

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

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

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

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

Виджет

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

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

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

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

Плейсхолдер

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладки

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

Настройки компонента

На панели справа в настройках компонента можно настроить:

• Ширину
• Отступы — настраиваются отступы названий вкладок
• Интервал вкладок — регулирует расстояние названий вкладок друг от друга
• Тему из образа
• Выравнивание
• Размер текста — регулирует размер названий вкладок. Размер текста элементов внутри вкладок не изменяется.
• Толщину текста
• Фон как у образа — регулирует фон вкладок в режиме просмотра. Если параметр включен, то цвет фона области с вкладками наследуется от образа. Если параметр отключен, то фон белый
• Отображение одной (единственной) вкладки

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

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

В настройках вкладки можно задать:

• Название — допустимо использовать одинаковое название для разных вкладок
• Отступы — регулирует отступы виджетов от края контейнера внутри вкладки
• Расстояние между элементами — регулирует расстояние между расположенными друг над другом элементами контейнера
• Фон контейнера — автоматический, прозрачный или базовый
• Условие отображения — при настройке условия отображения необходимо учитывать то, как она отображается после настройки в режиме просмотра.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Строка

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

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

Разделитель

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

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

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

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

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

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

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

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

Название

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

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

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

Ключ

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

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

Ключ также может использоваться в ссылках Markdown.

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

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

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

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

Кнопки действий

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

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

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

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

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

Настройки кнопок действий

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

У кнопки действия можно изменить:

• Название
• Тип: Основная, Второстепенная или Ссылка
• Поле Выполнить скрипт. Кликните по полю, чтобы увидеть список скриптов в дашборде и выбрать необходимый. Чтобы настроить параметры скрипта, связанного с кнопкой, выберите способ ввода: Из переменной или Задать агрегацией
• Автообновление — срабатывает после выполнения скрипта. Можно обновить данные во всех образах или отключить параметр

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

Вкладка настройки темы образа

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

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

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

Оформление

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

• Применить ко всем — применяет настроенную тему оформления ко всем виджетам, входящим в образ
• Сбросить — сбрасывает все параметры отображения, настраиваемые на этой вкладке, до значений по умолчанию
• Копировать тему — копирует настроенную тему оформления виджетов в буфер обмена
• Вставить тему — применяет к образу тему оформления виджетов из буфера обмена; действие доступно только при наличии скопированной ранее темы

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

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

Высота разделителей

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

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

Фон образа

Чтобы задать цвет фона образа, выберите нужный цвет в палитре или укажите HEX-код вручную в поле.

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

Цвет фона для образа можно выбрать из палитры. Для этого нажмите на иконку с цветом рядом с полем. Откроется палитра с поддержкой цветовых моделей HEX и RGB и двумя коллекциями цветов: Фон и Палитра.

Скругления

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

Заголовки и текст

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

• Цвет заголовка
• Размер заголовка
• Толщину заголовка
• Цвет текста
• Размер текста

Более подробное описание этих настроек приведено на странице Настройки отображения виджетов.

Палитра и градиенты для виджетов

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

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

Добавление цвета выполняется нажатием на кнопку + Цвет. Максимальное количество цветов в палитре — 30.

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

Также можно настроить набор градиентов. Для этого нажмите на иконку рядом с настройкой градиентов. В открывшемся окне нажмите + Градиент и задайте градиент, указав два цвета. Максимальное количество градиентов — 10.

Порядок цветов в палитре и порядок градиентов можно изменять с помощью перетаскивания элементов (drag & drop).

Кнопки

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

Доступны следующие типы кнопок:

• Основная — можно настроить цвет кнопки и цвет текста
• Второстепенная — можно настроить цвет обводки и цвет текста
• Ссылка — можно настроить цвет текста

Таблицы

Во вкладке можно задать оформление таблиц в рамках образа.

Для шапки таблицы и ячеек с итоговыми значениями можно задать:

• Цвет фона
• Толщина шрифта
• Цвет текста

Оформление вкладок

В параметрах можно также настроить оформление вкладок в образе, а именно указать:

• Размер текста вкладок
• Выравнивание списка вкладок — по левому краю, по центру или по правому краю
• Фон как у образа

Индикатор выделенной вкладки подстраивается под длину названия вкладки.

Вкладка «Настройки фильтрации» образа

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

Предустановленный фильтр

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

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

Режим фильтрации

Параметр Режим фильтрации задает режим фильтрации по умолчанию для всех виджетов в образе. Подробнее о режимах фильтрации — на странице Настройка фильтрации виджетов.

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