Образы
8 800 555-89-02
Войти
Документация
CTRL+K
Standalone2410
SaaS

Образы

В этой статье

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

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

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

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

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

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

Холст образов

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

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

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

Заметка

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

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

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

Кнопка +

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

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

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

Название

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

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

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

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

Ключ

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

Заметка

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

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

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

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

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

Цвет фона

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

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

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

Цвет фона

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

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

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

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

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

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

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

Контекстное меню образа

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

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

Удалить домашний образ невозможно.

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

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

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

Создать строку

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

Строка и колонка

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

Кнопки + вверху и внизу

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

Кнопки + по бокам

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

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

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

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

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

Контекстное меню вкладки Образы

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

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

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

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

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

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

Вставка компонента в колонку

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

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

Компоненты колонки

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

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

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

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

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

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

Высота и ширина образа

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

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

Виджет

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

Виджет

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

Настройки высоты и ширины виджета

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

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

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

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

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

Ключ виджета

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

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

Контекстное меню виджета

Плейсхолдер

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

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

Плейсхолдер

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

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

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

Контекстное меню плейсхолдера

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

Контекстное меню плейсхолдера по клике ПКМ

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

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

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

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

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

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

Заметка

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

Строка

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

Виджет Строка

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

Вложенные строки и колонки

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

Разделитель

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

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

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

Разделитель

Была ли статья полезна?

Да
Нет
Предыдущая
Режим редактирования
8 (800) 555-89-028 (495) 150-31-45team@infomaximum.com
Для бизнеса
© 20102024. ООО «Инфомаксимум»
Мы используем файлы cookies, чтобы сайт был лучше для вас.