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

27.09.23

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

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Файлы макета и общий модуль работы со статус-баром
.rar 4,30Kb
15
15 Скачать (1 SM) Купить за 1 850 руб.

Введение

Часто у пользователей продуктов «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 Платные (руб)

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

6000 руб.

16.01.2015    62985    44    59    

82

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

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

2400 руб.

29.06.2020    18854    26    6    

41

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

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

1500 руб.

06.10.2020    10224    7    7    

10

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

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

20.08.2024    16796    mrXoxot    43    

121

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

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

27.05.2024    7349    smielka    37    

100

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

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

27.12.2023    14787    913    elcoan    47    

117

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

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

2 стартмани

10.04.2023    11913    162    acces969    31    

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

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

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


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

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