При проектировании современных интерфейсов в системе 1С:Предприятие 8.3 разработчики часто сталкиваются с задачей экономии экранного пространства. Одним из наиболее эффективных методов является вывод заголовка или поясняющего текста непосредственно внутри поля ввода (так называемый placeholder). Это позволяет отказаться от громоздких внешних надписей и сделать форму более лаконичной.
В этой статье мы подробно разберем, как реализовать такой функционал для различных элементов формы, проанализируем поведение платформы в разных режимах и рассмотрим нюансы настройки условного оформления.
Для одиночных реквизитов формы, не входящих в состав табличных частей, платформа предоставляет штатный механизм. Рассмотрим, как его настроить правильно. Выясним причину, почему иногда это свойство работает не так, как ожидает разработчик.
Разберем по шагам процесс настройки:
Поле ввода.ПодсказкаВвода (InputHint).Проанализируем поведение этого свойства. Важно понимать, что в современных версиях платформы (начиная с 8.3.15) ПодсказкаВвода ведет себя как полноценный заполнитель. Она отображается серым цветом до тех пор, пока пользователь не начнет вводить данные. Однако на более старых версиях платформы подсказка могла исчезать в момент получения полем фокуса, что несколько снижало удобство интерфейса.
Если вы работаете в Веб-клиенте, 1С транслирует это свойство в стандартный HTML-атрибут placeholder. Это означает, что внешний вид и поведение текста будут зависеть от используемого браузера.
Часто возникает вопрос: как вывести заголовок внутри поля, если оно находится в строке табличной части? Прямого свойства ПодсказкаВвода для колонок таблицы в некоторых контекстах бывает недостаточно, или оно может работать нестабильно при отображении списка. В этом случае мы воспользуемся мощным инструментом — Условным оформлением формы. Для автоматического формирования программного кода условного оформления формы любой сложности подойдёт инструмент для декомпиляции настроек оформления.
Рассмотрим подробнее алгоритм настройки условного оформления:
Текст. Именно этот текст будет «перекрывать» пустое значение в поле.Цвет текста на Цвет текста подсказки или Web-серый. Это необходимо, чтобы пользователь визуально отличал подсказку от реально введенных данных.Заполнено со значением Ложь.Посмотрим на пример логики, которую мы настраиваем в конструкторе условного оформления (в программном виде это выглядело бы так):
// Пример программного добавления условного оформления
ЭлементОформления = УсловноеОформление.Элементы.Добавить();
ЭлементОформления.Оформление.УстановитьЗначениеПараметра("Текст", "Укажите количество...");
ЭлементОформления.Оформление.УстановитьЗначениеПараметра("ЦветТекста", ЦветаСтиля.ЦветТекстаПодсказки);
ОтборElement = ЭлементОформления.Отбор.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
ОтборElement.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("Объект.Товары.Количество");
ОтборElement.ВидСравнения = ВидСравненияКомпоновкиДанных.НеЗаполнено;
ПолеОформления = ЭлементОформления.Поля.Элементы.Добавить();
ПолеОформления.Поле = Новый ПолеКомпоновкиДанных("ТоварыКоличество");
Преимущество этого метода заключается в том, что в каждой строке может быть свой текст (если настроить более сложные условия отбора), и оформление корректно работает в режиме списка. При необходимости быстро получить готовый код для табличных частей можно применить конструктор кода условного оформления.
Иногда требуется более сложная визуализация, когда подсказка не просто исчезает, а плавно смещается. В рамках стандартного интерфейса «Такси» реализовать это сложно, но мы можем применить метод программного переключения видимости.
Рассмотрим ситуацию, когда при пустом поле нам нужно показывать элемент Декорация - надпись, имитирующий поле ввода, а при активации — само Поле ввода. Для этого используется группа типа Страницы или программное изменение свойства Видимость.
Важный нюанс: такой подход требует написания кода в обработчиках событий ПриАктивацииСтроки или ПриИзменении. Однако опытные разработчики советуют избегать этого метода, так как он может приводить к «мерцанию» интерфейса и избыточным вызовам сервера.
Проанализируем ситуацию с мобильными устройствами. В мобильном клиенте 1С место на экране крайне ограничено. Использование внешних заголовоков (надписей слева от поля) часто делает форму нечитаемой. В этом случае ПодсказкаВвода становится основным способом информирования пользователя о назначении поля.
При разработке под мобильную платформу придерживайтесь следующих правил:
ПодсказкаВвода для всех полей, где нет явного заголовка.Выясним, какой метод лучше подходит для ваших задач:
1. Свойство ПодсказкаВвода:
Лучший выбор для стандартных реквизитов формы. Минимум настроек, максимальная производительность. Работает на уровне ядра платформы.
2. Условное оформление:
Единственный надежный вариант для Табличных частей и Динамических списков. Позволяет гибко управлять цветом и текстом в зависимости от данных в строке.
3. Свойство Отображение подсказки (Tooltip display):
Если текст слишком длинный и не помещается внутри поля, используйте кнопку i (информация) рядом с полем. Это настраивается через свойство ОтображениеПодсказки, установленное в значение Кнопка.
В заключение отметим, что использование подсказок внутри полей — это стандарт современного UI. Мы рекомендуем комбинировать эти методы, отдавая предпочтение Условному оформлению для таблиц, так как оно обеспечивает наиболее стабильный визуальный результат в тонком и веб-клиенте.