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

24.08.22

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

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

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

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

 

Причина

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

 

Идея

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

 

Реализация

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

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

 

Возможности

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

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

 

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

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

 

 

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

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

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

 

 

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

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

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

 

 

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

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

 

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

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

 

 

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

 

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

 

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

См. также

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

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

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

2400 руб.

29.06.2020    14756    18    4    

25

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

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

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

6000 руб.

18.01.2022    7632    1    2    

6

Редактор граф

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

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

1500 руб.

06.10.2020    8743    6    7    

8

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

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

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

2 стартмани

10.04.2023    7343    140    acces969    31    

106

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

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

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

1 стартмани

05.07.2022    2075    kalyaka    2    

19

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

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

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

3600 руб.

29.04.2022    10509    1    5    

9

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    7752    AtamanovYS    19    

129

[mobile] Переносим HTML интерфейс на 1С

Работа с интерфейсом Мобильная разработка Платформа 1С v8.3 Мобильная платформа Конфигурации 1cv8 Бесплатно (free)

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

02.11.2020    14981    leobrn    83    

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


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

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

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

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

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


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

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

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


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


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


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

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

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