Инлайн-редактирование может заменить форму, когда пользователю нужно изменить всего несколько полей среди большого числа параметров.
В горизонтальном списке можно менять ширину колонки с названием параметра, устанавливать фиксированную или относительную величину.
Незаполненное значение параметра нельзя оставлять пустым в режиме просмотра. Вставляйте текстовую заглушку, которая даст понять пользователю, что параметр можно изменить.
По умолчанию используется формулировка «Не заполнено», но лучше под каждый параметр придумать осмысленный текст. Например: «Ответственный: Не назначен», «Окончание работы: Не определено».
Для полей без подписи вместо заглушки можно использовать формулировку с названием поля: описание, оператор, тип инцидента.
Выход из режима редактирования запускает попытку применить изменения. Если новое значение невалидно, то показывается сообщение об ошибке, поле подсвечивается, фокус остается в поле.
Когда заранее известно, какие символы точно не подходят для ввода в поле, система предотвращает ввод некорректных значений. Для этого нужно запрещать ввод определенных символов, например букв в IP-адрес. При этом запрещенные символы не вводятся и показывается желтый тултип.
Если пользователь очистил значение, чтобы избежать ошибки можно при сохранении подставить значение по умолчанию или предыдущее валидное.
Изменение можно сохранять на сервере сразу после выхода из режима редактирования. Для этого в свойство saveHandler нужно передать функцию, которая возвращает поток с запросом. Компонент закрывает редактор, показывает состояние запроса в режиме просмотра и хранит последнее сохраненное значение.
Редактор закрывается раньше, чем отвечает сервер. Поэтому в режиме просмотра поле показывает введенное значение, которое сервер еще не подтвердил.
Если значение не отличается от того, с которым открылся редактор, запрос не уходит. За сравнение отвечает свойство compareWith. По умолчанию компонент сравнивает значения через ===. Такое сравнение подходит для текста и чисел. Для массивов и объектов нужно задать свою функцию. Значение null отключает сравнение: тогда запрос уходит при каждом сохранении. После ошибки запрос уходит даже с тем же значением.
Удаление строки не отменяет запрос: он продолжается и без поля. Событие saveError после удаления строки не приходит. Чтобы сообщить об ошибке и в этом случае, токен KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER нужно объявить в корневом инжекторе.
Если сервер ответил быстрее, чем за 100 мс, поле не показывает индикатор загрузки. Иначе поле в режиме просмотра принимает состояние Progress минимум на 300 мс, чтобы индикатор не мелькал. Пока идет запрос, поле остается в режиме просмотра.
Фон значения окрашивается в цвет ошибки и остается таким, пока пользователь не отреагирует. Введенное значение остается в поле.
За сообщение об ошибке отвечает приложение, а не компонент. Общую реакцию задает токен KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER. Для отдельного поля эту реакцию заменяет свойство saveErrorHandler или подписка на событие saveError. В обработчик приходит ошибка и поле с действиями retrySave(), toggleMode() и rollback().
Сообщение не закрывается по таймауту. Закрытие сообщения и отказ от изменений откатывают несохраненное значение.
Отмена редактирования не снимает состояние ошибки. В поле остается значение, которое отклонил сервер, поэтому ошибка держится до успешного сохранения или до вызова rollback().
Сервер может отклонить не все значение, а его часть. Тогда отклоненные элементы нужно сопоставить с тем, что показано в режиме просмотра, и отметить их, а не все значение.
При наведении или фокусе на поле справа можно показать кнопку дополнительного действия или меню: скопировать текст, добавить значение в фильтр, очистить поле, заполнить по шаблону.
Дополнительные действия оттеняют значение и располагаются в правом верхнем углу. Когда открыто меню, то сохраняется видимой подсветка и иконка.
Элементы с возможностью инлайн-редактирования должны быть выровнены в соответствии с их видом в режиме просмотра, без учета дополнительных отступов у фона при наведении, фокусе или редактировании.
При выборе открываем только выпадающее меню, но не показываем поле ввода, как у Select. Рамка поля ввода не требуется — достаточно выпадающего меню.
После выбора опции поле возвращается в режим просмотра.
Иногда стоит делать опции в выпадающем списке многострочными. Рекомендуется выравнивать ширину выпадающего меню по ширине поля.
Разместите элемент для очистки в выпадающем меню — ведь самого поля селекта не видно, поэтому другого подходящего места для кнопки сброса нет.
Рекомендуем также добавить опцию, название которой явно даёт понять, что значение не установлено. Это будет логично перекликаться с формулировкой пустого поля в режиме просмотра.
После выбора опции поле возвращается в режим просмотра.
Поле с инлайн-редактированием должны сохраняться сразу после изменения без общей для всего экрана кнопки «Сохранить».
Не используйте:
Заменой инлайн-редактированию может быть: