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

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

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

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

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

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

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

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

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

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

Создадим поле контекста типа да/нет (boolean) c кодом showButton

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

А также добавим поле «Название» и вынесем на форму

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

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

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

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

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

Но как длина значения достигает 6 символов, условие видимости возвращает true и кнопка появляется на форме

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

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

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

И просто разместим его на шаблоне формы

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

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

а при значении false отображается

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

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

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

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