Возможность перехода по ссылке при нажатии на HTML-виджет
Реализована функция onclick, с помощью которой возможно добавить прямой переход по ссылке при нажатии на виджет. Можно реализовать открытие ссылки двумя способами:
-
в том же окне;
-
в новом окне – для реализации необходима передача второго параметра со значением true.
Функцию onclick можно настроить практически на любой элемент, примеры представлены ниже:
-
открытие ссылки в том же окне:
<button onclick="redirect('/app/widgets/view/12345')">Относительная ссылка</button><button onclick="redirect('https://aw-demo.ru/app/widgets/update/12345')">Абсолютная ссылка</button><img src="/assets/images/logo.svg" onclick="redirect('/app/widgets/update/12345')"/> -
для элементов ссылок (тег «a») необходимо сначала заблокировать стандартный web-браузерный переход по ссылке (чтобы избежать ошибок), а потом уже вызвать следующую функцию:
<a href="/app/widgets/update/12345" onclick="event.preventDefault(); redirect('/app/widgets/view/12345')">ссылка</a> -
открытие ссылки в новом окне:
<button onclick="redirect('/app/widgets/update/12345', true)">Относительная ссылка в новом окне</button><button onclick="redirect('https://aw-demo.ru/app/widgets/update/12345', true)">Абсолютная ссылка в новом окне</button>
Регулирование цветового отображения виджетов типа «HTML» в зависимости от темы
В виджетах типа «HTML» доступно создание CSS-переменных и использование CSS-переменных Системы, что позволяет определять цвета по отдельности для светлой и темной тем приложения.
Для перехода к списку CSS-переменных Системы в адресной строке web-браузера добавьте в конце ссылки на Систему значение «assets/data/colors.html». Например, для приложения http://aw-demo.ru/ список переменных откроется по ссылке http://aw-demo.ru/assets/data/colors.html.
Список переменных разделен на два блока, которые соответствуют светлой и темной темам Системы. Список переменных содержит значения переменных и их цвета (Рисунок «Список CSS-переменных Системы»).
Названия и цвета переменных кликабельны: при нажатии на значение переменной копируется название переменной или цвет в зависимости от места нажатия.
 Пример
|
|---|
|
Пример использования CSS-переменных Системы: body {
backhground-color: var(--background-colors-content); //цвет фона color: var(--text-primary); //цвет текста } где значения --background-colors-content и --text-primary – это названия переменных. |
Также есть возможность создания CSS-переменных (или переопределения текущих переменных) и использования их, указав нужные цвета для светлой и темной тем на вкладке «CSS» в виджете типа «HTML».
| Пример
|
|---|
|
Пример объявления CSS-переменной и ее использования: :root {
--name: white; //объявление переменной name с цветом white для светлой темы } :root.dark {
--name: black; //объявление переменной name с цветом black для темной темы } body {
backhground-color: var(--name); //цвет фона } |
| Пример
|
|---|
|
На рисунках ниже представлен один и тот же виджет в темной (Рисунок «Отображение виджета типа «HTML» с CSS-настройками в темной теме Системы») и светлой (Рисунок «Отображение виджета типа «HTML» с CSS-настройками в светлой теме Системы») темах. Для цвета текста объявлена переменная text-primary, указан цвет #ffffff (для темной темы) и цвет #6C6E71 (для светлой темы). Для фона и тени используются CSS-переменные Системы:
|
Фильтрация виджетов информационной панели виджетом типа «HTML»
Реализована функция setFilter для передачи фильтра из виджета типа «HTML», находящегося в информационной панели, в другие виджеты, находящиеся на той же информационной панели.
Для функции необходимо задать следующие параметры setFilter('Наименование поля в модели', 'Значение фильтра', 'Оператор', 'Тип поля'):
-
параметр «Наименование поля в модели» обязателен для заполнения. Укажите в параметре наименование поля в модели, которое будет передавать фильтр;
-
параметр «Значение фильтра» обязателен для заполнения. Укажите в параметре значение, которое будет передаваться в фильтре;
-
параметр «Оператор» необязателен для заполнения, по умолчанию указывается значение «=». Список доступных операторов по типам данных:
-
строка : '=', '!=', '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», которые обозначают группы/столбцы соответственно, по умолчанию установлено значение «column». Параметром определяется, где первично искать поле для передачи фильтра.
Если указано значение «row», то выполняются следующие действия:
-
поиск поля в группах и передача фильтра;
-
если поле в группах не найдено, то поиск поля в столбцах и передача фильтра;
-
если поле в столбцах не найдено, то создание нового столбца с полем и передача фильтра.
Если указано значение «column», то выполняются следующие действия:
-
поиск поля в столбцах и передача фильтра;
-
если поле в столбцах не найдено, создание нового столбца с полем и передача фильтра.
-
| Пример
|
|---|
|
Пример списка фильтра, формируемого вручную:
Результат настройки фильтра представлен на рисунке ниже (Рисунок «Пример настройки виджета типа «HTML» для фильтрации значений с использованием функции setFilter»). |
Рисунок 12. Пример настройки виджета типа «HTML» для фильтрации значений с использованием функции setFilter
Открытие конкретной вкладки информационной панели при нажатии на виджет типа «HTML»
Реализована функция setTab для открытия конкретной вкладки информационной панели при нажатии на виджет типа «HTML». Для функции setTab необходимо указать параметр – ID вкладки: setTab (ID вкладки).
 Примечание
|
|---|
| ID вкладки можно узнать в окне разработчика (Рисунок «Отображение ID вкладки в окне разработчика»). |
| Пример
|
|---|
|
На вкладке «Вкладка 1» информационной панели располагается виджет типа «HTML» с кнопками перехода на вкладки «Вкладка 2» и «Вкладка 3». Скрипты для виджета типа «HTML»:
Результат настройки виджета типа «HTML» с использованием функции setTab представлен на рисунке ниже (Рисунок «Результат настройки виджета типа «HTML» с использованием функции setTab»). Использование виджета типа «HTML» с функцией setTab в информационной панели: при нажатии на кнопку «Переход на вкладку 2» откроется вкладка «Вкладка2», при нажатии на кнопку «Переход на вкладку 3» откроется вкладка «Вкладка3» (Рисунок «Использование виджета типа «HTML» с функцией setTab в информационной панели»). |
