Главная > Документация пользователя > Полезные материалы > Виды визуализации

HTML¶

HTML-виджет – это тип виджета, отображающий данные в любом формате с помощью html-кода. Есть возможность вывода данных табличного представления (как плоских данных, так и сгруппированных).

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

Количество выводимых группировок в виджете не более 10000.

Возможности¶

Для данного типа виджета интерфейс предоставляет следующие стандартные возможности:

настройка фильтрации данных как исходных, так и агрегированных по одному или нескольким полям модели. Также доступна фильтрация по полям, не используемым в составе виджета. Фильтрация настраивается на вкладке Фильтрация настроек поля. Подробнее о фильтрации в разделе Параметры поля в структуре виджета;
настройка сортировки исходных, агрегированных данных и группировок по одному или нескольким полям, используемым в составе виджета. Сортировка настраивается на вкладке Сортировка настроек поля. Подробнее о сортировке в разделе Параметры поля в структуре виджета;
настройка внешнего вида виджета на вкладке Вид. Подробнее о доступных настройках в разделе Настройка параметров внешнего вида. При переходе на вкладку для виджета отображаются следующие настройки:
- Информация о виджете - подробное описание виджета, которое отображается в режиме просмотра и редактирования виджета или в информационной панели при наведении на кнопку Информация;
- Переменные - настройки расположения и выравнивания редактируемых переменных в виджете;
- Название - настройки заголовка в просмотре виджета по ссылке (внутренней или публичной);
редактирование HTML-виджета на вкладке Dev - редактируемая версия виджета. Просмотр последней опубликованной версии виджета на вкладке Public.

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

переход по ссылке при нажатии на HTML-виджет. Можно реализовать открытие ссылки двумя способами:
- в том же окне;
- в новом окне;

Пример исходного кода

Открытие ссылки в том же окне:

<button onclick="redirect('/app/widgets/view/11428')">Относительная ссылка</button>
<button onclick="redirect('https://aw-demo.ru/app/widgets/update/11428')">Абсолютная ссылка</button>

Открытие ссылки в новом окне:

<button onclick="redirect('/app/widgets/update/11428', true)">Относительная ссылка</button>
<button onclick="redirect('https://aw-demo.ru/app/widgets/update/11428', true)">Абсолютная ссылка</button>

Блокировка стандартного браузерного перехода по ссылке, чтобы избежать ошибок:

<a href="/app/widgets/update/11428" onclick="event.preventDefault();

Вызов функции:

redirect('/app/widgets/view/11428')">ссылка</a>

регулирование цветового отображения HTML-виджетов в зависимости от темы. Создание css-переменных и использование css-переменных Системы по отдельности для светлой и темной тем приложения. Список переменных доступен по адресу http://**/assets/data/colors.html. Названия и цвета кликабельны, при клике копируется название переменной или цвет в зависимости от места клика;

Пример исходного кода

Использование css-переменных:

body
{
backhground-color: var(--background-colors-content); //background-colors-content - цвет фона
color: var(--text-primary); //text-primary - цвет текста
}

Объявление css-переменной на вкладке CSS:

:root {
--name: white; //объявление переменной name с цветом white для светлой темы
}

:root.dark {
--name: black; //объявление переменной name с цветом black для темной темы
}

фильтрация виджетов информационной панели виджетом с помощью функции setFilter. Функция вызывается с 4 возможными параметрами
- Наименование поля в модели - обязателен для заполнения. В параметре указывается поле, которое будет прокидывать фильтр.
- Значение фильтра - обязателен для заполнения. В параметре указывается значение, которое будет передаваться в фильтре.
- Оператор - не обязателен для заполнения, по умолчанию указывается значение =.
Список доступных операторов по типам данных
- Строка: =, !=, LIKE, EMPTY_STRING, NOT_EMPTY_STRING
- Число (целое): =, !=, >=, <=, >, <, IS NULL, IS NOT NULL
- Число (дробное): =, !=, >=, <=, >, \<, IS NULL, IS NOT NULL
- Логическое: =, !=, IS NULL, IS NOT NULL
- Дата: =, EMPTY_STRING, NOT_EMPTY_STRING, !=, >=, <=, >, \<, TOMORROW, TODAY, YESTERDAY
- Тип поля не обязателен для заполнения. Параметром определяем, где первично искать поле для прокидывания фильтра.
Доступные значения для типа поля
- row - Группы. Поиск в группах, если нет, затем в столбцах, если нет, затем создаем поле;
- column - Столбцы (установлено по умолчанию). Поиск в столбцах, если нет, затем создаем поле.

Пример исходного кода

Список фильтра HTML:

<select onchange="changeSelect(this)">
<option value="">Не выбрано</option> 
<option value="ж">женский</option> 
<option value="м">мужской</option>
</select>

JS:

function changeSelect(target) {
setFilter('gender', target.value, '=', "column") // список параметров
}

открытие конкретной вкладки информационной панели по нажатию на виджет с помощью функции setTab. Функция setTab вызывается с параметром ID вкладки.

Пример исходного кода

На Вкладке 1 информационной панели располагаем HTML виджет с кнопками перехода на Вкладку 2 и Вкладку 3. HTML:

<div id='button1' class='button' >Переход на вкладку 2</div>
<div clear:both; > </div>
<div id='button2' class='button' >Переход на вкладку 3</div>

CSS:

.button
{   margin: 5px;
    background-color: #4CAF50; /* Green */
    border: solid rgb(255, 253, 253);
    color: rgb(255, 253, 253);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius:30px;
}

JS:

const button1 = document.getElementById('button1');
button1.addEventListener('click', () => setTab(3856));
const button2 = document.getElementById('button2');
button2.addEventListener('click', () => setTab(3857));

По умолчанию HTML-виджеты обеспечивают строгую изоляцию для встроенных iframe, предотвращая доступ к локальному хранилищу (localStorage). Это необходимо для защиты авторизационных токенов пользователей. В виджете возможно использование iframe с доступом к локальному хранилищу, например, для вставки видео по ссылке. При предоставлении доступа к локальному хранилищу система не гарантирует безопасность. Параметр IFRAME_ALLOW_SAME_ORIGIN в значении true регулирует данную возможность. Подробнее о параметрах в разделе Переменные используемые для настройки AW BI.