Зависимости
Между виджетами, филдсетами или полями можно установить зависимости. Зависимоcти задаются выражениями на языке JavaScript.
#
БлокировкаБлокировка позволяет сделать компонент недоступным для редактирования в определенных условиях.
#
Блокировка полей вводаПоле можно заблокировать по условию с помощью элемента <enabling>
:
<input-text id="maidenName" label="Девичья фамилия"> <dependencies> <!-- Поле "Девичья фамилия" доступно для редактирования, если пол женский, где gender - это поле в источнике данных виджета с текущей моделью данных --> <enabling>gender == 'woman'</enabling> </dependencies></input-text>
Существует короткая запись условия блокировки поля с помощью атрибута enabled
.
Атрибут enabled
принимает значение true
или false
,
но его можно задать через javaScript выражение, записанное в фигурных скобках:
<input-text id="maidenName" label="Девичья фамилия" enabled="{gender == 'woman'}"/> <!-- Поле "Девичья фамилия" доступно для редактирования, если пол женский, где gender - это поле в источнике данных виджета с текущей моделью данных -->
#
Блокировка филдсетовФилдсет можно заблокировать по условию с помощью атрибута enabled
:
<set id="woman" label="Девичья фамилия" enabled="{gender == 'woman'}"> <!-- Филдсет "Девичья фамилия" доступен для редактирования, если пол женский, где gender - это поле источника данных виджета с текущей моделью данных --> ...</set>
В данном примере переменная gender
- это ссылка на другое поле в этой же форме.
#
Блокировка кнопокКнопку можно заблокировать с помощью элемента <enabling>
:
<button label="Изменить"> <dependencies> <!-- Кнопка "Изменить" доступна для нажатия, если status не равен 1, где status - это поле в источнике данных main с моделью resolve--> <enabling datasource="main" model="resolve">status != 1</enabling> </dependencies> ... <!-- Действие --></button>
Существует короткая запись условия блокировки кнопки с помощью атрибута enabled
.
Атрибут enabled
принимает значение true
или false
,
но его можно задать через javaScript выражение, записанное в фигурных скобках:
<button label="Изменить" enabled="{status != 1}"> <!-- Кнопка "Изменить" доступна для нажатия, если статус записи не 1, где status - это поле в текущем источнике данных с текущей моделью данных --> ... <!-- Действие --></button>
#
СкрытиеСкрытие позволяет сделать компонент невидимым в определенных условиях. Условия видимости записываются аналогично условиям блокировки.
#
Скрытие полей вводаПоле можно скрыть по условию с помощью элемента <visibility>
:
<input-text id="maidenName" label="Девичья фамилия"> <dependencies> <!-- Поле "Девичья фамилия" видимо, если пол женский --> <visibility on="gender">gender == 'woman'</visibility> </dependencies></input-text>
Существует короткая запись условия скрытия с помощью атрибута visible
, аналогично блокировке:
<input-text id="maidenName" label="Девичья фамилия" visible="{gender == 'woman'}"/> <!-- Поле "Девичья фамилия" видимо, если пол женский -->
#
Скрытие филдсетовФилдсет можно скрыть по условию с помощью атрибута visible
:
<set id="woman" label="Девичья фамилия" visible="{gender == 'woman'}"> <!-- Филдсет "Девичья фамилия" видим, если пол женский --> ...</set>
#
Скрытие кнопокКнопку <button>
можно скрыть по условию с помощью элемента visibility
:
<button label="Изменить"> <dependencies> <!-- Кнопка "Изменить" видима, если status не равен 1 --> <visibility datasource="main" model="resolve">status != 1</visibility> </dependencies> ... <!-- Действие --></menu-item>
Существует короткая запись условия скрытия кнопки с помощью атрибута visible
, аналогично блокировке:
<button label="Изменить" visible="{status != 1}"> <!-- Кнопка "Изменить" видима, если status не равен 1 --> ... <!-- Действие --></menu-item>
#
Скрытие столбцов таблицыСтолбец таблицы <column>
можно скрыть по условию через элемент <visibility>
:
<column text-field-id="shortName"> <dependencies> <!-- Столбец shortName скроется, если type равен 1, где type - поле в источнике данных form с моделью resolve --> <visibility datasource="form" model="resolve">type == 1</visibility> </dependencies> ... <!-- Ячейка --></column>
#
Установка значенийС помощью установки значений можно автоматически заполнять поля ввода по JavaScript выражениям.
Установка значения задаётся с помощью элемента <set-value>
:
<input-text id="a"/><input-text id="b"/><input-text id="result"> <dependencies> <!-- Значение result будет изменено на сумму значений a и b, когда a или b будут изменены --> <set-value on="a,b">a+b</set-value> </dependencies></input-text>
В теле <set-value>
должно быть записано выражение на языке JavaScript, которое вернёт новое значение поля.
Если в теле необходимо написать не одно, а несколько выражений,
то необходимо использовать команду return
для явного возврата значения:
<select id="gender" label="Пол"> <dependencies> <!-- Если фамилия заканчивается, на "а", то устанавливается пол Женский, иначе значение не меняется. --> <set-value on="surname"> var obj; if (surname[surname.length-1]=='а') { obj = {}; obj.id = 2; obj.name = 'Женский'; } return obj; </set-value> </dependencies></select>
note
Чтобы значение поля не изменилось после срабатывания <set-value>
, просто не нужно ничего возвращать (или вернуть undefined
).
Чтобы значение очистилось, нужно вернуть null
.
Выражение set-value
будет срабатывать после изменения другого поля виджета, которое можно указать в атрибуте on
:
<checkbox label="Адрес проживания совпадает с регистрацией"> <dependencies> <!-- Если адрес проживания совпадает с адресом регистрации, то чекбокс выделяется, иначе выделение снимается --> <set-value on="addressReq, addressFact"> if (addressReq == addressFact) return true; else return false; </set-value> </dependencies></checkbox>
warning
Необходимо возвращать значение поля в том формате, в котором работает компонент. Например, списковые компоненты единственного выбора ожидают объект с id и другими свойствами. Списковые компоненты множественного выбора ожидают список объектов.
#
Обязательность заполнения полейМожно сделать поле обязательным для заполнения в определенных условиях через элемент <requiring>
:
<input-text id="maidenName" label="Девичья фамилия"> <dependencies> <requiring>gender == 'woman'</requiring> </dependencies></input-text>
Существует короткая запись условия обязательности поля с помощью атрибута required
.
Атрибут required
принимает значение true
или false
,
но его можно задать через javaScript выражение, записанное в фигурных скобках:
<input-text id="maidenName" label="Девичья фамилия" required="{gender == 'woman'}"/>