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

HTML¶

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

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

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

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

фильтрация данных исходных строк и агрегированных данных по одному или нескольким полям модели (включая не используемые в составе виджета);
сортировка исходных, агрегированных данных или группировок по одному или нескольким используемым полям модели;

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

Возможность перехода по ссылке при нажатии на 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 отображаются следующие настройки:

Информация о виджете;
Название;
Окно редактирования HTML-виджета.

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

Информация о виджете¶

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

Перечень всех настроек блока Информация о виджете:

Отображение - при нажатии включает/выключает отображение в виджете. По умолчанию настройка выключена;
текст - поле ввода текстовой информации. По умолчанию значение отсутствует;

Название¶

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

Перечень всех настроек блока Название:

Отображение - при нажатии включает/выключает отображение в виджете. По умолчанию настройка включена;
Шрифт - при нажатии раскрывается список доступных шрифтов. По умолчанию значение шрифт из блока настроек Вид;
Начертание - кнопки:
- жирный - значение по умолчанию;
- курсив;
- подчеркнутый;
Размер - при нажатии раскрывается список с размерами шрифта. По умолчанию значение 18;

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

Цвет текста - при нажатии открывается окно с палитрой цветов. По умолчанию значение #202224;
Цвет фона - при нажатии открывается окно с палитрой цветов. По умолчанию значение #FFFFFF;

Окно редактирования HTML-виджета¶

Окно редактирования HTML-виджета разделено на две вкладки: - Dev - редактируемая версия виджета; - Public - последняя опубликованная версия виджета.

Вкладка Dev¶

Вкладка Dev позволяет ввести код виджета и состоит из трех вкладок. Переключение между вкладками происходит с помощью панели кнопок :

html;
css;
js.

В нижней части окна расположены кнопки управления:

Сравнить код - по нажатию происходит сравнение кода с предыдущей опубликованной версией и подсветка отличий;
Загрузить файл - по нажатию откроется окно прикрепленных к виджету файлов. Доступны следующие типы файлов: jpeg, gif, png, tff, woff, eot, woff2, jpg, svg, json, js, css.

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

Выполнить - при нажатии в окне визуализации обновляется виджет;

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

Опубликовать - при нажатии публикуются изменения на вкладк Public. Изменения будут доступны в режиме просмотра виджета.

Вкладка Public¶

Вкладка Public позволяет ввести код виджета и состоит из трех вкладок. Переключение между вкладками происходит с помощью панели кнопок :

html;
css;
js.

В нижней части окна расположены кнопки управления:

Копировать в свою ветку - по нажатию содержимое вкладок кода копируется на вкладку Dev.