Показать оглавление

Введение

В визуальном компоненте «Таблица сводная» для режима расшифровки «Модальное окно» можно настроить собственный HTML-шаблон отображения данных. Модальное окно открывается поверх текущей страницы и позволяет показать пользователю дополнительную информацию по выбранному показателю без перехода на другой отчет. Используя HTML и CSS, можно произвольно определить структуру и оформление отображаемых данных. Подробнее о режимах и возможностях визуального компонента см. раздел «Таблица сводная».

Эта инструкция поможет вам:

Подготовить данные для отображения в модальном окне.
Создать HTML-шаблон с плейсхолдерами для подстановки значений.
Настроить внешний вид окна с помощью CSS.

Важные ограничения

В HTML-шаблонах модальных окон не поддерживаются:

формулы и вычисления например, {{price + 1}};
вызовы функций например, {{value.toUpperCase()}};
JavaScript-код;
обращения через точку например, {{user.name}};
индексирование массивов например, {{item[0]}};

Если поле отсутствует в данных, вместо него будет выведено пустое значение.

Примечание.

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

Подготовка данных для модального окна

Содержимое модального окна формируется из значения контекстного поля. Контекстное поле представляет собой вычисляемое поле, результат которого передается в HTML-шаблон при открытии модального окна.

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

Контекстное поле содержит	Как формируется	Что доступно в HTML
Одно значение	`sum(amount), count(*), string_agg(...)`	`{{value}}`
Список значений	`json_agg(field), json_agg(DISTINCT field)`	`{{value}}`
Список записей с несколькими полями	`json_agg(json_build_object(...))`	Переменные с именами, указанными в `json_build_object()`, например `{{name}}, {{price}}, {{region}}`

Если контекстное поле содержит одно значение или список значений, в HTML используется переменная {{value}}.

Например, если контекстное поле формируется так: json_agg(DISTINCT region), то шаблон: <div>{{value}}</div> выведет список уникальных регионов.

Если контекстное поле содержит JSON-объект, то для каждого поля объекта автоматически становится доступна переменная с таким же именем.

Если нужно передать несколько полей по каждой строке, используется связка json_agg(json_build_object(...)).

json_agg(
    json_build_object(
        'name', product_type,
        'price', sales_amount,
        'region', region
    )
)

В этом выражении json_agg() собирает строки в список, а json_build_object() задает поля, которые будут доступны в HTML.

Левая часть внутри json_build_object() становится именем переменной в шаблоне:

'name'   → {{name}}
'price'  → {{price}}
'region' → {{region}}

HTML-шаблон может выглядеть так:

<div>
    <b>{{name}}</b>: {{price}} / {{region}}
</div>

Если в контекстное поле попало несколько строк, портал применит этот шаблон к каждой строке списка. В результате в модальном окне будет выведен список записей, например:

Духовки: 48000 / Северо-Западный
Посудомойки: 42000 / Северо-Западный
Холодильники: 55000 / Центральный

После подготовки вычисляемого поля разместите его на полке «Значения», затем в настройках сводной таблицы откройте раздел «Расшифровка значения», выберите режим «Модальное окно» и укажите созданное вычисляемое поле в качестве «Контекстного поля». Чтобы поле не отображалось в таблице включите переключатель «Скрыть результат».

Создание HTML-шаблона

Поле «HTML-шаблон» поддерживает:

обычный текст;
HTML-разметку;
плейсхолдеры вида {{...}}.

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

Пример:

<p>Значение: {{value}}</p>
Если передано значение:
Москва
то результат будет:
<p>Значение: Москва</p>

Базовые теги

<div>.....</div> — универсальный блочный контейнер. Каждый новый div начинается с новой строки.

Шаблон:

<div>{{name}}</div>
<div>{{value}}</div>

Результат:

Товар
1500

<b>.....</b> — выделяет текст жирным.

Шаблон:

<b>{{name}}</b>

Результат:

Товар

<p>.....</p> — абзац текста

<p>{{description}}</p>

<h1-6>......</h1-6> — заголовки, до 6 уровней.

<h3>{{name}}</h3>

<span>.....</span> — не переносит содержимое на новую строку.

Шаблон:

<span>{{name}}</span>
<span>{{value}}</span>

Результат:

Товар1500

Стилизация модальных окон через CSS

Внешний вид модального окна можно изменить с помощью CSS, доступны следующие классы:

Все модальные окна сводных таблиц

.hs-pivot-modal

Пример:

css
.hs-pivot-modal .MuiDialog-paper {
  background-color: #c7fcec;
}

Конкретная визуализация

.hs-visualisation-[id]

Например:

css
.hs-visualisation-0 .MuiDialog-paper {
  background-color: #eef6ff;
}

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

css
.hs-pivot-modal-content div:hover {
  background-color: #eef6ff;
}

Чек-лист

Для одного значения используйте {{value}}.
Для списка значений также используйте {{value}}.
Для нескольких полей создавайте объект через json_build_object().
Имя в апострофах внутри json_build_object() становится именем переменной в HTML-шаблоне.
Для оформления можно использовать HTML и CSS.
Для отображения строк друг под другом используйте div.
Для выделения текста используйте b.
Для заголовков используйте h1–h6.
Для стилизации модальных окон используйте классы hs-pivot-modal, hs-visualisation-[id] и hs-pivot-column-[columnIndex].

Примеры

Вывести список значений

Задача: В таблице отображается количество подкатегорий, при нажатии необходимо показать их перечень.

Создайте вычисляемое поле на полке «Значения» и выберите его в качестве «Контекстного поля» в разделе настроек «Расшифровка значения» → «Режим Модальное окно»:

string_agg(
  DISTINCT "НазваниеПодкатегории",
  ', '
)

В HTML-шаблоне используйте:

<div>{{value}}</div>

или

<div style="padding:10px;font-size:16px;">
  {{value}}
</div>

При открытии окна будет показан список подкатегорий.

Передать несколько полей

Если необходимо использовать несколько полей одновременно, рекомендуется сформировать JSON-объект.

Пример вычисляемого поля:

json_agg(
    json_build_object(
        'product', product_type,
        'amount', sales_amount
    )
)

Здесь:

product
amount

имена полей, которые будут доступны внутри HTML-шаблона.

Обратите внимание:

Левая часть ('product', 'amount') задаёт имя переменной в шаблоне.
Правая часть (product_type, sales_amount) указывает поля набора данных.

После этого в HTML можно обращаться к значениям так:

<div style="display:flex;gap:12px;align-items:center;">
    <div>{{product}}</div>
    <b>{{amount}}</b>
</div>

Карточка товара