Редактирование по месту в полях ввода

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

Документация API Спецификация Axure

Базовая конфигурация

Поля ввода, для которых предусмотрено редактирование по месту, необходимо описывать внутри контрола Controls/editableArea:View.

Чтобы настроить редактирование поля ввода, выполните следующие действия:

  1. В компонент Controls/editableArea:View для каждого поля ввода добавьте шаблон редактирования с помощью опции content. В примере ниже добавлен стандартный шаблон Controls/editableArea:Base.
  2. Значение value шаблона редактирования свяжите cо свойством логического родителя.
  3. В шаблон редактирования в опцию editorTemplate поместите поле ввода.
<Controls.editableArea:View
    name="edit"
    editObject="{{_record}}"
    toolbarVisibility="{{true}}">
    <ws:content>
        <Controls.editableArea:Base bind:value="_record">
            <ws:editorTemplate>
                <Controls.input:Text selectOnClick="{{false}}" />
            </ws:editorTemplate>
        </Controls.editableArea:Base>
    </ws:content>
</Controls.editableArea:View>

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

Шаблоны редактирования полей ввода

Для стандартных полей ввода будут предусмотрены стандартные шаблоны редактирования. Таблица ниже содержит актуальный список шаблонов и соответствующих им полей ввода.

Шаблон редактированияПоле ввода
Controls/editableArea:BaseControls/input:Text
Controls/editableArea:DateTimeControls/input:DateBase

Обработка событий редактирования

До начала редактирования происходит событие beforeBeginEdit. Его можно использовать, например, если необходимо добавить элементы интерфейса, которые не отображаются в режиме чтения. В качестве результата из обработчика можно вернуть константу CANCEL, которая находится в Controls/list.

До окончания редактирования происходят события:

  • beforeEndEdit — происходит, если нужно проверить данные и при необходимости отменить результат редактирования; также событие используется, если необходимо обработать сохранение записи;
  • afterEndEdit — происходит, если необходимо что-либо сделать после завершения редактирования; например, скрыть или показать изображение.

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

Валидация данных при завершении редактирования

Можно использовать Controls/validate:InputContainer (см. Валидация на клиенте).

Можно использовать подписку на событие beforeEndEdit:

  • в обработчике события провести валидацию. В случае невалидного значения возвращать константу CANCEL, которая находится в Controls/list.editing.
  • в обработчике делать запрос на сервер и возвращать Deferred, который:
    • в случае прохождения валидации — завершится успешно и ничего не вернёт;
    • в случае невалидного значения — вернёт из обработчика константу CANCEL, которая находится в Controls/list.