{UI/UX} Свой всплывающий информер у элемента формы

24.08.22

Разработка - Работа с интерфейсом

Питничная фантазия на возможности в разработке интерфейсов формы с помощью Платформы 1С - делаем свою подсказку. Публикация содержит готовую библиотеку программного формирования данной подсказки.

Коллеги, добрый день!

Продолжаю эксперименты с интерфейсом на досуге. Принимайте питничную фантазию на суд инфостартовский 😊

 

Причина

А что, если, мне нужно вывести сообщение пользователю с указанием на элемент формы, с предупреждением о возможном отклонении от задуманного сценария или просто с информацией. Текущая возможность платформы позволяет вызвать окно с заголовком «Ошибка», но мне не нужен пугающий заголовок и особенно красный фон.

 

Идея

Будем использовать Всплывающее поведение группы элементов формы. Идея заключается в оборачивании элемента формы в Обычную группу без отображения и вставки уже туда Группы с поведением «Всплывающая». Так же мы можем что угодно разместить на эту группу, даже пункт инструкции (в ПолеHTML) и ссылку на инструкцию, если решили тыкнуть носом пользователя окончательно. Конечно, он читать не будет, но всё же, как идея.

 

Реализация

 
Код, много кода...

Ограничения кода - требуется библиотека Динамического формирования интерфейса. Да реклама :)

 

Возможности

Функция динамического создания информера включает следующие возможности:

  • Появление вместо заголовка элемента формы слева
  • Появление в виде «i» справа от элемента формы
  • Возможность задать цвет фона (по умолчанию цвет подсказки)
  • Возможность определить цвет выделение реквизита (по умолчанию цвет акцентирования), если выбран метод отображения вместо заголовка, то заголовок группы так же будет этого же цвета.
  • Предусмотрена возможность точечного скрытия информера или массово всех.

 

Демонстрация

У нас есть библиотека (общий модуль) формирования информера (код выше). Будем тестировать на форме приведенной ниже.

 

 

Выводим вместо заголовка элемента наш Информер

У нас есть реквизит на форме «Партнер» и мы хотим у него вывести уведомление, формируем вызов со следующим кодом:

&НаСервере
Процедура ПоказатьИнформерНаСервере()
	СвойстваИнформера = Новый Структура("ЗаголовокИнформера, ТекстИнформера, ЦветФона, ЦветАкцента, СпособОтображения");
	СвойстваИнформера.ЗаголовокИнформера = "К вашему сведению!";
	СвойстваИнформера.ТекстИнформера = "Данный партнер давно не получал звонок от нас! Просим вас заняться этим вопросом в ближайшее время.";
	СвойстваИнформера.ЦветФона = "240,255,255"; 
	СвойстваИнформера.ЦветАкцента = "0,140,219";
	СвойстваИнформера.СпособОтображения = 2;
	кот_Информер.СформироватьИнформер(ЭтотОбъект,"Партнер",СвойстваИнформера);
КонецПроцедуры

 

 

Выводим Информер после элемента

Проверяем как работает со значениями по умолчанию (вывод в виде информации справа от элемента формы с заголовком «i»). Потребуется следующий код вызова:

&НаСервере
Процедура ПоказатьИнформерСправаНаСервере()
	СвойстваИнформера = Новый Структура("ЗаголовокИнформера, ТекстИнформера");
	СвойстваИнформера.ЗаголовокИнформера = "Заканчивается срок.";
	СвойстваИнформера.ТекстИнформера = "Обращаем ваше внимание, что по соглашению с Партнером заканчивается срок, возможно стоит его продлить.";
	кот_Информер.СформироватьИнформер(ЭтотОбъект,"Соглашение",СвойстваИнформера);
КонецПроцедуры

 

 

