Создание глобального фильтра описано в соответствующем разделе: Добавление фильтра.
Для применения глобального фильтра следует воспользоваться соответствующим элементом, расположенным на слое проекта, если глобальный фильтр вынесен на слой, или нажать на кнопку
, расположенную в правом верхнем углу окна просмотра проекта.
В зависимости от типа глобального фильтра далее необходимо выбрать значение из выпадающего списка или ввести необходимое значение в поле ввода.
Тип и вид фильтра зависят от настроенного шаблона.
Для фильтра типа «Поиск» при работе с числовыми значениями необходимо указывать дробные числа через «.» (например, «12.3») для корректного поиска по значениям. |
В случае длинного значения в глобальном фильтре при наведении на такое значение отображается подсказка, которая содержит значение целиком:
|
Для просмотра имеющихся в проекте глобальных фильтров следует нажать на кнопку
, расположенную в правом верхнем углу окна просмотра проекта.
После нажатия на кнопку справа отобразится следующее окно:
|
Примененные фильтры отмечены чекбоксами.
Для сброса всех значений в примененных фильтрах следует нажать кнопку «Сбросить все». Фильтры с установленным значением по умолчанию сбросятся до этого значения, фильтры без установленного значения по умолчанию очистятся, и произойдет переход в окно просмотра проекта.
Для закрытия окна следует нажать кнопку , расположенную в верхнем правом углу окна, или нажать левую кнопку мыши вне области окна.
Если фильтр применен к объекту на одном слое, то при наличии аналогичного фильтра на другом слое, фильтрация может быть повторена при переходе на другой слой.
Для этого должны выполняться следующие условия:
|
На Слое 1 в фильтре выбрано значение «Владимир», виджет отсортирован по данному значению:
|
Перейдем на Слой 2. В фильтре установлено то же значение, что и на Слое 1, и другой виджет отсортирован по нему:
|
В случае если второй слой встроен в первый при помощи HTML-компонента iframe, для переноса значения (или массива значений) фильтра со слоя на слой используется JavaScript-фунцкция postMessage().
Предположим, что у нас есть Слой 1 и Слой 2, при этом Слой 1 встроен в Слой 2 при помощи iframe:
<!-- Встроенный iframe c указанием URL слоя 2, ширины, высоты и уникального идентификатора "frame". --> <iframe src="https://dev.platform.polymatica.ru/dashboard/project/82026/193019" width="1400" height="700" id="frame"></iframe> |
Также для примера создана кнопка, при нажатии на которую отправляется событие с функцией postMessage():
<!-- Кнопка для отправки события ChangeFilter с массивом value -->
<button onclick="sendMessage()">кнопка фильтрации</button>
<button onclick="goTo('project/82026/193019?qq=строка 3')">Кнопка перехода GoTo</button>
<script>
// Функция для отправки сообщения в родительское окно
function sendMessage() {
// Отправляем сообщение с событием changeFilter и массивом value в iframe
var iframe = document.getElementById('frame');
iframe.contentWindow.postMessage({
event: 'changeFilter', // Название события
value:
value: [{ value: "строка 13", key: "qq" }, { value: "строка 3", key: "qqs" }, { value: ['январь'], key: "test123" }] // Массив с объектами значений
// Массив с объектами значений
}, new URL(iframe.src).origin); // Ограничиваем сообщение тем же источником, что и iframe
}
// Слушатель для обработки сообщений от iframe (если нужно)
window.addEventListener('message', (event) => {
console.log(event); // Выводим событие в консоль для отладки
});
</script> |
|
Разберем структуру данных, которые отправляются в iframe при нажатии на кнопку фильтрации.
Отправляемые данные - это объект, имеющий поля event и value, где event – название отправляемого события, а value – значение.
Для передачи фильтра в iframe мы используем event с названием 'changeFilter'.
Структура value всегда имеет тип объекта или массива объектов, которые имеют по два обязательных свойства: value и key, где value – значение, передаваемое в фильтр, и key – ключ этого фильтра.
Рассмотрим несколько сценариев использования:
1)
iframe.contentWindow.postMessage({
event: 'changeFilter',
value:
value: { value: 'Весна', key: 'key1' }
}, new URL(iframe.src).origin); |
Данный postMessage() передаст в iframe в фильтр, имеющий ключ 'key1' значение 'Весна'.
2)
iframe.contentWindow.postMessage({
event: 'changeFilter',
value:
value: { value: ['Весна', 'Зима'], key: 'key1' }
}, new URL(iframe.src).origin); |
Данный postMessage() передаст в iframe в фильтр (мультисписок), имеющий ключ 'key1', значения 'Весна' и 'Зима'.
3)
iframe.contentWindow.postMessage({
event: 'changeFilter',
value:
value: [{ value: "Весна", key: "key1" }, { value: "Зима", key: "key2" }],
}, new URL(iframe.src).origin); |
Данный postMessage() передаст в iframe в фильтры, имеющие ключи 'key1' и "key2", значения 'Весна' и 'Зима' соответственно.