Перейти к основному содержимому

Работа с триггерами

Создание триггеров

Триггер в Fastboard – управляющий элемент, позволяющий настроить видимость объектов (визуализаций и фильтров) на дашборде.

Все триггеры создаются в настройках страницы – это отправной пункт при начале работы с интерактивной видимостью объектов.

Откроем общие настройки проекта (не должна быть выбрана ни одна визуализация), и перейдём на вкладку "Настройки страницы".

image.png

Раскроем секцию "Триггеры страницы", нажмём на кнопку "Создать триггер". В списке триггеров появится новый объект. Триггеру можно установить название – отнеситесь к этому ответственно, потому что в рамках одного проекта могут существовать десятки различных триггеров, которые могут применять разные пользователи.

image.png

подсказка

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

примечание

Примеры "хороших" названий для триггеров: "Доход – вкл", "Детализация по расходам", "Карта (ур. 2)".

После выбора названия можно установить текущее значение триггера – true или false. По сути, каждый триггер представляет собой переменную логического типа: при значении true видимость включается, при значении false – выключается.

к сведению

Планировать создание триггеров в отдельности от визуализаций – плохая идея! Рекомендуется сначала спланировать последовательность действий, а потом приступать к созданию и назначению триггеров.

Базовые триггеры

Самый простой функционал триггеров – скрывать/показывать визуализации при нажатии на кнопку. Для того, чтобы корректно настроить работу триггеров, нужно учитывать несколько правил:

  • За видимость объекта может отвечать ровно один триггер.
  • Один объект может управлять сразу несколькими триггерами.
  • Один и тот же триггер можно назначить на несколько разных объектов.

Работа с триггерами в рамках объектов дашборда выполняется в настройках объекта на вкладке "События".

image.png

Здесь есть две секции:

  • Управление триггерами – список триггеров, значение которых изменяет нажатие на визуальный компонент. В данный список можно добавлять только триггеры, которые ранее были созданы в настройках страницы. Для каждого триггера в списке можно выбрать значение, которое будет установлено для него при нажатии на визуализацию:

    • true
    • false
    • invert – меняет текущее значение на противоположное (true на false, false на true) image.png
  • Управление видимостью – секция для определения, какой триггер определяет видимость объекта:

    • Если у триггера установлено значение true, то объект отображается на дашборде

    • Если у триггера установлено значение false, то объект скрыт

подсказка

Не забудьте активировать секцию переключателем (иначе триггеры не будут действовать)

Продвинутые триггеры

Управление своей видимостью

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

подсказка

В данном случае следует помнить, что если объект при нажатии выключает сам себя, то для его включения понадобится другой объект, связанный с ним. Иначе бизнес-пользователь проекта при нажатии может полностью потерять визуализацию.

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

Связанные кнопки

В случае, когда требуется задать несколько вариантов визуализации с помощью кнопок, необходимо уметь корректно создавать цепочки связанных условий с помощью триггеров. Существуют различные кейсы, при которых может возникнуть несколько связанных друг с другом кнопок (управляющих не только чужой, но и своей видимостью). Начнём, разумеется, с простого кейса.

Кейс – "включенная" кнопка может полностью закрыть собой "выключенную" кнопку

Суть кейса – кнопками выбирается одна из нескольких визуализаций, при этом саму кнопку при нажатии нужно как-то выделять.

Основная идея в этом кейсе – создать столько триггеров, сколько имеется визуализаций, и назначить их на "свои" кнопки включения и визуальные компоненты. При этом:

  • У нижних кнопок (при нажатии на которые появляется визуальный компонент) установлено управление триггерами:

    • "Свой" (активирующий указанную визуализацию) триггер – True
    • "Чужие" (активирующие другие визуализации) триггеры – False
  • У верхних кнопок установлено только управление видимостью – там стоит "свой" триггер (такие кнопки являются некликабельными заглушками)

  • У каждой визуализации установлено только управление видимостью – там стоит "свой" триггер

Назначение на области SVG

Уникальной визуализацией, способной взаимодействовать с триггерами особым образом, является SVG-объект. У данного визуального компонента доступно управление триггерами как с помощью контейнера объекта, так и через каждую размеченную область SVG-файла внутри. Для этого на вкладке "События" в секции "Управление триггерами" у SVG есть второй режим – "Раздельный".

image.png

При переключении в раздельный режим появляется возможность не только выбрать триггер, но и назначить его на конкретную область (представьте, что области SVG являются отдельными визуализациями, с помощью которых можно управлять видимостью объектов дашборда). При этом действуют следующие правила:

  • На каждую область можно назначить сколько угодно триггеров.
  • Каждый триггер можно назначить на сколько угодно областей.
  • Один и тот же триггер может быть назначен на одну и ту же область несколько раз. При этом применяться будет то значение, которое указано выше остальных в списке.
к сведению

По умолчанию нажатие на область SVG фильтрует дашборд (отчёт) по этой области. Необходимо учитывать это при разработке логики переключения триггерами, поскольку такие фильтры могут ограничивать результат переключения.

Экспертные триггеры

Связанные кнопки 2

Кейс – кнопка во втором режиме не перекрывает кнопку в первом

Суть кейса – нельзя разместить "включенную" кнопку поверх "выключенной" таким образом, чтобы она полностью её перекрывала (например, если кнопка задана какой-то фигурой)

Основная идея в этом кейсе – создать по два триггера на каждую логику: триггер включения и триггер выключения. Каждая пара таких триггеров будет привязана к своим кнопке и визуализации (желательно, одноименным)

Число триггеров будет равно числу кнопок или удвоенному числу вариантов визуализации (6 триггеров на 3 визуального компонента и т.д.). При этом самым удобным будет следующий алгоритм:

  • Парам триггеров даём одинаковые названия, отличающиеся указанием на действие включения/выключения (например, +/- или on/off)

  • В управлении видимостью "выключенных" кнопок (при нажатии на которые визуальный компонент должен появляться) устанавливаем триггер выключения (например, "Круговая_off")

  • В управлении видимостью "включенных" кнопок (после нажатия на выключенную) устанавливаем триггер включения (например, "Круговая_on")

  • В управлении видимостью визуализаций устанавливаем триггер включения (например, "Круговая_on")

  • Управление триггерами назначаем только на "выключенные" кнопки, при этом каждая такая кнопка будет влиять на ВСЕ используемые в логике триггеры. Каждая "выключенная" кнопка:

    • Устанавливает True для своего триггера включения и чужих триггеров выключения
    • Устанавливает False для своего триггера выключения и чужих триггеров включения

Пример реализации:

image.png

image.png