Минусы и ограничения

  • Первое, что бросается в глаза, нельзя вызвать всплывающую группу без заголовка, а так же в необходимом месте, её поведение не контролируемое.
  • Нельзя подсветить фон у недоступного к редактированию реквизита (в режиме ТолькоПросмотр или Доступность).
  • При подмене заголовка элементу формы, рвет дизайн интерфейса и сложно угадать с размером шрифта.

 

Возможное развитие динамического информера

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

 

 

  • Добавить больше способов вывода, сейчас только слева или справа.
  • Информер может перерасти в Быстрый редактор объекта, предоставить возможность пользователю не проваливаться в объект "по двум квадратикам", а тут же изменить ключевые для этого сценария реквизиты. Пример ниже.

 

Всем удачного котинга!

 

ЗЫ: Кто нашел опечатки и ошибки на скриншотах, тот молодец.

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61796    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54402    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16697    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10736    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9614    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12080    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. RustIG 1351 12.08.22 15:22 Сейчас в теме
(0) мелкий текст информера + нет мотивации у пользователя это читать и что-то делать при этом, типа Кол-Ту-Экшн
ПС. в целом, в этом что-то интересное и полезное есть...
Pawlick; sapervodichka; quazare; DrAku1a; +4 Ответить
9. rpgshnik 3631 14.08.22 06:46 Сейчас в теме
(1) шрифт можно добавить, а мотивацию увы ни как, я кстати об этом написал :)
Конечно, он читать не будет, но всё же, как идея.


Большинство пользователей вообще ничего не читают. Не в тему, но в контексте лени пользователей вспомнил историю, как-то узнал, что есть лайфхак у пользователей некоторые принципиально не выходят, когда их просят выйти для обновления конфигурации... Почему? Потому что не нужно будет заходить через пускач 1С, т.к. система сама перезапустит клиент. Вот такие они :)
cleaner_it; +1 Ответить
2. WorkerPavel 12.08.22 17:47 Сейчас в теме
Под шумок посмотрел как в форме обработки "ОбновлениеПрограммы" всплывающая подсказка реализована. Вопросик с подсказкой появляется если режим отображения подсказки выбрать "Кнопка". Так просто - а Я не пользовался. Теперь насую везде!
sapervodichka; +1 Ответить
3. sapervodichka 6697 12.08.22 17:57 Сейчас в теме
(2) а мне вот эта штука "всплывающая группа" однозначно нравится, я её "насувал" в несколько мест и радуюсь (как бы получая эффект маленькая форма в форме, и новую форму прикручивать не надо, я счастлив)
Прикрепленные файлы:
fatman78; Silenser; rpgshnik; +3 Ответить
8. rpgshnik 3631 14.08.22 06:42 Сейчас в теме
(3) да тоже с момента появления стал регулярно использовать. Именно из-за эффекта "форма в форме".
4. German 413 12.08.22 18:00 Сейчас в теме
Главное что бы не было другой всплывающей группы)
7. rpgshnik 3631 14.08.22 06:41 Сейчас в теме
(4) группа в группе? Кстати интересно, проверю :)
12. ixijixi 1775 15.08.22 10:01 Сейчас в теме
(7) Надо пойти дальше
0x00; rpgshnik; +2 Ответить
33. WorkerPavel 05.10.22 10:24 Сейчас в теме
(7) На случай если это ещё кому-то интересно. Всплывающая группа внутри всплывающей группы отображается как свёртываемая группа. По-умолчанию она развёрнута.
Прикрепленные файлы:
Подсказки.epf
rpgshnik; +1 Ответить
5. check2 354 12.08.22 18:25 Сейчас в теме
Прикольно, а в браузере будет работать?
6. rpgshnik 3631 14.08.22 06:40 Сейчас в теме
10. triviumfan 92 14.08.22 11:50 Сейчас в теме
Не знал. Интересно. Спасибо.
rpgshnik; +1 Ответить
11. Tonik_ 15.08.22 09:32 Сейчас в теме
Интересная задумка, здорово.

