Skip to main content

Зависимости

Между виджетами, филдсетами или полями можно установить зависимости. Зависимоcти задаются выражениями на языке JavaScript.

Блокировка​

Блокировка позволяет сделать компонент недоступным для редактирования в определенных условиях.

Блокировка полей ввода​

Поле можно заблокировать по условию с помощью элемента <enabling>:

Блокирование поля по условию
<input-text id="maidenName" label="Девичья фамилия">
  <dependencies>
    <!-- Поле "Девичья фамилия" доступно для редактирования, если пол женский, где
         gender - это поле в источнике данных виджета с текущей моделью данных -->
    <enabling on="gender">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>

Блокирование кнопки по условию в элементе не работает в ячейке, нужно использовать условие в атрибуте.

Блокирование кнопки ячейки по условию в атрибуте
<column label="Доступно для status!=1">
    <toolbar>
        <button label="Изменить"
               enabled="{status != 1}">
          ... <!-- Действие -->
       </button>
    </toolbar>
</column>

Скрытие​

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

Скрытие полей ввода​

Поле можно скрыть по условию с помощью элемента <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>
    ... <!-- Действие -->
</button>

Существует короткая запись условия скрытия кнопки с помощью атрибута visible, аналогично блокировке:

Скрытие кнопки по условию через атрибут
<button label="Изменить"
        visible="{status != 1}">
    <!-- Кнопка "Изменить" видима, если status не равен 1 -->
    ... <!-- Действие -->
</button>

Скрытие столбцов таблицы​

Столбец таблицы <column> можно скрыть по условию через элемент <visibility>:

Скрытие столбца по условию через элемент
<column text-field-id="shortName">
    <dependencies>
        <!-- Столбец shortName видим, если type равен 1, где
             type - поле в источнике данных form с моделью resolve -->
        <visibility datasource="form"
                    model="resolve">type == 1</visibility>
    </dependencies>
    ... <!-- Ячейка -->
</column>

Скрытие кнопки по условию в элементе не работает в ячейке, нужно использовать условие в атрибуте.

Скрытие кнопки ячейки по условию в атрибуте
<column label="Видима для status!=1">
    <toolbar>
        <button label="Изменить" visible="{status!=1}"/>
    </toolbar>
</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, которое вернёт новое значение поля.

Установка значения в списковом поле
<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">
              addressReq == addressFact
        </set-value>
    </dependencies>
</checkbox>
warning

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

Обязательность заполнения полей​

Можно сделать поле обязательным для заполнения в определенных условиях через элемент <requiring>:

Условие обязательности заполнения поля через элемент
<input-text id="maidenName"
            label="Девичья фамилия">
    <dependencies>
        <requiring on="gender">gender == 'woman'</requiring>
    </dependencies>
</input-text>

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

Условие обязательности заполнения поля через атрибут
<input-text id="maidenName"
            label="Девичья фамилия"
            required="{gender == 'woman'}"/>