Создание глобального фильтра описано в соответствующем разделе: Добавление фильтра.

Для применения глобального фильтра следует воспользоваться соответствующим элементом, расположенным на слое проекта, если глобальный фильтр вынесен на слой, или нажать на кнопку , расположенную в правом верхнем углу окна просмотра проекта.

Применение фильтра со слоя

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

Тип и вид фильтра зависят от настроенного шаблона.

Для фильтра типа «Поиск» при работе с числовыми значениями необходимо указывать дробные числа через «.» (например, «12.3») для корректного поиска по значениям.

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

Подсказка при наведении на длинное значение глобального фильтра

Применение фильтра из панели

Для просмотра имеющихся в проекте глобальных фильтров следует нажать на кнопку , расположенную в правом верхнем углу окна просмотра проекта.

После нажатия на кнопку справа отобразится следующее окно:


Примененные фильтры

Примененные фильтры отмечены чекбоксами. 

Для сброса всех значений в примененных фильтрах следует нажать кнопку «Сбросить все». Фильтры с установленным значением по умолчанию сбросятся до этого значения, фильтры без установленного значения по умолчанию очистятся, и произойдет переход в окно просмотра проекта.

Для закрытия окна следует нажать кнопку , расположенную в верхнем правом углу окна, или нажать левую кнопку мыши вне области окна.

Перенос значения глобального фильтра между слоями

Если фильтр применен к объекту на одном слое, то при наличии аналогичного фильтра на другом слое, фильтрация может быть повторена при переходе на другой слой. 

Для этого должны выполняться следующие условия:

  1. Фильтр-отправитель и фильтр-получатель должны быть созданы из одного шаблона.
  2. Фильтр-отправитель и фильтр-получать должны иметь одинаковый ключ (поле «Ключ» обязательно к заполнению).
  3. В настройках фильтра разрешена передача значений между слоями/проектами (необходимо добавить в настройки фильтра на финальном шаге создания связи между фильтром и объектом для обоих фильтров на обоих слоях).


Настройка переноса значений фильтра и результат

На Слое 1 в фильтре выбрано значение «Владимир», виджет отсортирован по данному значению:

Перейдем на Слой 2. В фильтре установлено то же значение, что и на Слое 1, и другой виджет отсортирован по нему:

Перенос значения фильтра на встроенный слой

В случае если второй слой встроен в первый при помощи HTML-компонента iframe, для переноса значения (или массива значений) фильтра со слоя на слой используется JavaScript-фунцкция postMessage().

Предположим, что у нас есть Слой 1 и Слой 2, при этом Слой 1 встроен в Слой 2 при помощи iframe:

Код 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", значения 'Весна' и 'Зима' соответственно.

  • Нет меток