Надеюсь, в 1С сделают возможность закрытия всплывающей группы путем нажатия мышкой в любой области за пределами этой группы (не только на конкретные элементы управления).
13. Silenser 592 15.08.22 12:19 Сейчас в теме
Задумка интересная и здравая. В этой бочке меда только одна ложка дегтя - человеческий фактор.
Обычно пользователь не читает предупреждающие сообщения или подсказки (информер) и реагирует только тогда, когда система не дает ему сделать привычную ему операцию. Глаз замыливается и он как, простите за сравнение, лошадь в шорах, смотрит и видит только узкий круг данных. Как мне кажется, должно быть напоминание, которое невозможно закрыть, нажав просто на крестик. ИМХО, конечно.
Pawlick; rpgshnik; +2 Ответить
14. d.snissarenko 152 15.08.22 15:51 Сейчас в теме
Подсказки вещь хорошая.
(13) особенно хороши при заполнении форм где много элементов ввода и выпадающих списков. Информер применять не только с точки зрения заставить пользователя что-то сделать, а больше помочь ему.
При этом самая гениальная идея это пошаговый мастер.

Но так или иначе с точки зрения UI этот механизм удобен и понятен.
rpgshnik; +1 Ответить
15. Silenser 592 16.08.22 09:21 Сейчас в теме
(14) от пошаговых мастеров все начали отказываться года с 16-18го. Сейчас мастера используются лишь в начальной настройке системы. Нет смысла относительно простой процесс оборачивать мастером, это невыгодно с точки зрения затрат на поддержку и написание кода.
16. PavelZnaikin 175 17.08.22 09:17 Сейчас в теме
Подскажите, а как вывести сообщение с кнопкой и полями ввода
18. rpgshnik 3631 18.08.22 05:09 Сейчас в теме
(16) Данный скриншот был продемонстрирован на развитие функционала, в типовой библиотеке Информера такой возможности нет. Но в целом вы легко её можете добавить с помощью Библиотеки Динамического Формирования Интерфейса - https://infostart.ru/1c/articles/1284403/
20. PavelZnaikin 175 18.08.22 14:53 Сейчас в теме
(18)
(18)библиотеку, установил. Но разобраться в ней не получается.
Можете пример кода приложить
21. rpgshnik 3631 19.08.22 06:25 Сейчас в теме
(20) если будет время позже попробую, но по хорошему там просто в группу всплывающею нужно добавить элементы необходимые. Элементам заложить логику через ДФИ.
17. Eralashka 17.08.22 14:25 Сейчас в теме
Это анти-паттерн.
Пользователь ожидает видеть меньше предупреждений.

Программа должна во всем с ним соглашаться, кивать и вести себя послушно а не жарить мозг предупреждениями.
19. rpgshnik 3631 18.08.22 05:15 Сейчас в теме
(17) Хорошо бы :) но было дело когда я кислотными большими буквами выводил на форму специально дико жарящую мозг пользователя надпись, что он косячит и в системе учета возникли проблемы. И это было удачно! Ошибки сошли на нет, так же там были две ссылки на отчеты которыми можно детализирована увидеть ошибки в учете и на основание данных принять решение по их исправлению.

Тут нужно с умом использовать, а также когда писал статью пришли идеи по развитию, которые как по мне крайне удобные и комфортные для пользователя (помощь ввода данных и помощь корректировки данных).
22. PavelZnaikin 175 22.08.22 10:20 Сейчас в теме
(21) буду признателен, если скините пример
23. biimmap 1827 26.09.22 22:05 Сейчас в теме
Где ж Вы время берете на это? Ведь это ж не коммерческий продукт...
24. rpgshnik 3631 27.09.22 02:19 Сейчас в теме
(23) теперь это как хобби)
25. biimmap 1827 27.09.22 10:34 Сейчас в теме
(24) понятно что хобби... время то где брать на него?
26. rpgshnik 3631 27.09.22 11:41 Сейчас в теме
(25) как и на все хобби... в ущерб другому хобби :)
27. biimmap 1827 27.09.22 12:29 Сейчас в теме
(26)
в ущерб другому хобби :)


