Красивый и функциональный статус-бар на HTML

27.09.23

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

Статья рассказывает о том, как при помощи 1С и html сделать красивое и функциональное отображение статуса процесса (протестировано на платформе 8.3.17.1851)

Скачать исходный код

Наименование Файл Версия Размер
Файлы макета и общий модуль работы со статус-баром
.rar 4,30Kb
12
.rar 4,30Kb 12 Скачать

Введение

Часто у пользователей продуктов «1С: Предприятие» практически нет альтернативы, они пользуются решениями от 1С не перебирая и не исследуя рынок. Де факто 1С стал стандартом в разработке корпоративного ПО для бухгалтерии и финансового управления. Однако в других областях приходится конкурировать с продвинутыми продуктами, искать своего пользователя, привлекать его. Среди множества продуктов пользователь ищет лучшее решение, и одним из критериев выбора (и весьма значительным) является эмоциональных отклик у пользователя, возникающий при взаимодействие с интерфейсом продукта, его визуальной компоновкой. Пользователь искушен. Он окружен продуктами, которые кропотливо и вдумчиво разрабатывали профессиональные команды, включающие UX/UI специалистов, продуктологов и дизайнеров. Разработчики заботятся о том, что бы пользователь получил наилучший пользовательский опыт.

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

 

О продукте

Наша компания разрабатывает систему менеджмента качества для фармацевтических производственных компаний, производителей медицинских изделий и продуктов питания (а в дальнейшем, возможно, и других компаний, с жесткой регуляторикой). Наиболее известным процессом СМК является процесс управления отклонениями (чаще в компаниях он называется «Управление отклонениями» или «несоответствиями). Процесс управления отклонениями включает в себя несколько этапов – регистрацию, рассмотрение, расследование, согласование, выводы. Каждый этап имеет определенный регламентом срок, в течение которого ответственный должен перевести карточку в следующий статус. Мы поставили себе задачу реализовать такое отображение состояние бизнес-процесса, что бы с одного взгляда можно было понять в каком статусе процесс, что еще необходимо сделать, а также насколько мы опаздываем или движемся быстрее по срокам исполнения каждого этапа.

 

Регистр статусов

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

  1. Период (ну да, регистр периодический. Мы получаем текущий статус по срезу последних)
  2. Отклонение (справочник-ссылка)
  3. Статус (ссылка на перечисление, хранящее статусы)
  4. Пользователь (справочник пользователей. На всякий случай пишем кто перевел карточку в данный статус)
  5. КоличествоРабочихДнейНаСтатус (число берется из настроек и записывается в регистр. Это сделано на всякий случай, ведь настройки можно поменять, когда карточка уже будет создана, и тогда могут возникнуть какие-то коллизии с расчетами. Решили, что лучше писать сколько дней на статус есть у пользователя прямо в записи о текущем статусе.)
  6. ДатаПереходаВСледующийСтатус (Пишем дату перехода в следующий статус на всякий случай. Дата записывается в момент перехода в следующий статус.)
  7. РабочихДнейВСтатусе (число – разница в рабочих днях между периодом и датой перехода в следующий статус)
  8. РазницаМеждуКоличествомДнейНаСтатусИДнейВСтатусе (ну и наконец число, которое отражает, насколько мы опоздали или сделали быстрее)

Регистр может показаться избыточным, например запись настройки количества дней и даты перехода в следующий статус может показаться лишней – они ведь не отображаются в статус баре. Однако мы страхуемся. Дело в том, что жесткая регуляторика и требования для СМК фармпроизводств заставляют нас жертвовать парой килобайт в БД, но формировать такие записи, что бы по ним можно было, если что и восстановить последовательность и проследить историю, да и вообще, что бы было. Так же при запросе статуса формируется дополнительное поле «КоличествоПереходов», которое показывает сколько раз карточка была в этом статусе. Ведь может быть такое, что мы откатываем карточку к предыдущему статусу, и пользователю желательно видеть сколько раз карточка прошла круг.

 

Рисуем статус-бар

В целом статус-бар представляет собой html строку, которая вставлена в поле html-документа на форме. Высота поля – 2 строки. Первое, что придется принять за данность, для реализации такого статус бара нужно хотя бы немного разбираться в html. Но сейчас интернет пестрит инструкциями, и, думаю, ни у кого не возникнет проблем, для реализации своего дизайна, тем более что основу мы прилагаем. Сам html документ включает в себя и стили и разметку, совместимую с ранними версиями IE и Edge. Документ собирается при открытии карточки из нескольких текстовых макетов, в которые налету подставляются данные:

  1. Заголовок – хранит первую часть документа, заголовок, стили.
  2. Текущий шаг – содержит разметку и стили текущего шага
  3. Прошедший шаг – тоже для прошедшего шага
  4. Будущий шаг – тоже для будущего шага
  5. Футер – последний блок, закрывающий документ.

Вообще текущий, будущий и прошедший шаг можно объединить в один макет и играться стилями в зависимости от типа шага, но чисто интуитивно мы решили разбить – на всякий случай. Для сборки готового документа нам нужно получить текущее состояние, перебрать статусы карточки, подставить в макет данные и соединить готовые блоки. После сборки выводим результат на место html документа. Бинго.

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

 

Отображение статус-бара

Из скриншотов можно обратить внимание, что активный шаг выделяется более ярким цветом и жирным шрифтом. В статус-баре отображается дата перехода в статус, в «индексе» этой даты стоит маленькая цифра – это количество дней, на которые мы опередили или задержали шаг процесса. Цифра в зависимости от этого подкрашивается красным или зеленым цветом.

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

На наш взгляд такой подход отображает полную картину о состоянии процесса.

Все материалы для создания своего замечательного статус-бара в форме на «1С:Предприятие» мы прилагаем в статье.

См. также

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

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

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

6000 руб.

16.01.2015    62108    43    59    

81

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

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

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

5000 руб.

14.01.2016    54702    16    21    

42

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

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

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

2400 руб.

29.06.2020    16908    22    4    

36

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

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

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

27.12.2023    11177    762    elcoan    45    

106

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

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

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

2 стартмани

10.04.2023    9892    153    acces969    31    

119

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

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

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

1 стартмани

05.07.2022    3946    kalyaka    4    

29

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

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

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

3600 руб.

29.04.2022    12299    1    5    

10

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

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

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

6000 руб.

18.01.2022    8956    1    2    

6
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. sandr13 34 28.09.23 16:58 Сейчас в теме
Интересно. Эх, видео бы сюда для наглядности.
adhocprog; maksa2005; +2 Ответить
2. Serg O. 265 29.09.23 15:12 Сейчас в теме
т.е. это не "стандартный" Бизнес-процесс (объект метаданных 1С) со своими задачами...
а нечто ... иное... самописное ?

для какой типовой конфигурации это подойдёт ? и как это "внедрять" ?

что-то не очень понятно...


Как это можно (и кому это нужно) внедрять у себя ?
например в Документооборот 2.х это можно внедрить как расширение ?
или "напильником" ещё поработать придётся ?
3. Dskozin 26 29.09.23 15:45 Сейчас в теме
(2) Это отдельная конфигурация, сделанная на БСП. Она не ставится никуда как дополнение, это отдельный продукт. Мы стараемся как можно меньше что-то делать напильником, у нас продуктовый подход.

Нужно это (как и указано в статье) компаниям, которые производят лекарства, медизделия, косметику и т.д.
Оставьте свое сообщение