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

24.08.22

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

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

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

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

 

Причина

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

 

Идея

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

 

Реализация

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

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

 

Возможности

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

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

 

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

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

 

 

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

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

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

 

 

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

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

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

 

 

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

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

 

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

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

 

 

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

 

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

 

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

См. также

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

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

6000 руб.

16.01.2015    62984    44    59    

82

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

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

2400 руб.

29.06.2020    18848    26    6    

41

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

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

1500 руб.

06.10.2020    10221    7    7    

10

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024    16769    mrXoxot    43    

121

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    7334    smielka    37    

100

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

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

27.12.2023    14780    913    elcoan    47    

117

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

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

2 стартмани

10.04.2023    11907    162    acces969    31    

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


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

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

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

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

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


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

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

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


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


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


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

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

Не по теме вопроса но приведу ещё один пример чек-бокса https://infostart.ru/public/1106063/
34. Serg2000mr 670 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 3795 17.02.23 10:31 Сейчас в теме
(34) а если текущий пользователь поменяет монитор? ну был у него 32" и теперь 14"... мне кажется это разъездится. Но есть над чем подумать, прикольно, не знал, спасибо.
37. Serg2000mr 670 29.05.23 21:02 Сейчас в теме
(36) Можно использовать встроенную функцию ПолучитьИнформациюЭкрановКлиента()
Так можно получить разрешение и масштаб. Пожалуйста )
35. Светлый ум 415 17.02.23 06:28 Сейчас в теме
38. Korolev 49 22.12.23 15:55 Сейчас в теме
Хорошая статья :)
rpgshnik; +1 Ответить
Оставьте свое сообщение