3.2. Взаимодействие с контекстом

Контекст → Форма

Здесь взаимодействие максимально простое — меняем значение контекста, и оно автоматически пробрасывается на форму:

Код:

async function onInit(): Promise<void> {
    Context.data.text = 'Привет, мир';
}

При открытии формы в качестве значения переменной text отобразится Привет, мир.

Отобразить свойство контекста на форме можно несколькими способами:

1. На правой панели переключиться на вкладку Свойства, найти нужную переменную и перетащить её на форму мышкой — настоящий лоукод



2. Использовать виджет Код и один из методов отображения свойств:

Код:

<!-- этот способ отобразит название переменной и редактируемое поле с её значением -->
<%= UI.widget.contextRow('text') %>
<!-- этот способ отобразит редактируемое поле со значением переменной -->
<%= UI.widget.contextValue('text') %>
<!-- этот способ отобразит значение переменной только для чтения -->
<%= Context.data.text %>

На форме эти варианты будут выглядеть следующим образом:



Форма → Контекст

Обратная передача значений — то есть чтобы изменения с формы попадали в контекст — в целом также осуществляется несложно: вводим значение в поле ввода — оно сразу пробрасывается в привязанную контекстную переменную. Если все поля добавлены на форму стандартным путем, проблем не будет.

Не рекомендуется править значения через DOM: в этом случае данные, которые введет пользователь, не будут связаны с контекстом и не будут сохранены.

Рассмотрим на примере:

Код:

<script>
const inputControl = document.querySelector('elma-form-control input.form-control');
if (inputControl) {
  inputControl.value = '123'
}
</script>

Сценарий найдёт поле ввода и пропишет в него значение 123. Значение изменится на странице, но не в контексте. Если пользователь нажмёт Сохранить, значение в контексте останется прежним. Поэтому такой способ может вводить пользователя в заблуждение.

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

Код:

/* Клиентский сценарий */
async function setInputValue(value: number | string | undefined) {
  if (value) {
    Context.data.param1 = value;
  }
  Context.data.param1 = null;
}

Чтобы вызывать данный метод, в виджете Код пропишите следующее:

Код:

<script>
const inputControl = document.querySelector('elma-form-control input.form-control');
if (inputControl) {
  inputControl.addEventListener('keyup', (keyEvt) => {
    <%= Scripts %>.setInputValue(inputControl.value);
  });
}
</script>

В примере обработчик отлавливает событие отпускание клавиши (keyup). Это один из возможных вариантов сохранения значения со страницы. Подбирайте события под свой запрос, чтобы отсечь лишние срабатывания. В нашем примере функция будет вызываться и при нажатии системных клавиш — Ctrl, Alt, Shift и других.