Как сделать динамическое отображение полей/виджетов со сложным условием

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

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

Настройка Видимость представляет собой переключатель, который может иметь одно из пяти значений. Этих значений достаточно, чтобы покрыть любую потребность при построении сложных интерфейсов. Рассмотрим их подробнее.

Показывать всегда. Скрывать всегда

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

Показать по условию

При выборе значения видимости Показать по условию можно привязать к настройкам видимости поле из контекста формы или страницы. По умолчанию поле не выбрано, и в настройках отображается ссылка <Не установлено>. При нажатии на неё появляется список доступных для привязки полей. Если в контексте есть поле типа Приложение, вы можете развернуть его и использовать его свойства без ограничений по уровню вложенности.

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

Рассмотрим пример.

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

Для этого создайте в контексте поле типа Выбор «да/нет» (boolean) c кодом showButton.

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

Также добавьте и вынесите на форму поле Название.

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

В функции будет проверяться текущее значение строки с названием и, в зависимости от её длины, будет меняться значение поля контекста showButton. Если длина строки более пяти символов, то showButton будет присваиваться значение true, иначе — false:

async function nameChanged(): Promise<void> {
    Context.data.showButton = Context.data.name && Context.data.name.length > 5 ? true : false; 
}

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

Рассмотрим, как будет работать отображение кнопки на форме, настроенной выше. Теперь, пока текст в поле Название не более пяти символов длиной, созданная кнопка будет скрыта.

Однако, как только длина текста достигает шести символов, условие видимости возвращает true, и кнопка появляется на форме.

Скрыть по условию

Опция Скрыть по условию работает по тому же принципу, что и предыдущая, но наоборот. Виджет скрывается, когда связанное поле контекста имеет значение или может быть приведено к значению true, в обратном случае виджет отображается.

Например, создайте в контексте поле типа Выбор «да/нет» и назовите его Скрыть кнопку (hideButton).

Разместите его в шаблоне формы.

В настройках видимости кнопки выберите Скрыть по условию и привяжите её отображение к созданному полю Скрыть кнопку.

Теперь, когда свойство Скрыть кнопку имеет значение true, кнопка скрывается.

Если значение поля false, кнопка отображается.

Показать для групп

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

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

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

Отображается при выполнении условия

Настраивая контекст приложения в расширенном режиме настройки форм, вы можете включить для свойства опцию Отображается при выполнении условия. Она позволяет задать комплексное условие без использования сценария. Вы можете указать значения полей, при которых свойство будет отображаться, и настроить связки между условиями. Подробнее читайте в официальной справке ELMA365 в статье «Заполнение по формуле и отображение поля».

Когда вы настраиваете форму в дизайнере интерфейсов и выносите свойство на поле для моделирования, оно помещается внутри виджета-контейнера Строка формы. Отображение поля на форме определяется опцией видимости, установленной в настройках виджета, по умолчанию оно показывается всегда. Условия из опции Отображается при выполнении условия при этом не применяются.

Вы можете сделать так, чтобы настройка Отображается при выполнении условия имела приоритет.

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

После этого опция Отображается при выполнении условия будет приоритетнее, чем настройки видимости в дизайнере интерфейсов.

Обратите внимание, этот способ работает, даже если вы удалили виджет Стандартная форма элемента с поля для моделирования.

Вы также можете настроить сложное условие с помощью опций Показать по условию и Скрыть по условию, осуществляя проверку в сценарии.