я бы не променял барабаны на программирование)
28. rpgshnik 3631 27.09.22 13:54 Сейчас в теме
(27) не хотел бы я такого соседа с барабанами :)))

Мой скромный перечень хобби:
Сноуборд (15 лет уже катаю, и только в прошлом году сломал обе руки)
Велосипед (200 км за день проехал рекорд пока, ну и 100-150 км дать в удольствие всегда)
Настольные игры (такой большой выбор сейчас, правда компанию сложно найти и время, но 7 Чудес Дуэль рекомендую)
Покрас миниатюр (забавно и увлекательно, краски от цитадели... но до Вахи не дорос)
Кемпинг на Байкале (летом бывает по месяцу живу в палатках, тоже хобби)
Игровая консоль (тоже хобби!)
Программирование на 1С (ибо уже работаю аналитиком)
Блог (лайк и подписка https://t.me/top_1c)

Да времени на всё не хватает... а хотелось бы всё и сразу :)
Прикрепленные файлы:
Serg2000mr; +1 Ответить
29. biimmap 1827 27.09.22 15:32 Сейчас в теме
(28)
и только в прошлом году сломал обе руки


Было такое хобби... выбил плечи - бросил. Сейчас только через лет 8 в тренажерке восстановил плечи чтоб боли не было.


(28)
уже работаю аналитиком


Чего эт ты через забор перепрыгнул?
30. rpgshnik 3631 27.09.22 15:35 Сейчас в теме
(29) Системный аналитик... не сильно и прыгнул, всё там же в одной галере.
31. WorkerPavel 04.10.22 17:13 Сейчас в теме
А красивые подсказки для кнопок командной панели бывают? Кроме всплывающей не работает ничего.
32. rpgshnik 3631 05.10.22 09:36 Сейчас в теме
(31) мы сильно ограничены по части "красивого" :) тут вот иногда приходится выкручиваться...

Можно ли кнопкам командной панели... можно если имитировать командую панель как обычную группу, и прикрутить текущие подсказки из публикации.

Не по теме вопроса но приведу ещё один пример чек-бокса https://infostart.ru/public/1106063/
34. Serg2000mr 311 07.11.22 03:57 Сейчас в теме
Хотелось бы, чтобы еще возле кнопок можно было выводить информер.

Есть еще идея про ПоказатьОповещениеПользователя - это окно можно перемещать и оно запоминает свое положение.
При закрытии Предприятие настройка положения записывается в ХранилищеСистемныхНастроек с КлючомОбъекта "ОкноОповещения/Такси/НастройкиОкна" и значением вида:
{"#",63a2bd5a-67e3-40d1-86dd-c52a31209da2,
{3,1,"NotificationWindowRectLarge_TDI_DPI120","{1595,855,1913,1015}"}
}


Где {1595,855,1913,1015} - запомненные координаты окна оповещения. Менять их можно, но повлияет это только если их изменить другому пользователю при незапущенном сеансе. Когда он откроет Предприятие, координаты возьмутся оттуда. В пределах сеанса их там менять бесполезно. Пока думаю, как их достать и изменить в сеансе.
rpgshnik; +1 Ответить
36. rpgshnik 3631 17.02.23 10:31 Сейчас в теме
(34) а если текущий пользователь поменяет монитор? ну был у него 32" и теперь 14"... мне кажется это разъездится. Но есть над чем подумать, прикольно, не знал, спасибо.
37. Serg2000mr 311 29.05.23 21:02 Сейчас в теме
(36) Можно использовать встроенную функцию ПолучитьИнформациюЭкрановКлиента()
Так можно получить разрешение и масштаб. Пожалуйста )
35. Светлый ум 406 17.02.23 06:28 Сейчас в теме
38. Korolev 49 22.12.23 15:55 Сейчас в теме
Хорошая статья :)
rpgshnik; +1 Ответить
Оставьте свое сообщение