Виджеты 1с как сделать
Сегодня мы создадим простой, но функциональный виджет для 1С:Предприятия, который будет показывать количество активных пользователей в базе. Главной его особенностью будет асинхронное взаимодействие с базой, что позволит выполнять обновление виджета без блокировки основного интерфейса приложения.
Больше года назад сайт был закрыт. Некоторые из его материалов будут реанимированы на Инфостарт.
Хоть материал и был создан в далеком 2015 году, но описанные подходы до сих пор применимы при разработке. Конечно, сейчас уже обновилась работа поля HTML-документа и появились некоторые другие крутые возможности платформы 1С, но это в основном частности. Все предложенные способы создания виджетов не единственные, в конце статьи Вы найдете ссылки на связанные публикации с другими работами коллег.
Виджет
В качестве примера подхода при работе с HTML-виджетами можно продемонстрировать конфигурацию 1С:Документооборот 2.x, где в обработке "Текущие дела" создана форма для отображения различных виджетов с данными о моих задачах, задачах отдела, созданных документах, редактируемых файлов и т.д. Замечательная реализация и в плане функционала, и в плане юзабилити интерфейса, но есть один минус. Обновление виджетов происходит, конечно же, через синхронную контекстную серверную процедуру, что означает передачу на сервер всей формы, получение там данных, перенос их в форму и затем возвращение ее на клиент.
Проще говоря, для обновления виджетов необходимо выполнять синхронный серверный вызов, на время которого выполняется блокировка пользовательского интерфейса. Кто знает, может в новых версиях 1С:Документооборот эта ситуация уже изменилась.
При эксплуатации системы была замечена серьезная проблема - если включить автообновление виджетов, то при вызове серверной процедуры обновления подвисал весь интерфейс приложения пока оно ожидало ответа от сервера. Пользователи жаловались на частые подвисания интерфейса в самый не подходящий момент.
Конечно, есть достаточно простой выход - не использовать автообновление или оптимизировать процедуру обновления данных виджетов. Но это не самый оптимальный путь, ведь обновление виджетов может быть для кого-то критичным, а оптимизация получения данных и заполнения виджетов не избавит нас от контекстного серверного вызова и периодической блокировки интерфейса.
Мы пойдем другим путем и решим задачу двумя способами:
Оба способа имеют плюсы и минусы, которые мы рассмотрим. И так, поехали!
Подготовка
Не буду создавать интригу и сразу покажу результат, который мы добьемся проделав шаги, описанные далее.
Как Вы можете заметить, обновление виджета выполняется автоматически без блокировки пользовательского интерфейса.
На форме виджет добавлен в качестве поля HTML-документа, которое используется и для обновления через фоновые задания, и для обновления с помощью AJAX-запросов. Количество активных пользователей определяется по количеству активных сеансов с помощью следующей функции, расположенной в общем модуле "ВиджетыСервер" (серверный, вызов сервера):
Также добавлена общая форма "ВиджетАктивныеСеансы" с помещенным на нее полем HTML-документа, в которое будет помещаться содержимое виджета. Эта форма добавлена в рабочую область начальной страницы, чтобы при запуске сеанса пользователя виджет сразу же открывался. Ничего особенного в ней нет, только полей HTML-документа (см. выше).
Теперь рассмотрим подробнее каждый из способов.
Фоновые задания
Механизм фоновых заданий предназначен для асинхронного выполнения каких-либо операций. Этот механизм используется повсеместно. В конфигурации "Библиотека стандартных подсистем"реализована подсистема "Длительные операции", предназначенная для запуска каких-либо операций в фоновых заданиях. В свою очередь БСП внедрена практически во все новые конфигурации от фирмы "1С", поэтому использовать ее можно без особых проблем. На Инфостарте можно посмотреть пример использования этой подсистемы.
Мы реализуем собственный функционал по выполнению асинхронных операций в фоновых заданиях, потому что внедрять для демонстрации примером БСП было бы не разумно =). Но для рабочих задач БСП конечно же правильный выбор.
Запуск и отслеживание
Для запуска и отслеживания запущенных фоновых заданий был реализован небольшой функционал. В конфигурацию добавлены четыре общих модуля:
Идея добавления своих маленьких элементов отображения информации (виджетов) в интерфейс информационных систем сейчас популярна как никогда. Все чаще у пользователей возникает потребность дополнить свой интерфейс небольшими добавлениями, которые наиболее выразительно покажут информацию, покажут именно так, как хочется, не занимая при этом много места. Давайте разберемся, какие возможности для этого предоставляет нам система 1С.
Какие элементы 1С мы можем использовать в качестве виджетов?
Так почему же нам так захотелось сделать что-то по-другому?
Причин может быть множество, начиная от какого-то мелкого улучшения, которое не может дать нам стандартный интерфейс 1С – что-то, что сделано чуть-чуть по-другому, чуть-чуть не так, когда то, что хочет заказчик, нельзя реализовать средствами 1С, и до любимой кнопки заказчика «Сделать все».
Конечно, для расширения интерфейса чаще мы обычно используем объекты внутри 1С, такие как:
- Табличное поле;
- Графическая схема;
- Географическая схема;
- Поле картинки.
Причем мы можем их использовать не только по прямому назначению, как рекомендует 1С, мы также можем использовать и какие-то нестандартные практики.
К примеру, среди разработчиков 1С очень популярно табличное поле. Оно очень хорошо отлажено и используется практически везде. Диаграмма Ганта на табличном поле очень хорошо работает.
Но сегодня мы все-таки поговорим про специфическое поле внутри 1С - прополе HTML. Мы попробуем разобраться, как его можно использовать для того, чтобы привнести в интерфейс 1С какую-то изюминку (обратите внимание, на скриншоте показан пример, взятый с сайта 1С – уних тоже была когда-то такая задумка).
Поле HTML документа и его особенности
Тот, кто говорит, что облако – это не для него, мягко говоря, не прав. Если компьютер в интернете – все, вы в облаке.
Чем же хороши интернет-технологии?
- Во-первых, они основаны на стандартах, которые исходят от независимого источника, а значит, они не зависят от конкретного производителя.
- Во-вторых, они обладают кросс-платформенностью.
- И, наконец, у них огромная распространенность. Я думаю, вы прекрасно представляете, что эта распространенность гораздо больше, чем у 1С.
А что мы имеем для поля HTML в 1С?
- В версии 1С дляWindows и в тонком, и в толстом клиентеполе HTML – этоActiveX. Хоть 1С нам и говорит, что у нее ActiveX уже нет, мы можем легко проверить, что даже в самой последней версии тонкого клиента поле HTML – это ActiveX.
- Поле HTMLработает в режиме совместимости.
- Хуже того, этот режим совместимости не является чисто IE6, IE7, IE8 и т.д. – там своя реализация.
- И самое главное, поле HTML обладает низкой производительностью по отношению к современным браузерам.
Обратите внимание на такую особенность: если мы запустим в HTML-поле простейший JavaScript-код, выводящий версию движка, то мы увидим, что этот код выполняется два раза – происходит двойная инициализация.
Как видите, согласно полученной здесь информации, движок HTML-поля соответствует версии браузера IE7.
Я думаю, многие из вас уже знают, что есть «волшебная палочка», позволяющая «обмануть» этот движок и заставить его работать в режиме совместимости с конкретной версией (IE=8 или IE=9, или IE=edge – это последний, можно установить более точно, кто как хочет), это метастрока:
Но даже она не всегда помогает.
В частности, вы можете здесь увидеть, что из-за этой двойной инициализации версия движка все равно сбрасывается на первоначальную:
- Первая инициализация нам говорит, что у нас IE11;
- А вторая вам все равно выдаст IE7. Это значит, что стилевое оформление начнет работать в режиме IE11, но основной контекст (когда вы нажимаете кнопочки) все равно будет работать в старом режиме.
Мы все, конечно, ругаем Windows, и надеемся получить идеальную картину в Linux. Но и там своя специфика:
- Например, компания 1С до сих пор не давала точных данных о том, какой движок webkit они используют.
- Смещения внутри поляHTML у нихотличаются.
- И координаты мыши там также отличаются (если кто пробовал, заметил).
- Соответственно, вы получаете неидентичность работы вWindows-клиенте и вLinux-клиенте.
А что нам говорит сама документация по 1С? Если идентичность не достигнута, виноват разработчик. И это – та идеология, которую нужно принять для того, чтобы двигаться дальше. Вы, как разработчик, должны продумать все тонкие моменты так, чтобы у вас все четко работало.
Если у вас все еще осталось желание работать с полем HTML, я предлагаю один из возможных способов улучшения нашего интерфейса.
Инструмент для улучшения работы HTML-поля
Для улучшения работы HTML-поля вы можете использовать универсальную библиотеку Raphael, запускающую код JavaScript внутри 1С.
Библиотека Raphael обладает следующими преимуществами:
- Она полностью поддерживает старые версии браузеров – работает в старых версиях IE, в GoogleChrome, вFireFox, и даже внутри 1С в Linux-клиенте.
- Не зависит от внешних библиотек, даже от jquery.
- Имеет достаточно малый размер.
- Очень популярна: можно в интернете найти сайты с описанием документации, и как она работает.
- А также она имеет полностью открытую лицензию использования. За это надо благодарить разработчика этой библиотеки.
Что мы получаем при ее использовании?
Мы получаем те преимущества, которые по умолчанию имеют веб-разработчики. Например, мы можем использовать современные технологии изменения элементов через их трансформацию.
Взаимодействие с пользователем по технологии HTML-контейнера
Как мы можем взаимодействовать с пользователем, используя поле HTML?
- В противовес продвижению у 1С технологии клиент-серверного взаимодействия;
- При использованииHTML-поля мы приходим к технологииHTML-контейнера внутри клиента 1С.
Жизнь внутри этого контейнера полностью зависит от вас:
- Внутреннее наполнение делаете полностью вы.
- Реакцию на внешние события определяете тоже вы.
- И, соответственно, конфликты с 1С тоже разбираете вы.
Здесь вы можете видеть пример графика, построенного на HTML-поле с использованием этой технологии.
Взаимодействие с 1С
Хочу остановиться на особенностях взаимодействия с 1С.
- В управляемых формах нам оставили один-единственный метод интерактивного взаимодействия – это метод «ПриНажатии».
- Нам кажется, что нас полностью ограничили и ничего нам не дали. Это не совсем так. Мы можем использовать один из интересных методов, который заключается в обработке событий ПриНажатии для невидимых элементов. Например, в концепции 1С, если мы ставим галочку «невидимый» в интерфейсе, то на клиенте мы вообще не получаем этого элемента, сервер просто не передает его на клиент. Это факт. А в интернет-технологиях, в отличие от 1С, невидимые элементы присутствуют в интерфейсе и могут использоваться для взаимодействия с пользователем. Он имеет свойства, и он может генерировать события. В частности, мы можем использовать событие для эмуляции внешних событий от нашего HTML-поля.
- Внутри этой эмуляции, соответственно, мы можем передавать данные. Самое простое – это передавать их строкой.
- Если вам необходима более сложная передача данных, вы можете использоватьJSON. В последних версиях JSON встроен в платформу. Если у вас менее новая версия, то благодаря Инфостарту вы тоже можете использовать JSON полностью.
Проблемы быстродействия
Однако самая главная проблема, с которой вы столкнетесь при использовании технологииHTML-контейнера, – это проблема быстродействия.
Все остальные проблемы (несовместимость, неправильная компоновка, чуть-чуть различное выполнение скриптов), так или иначе, технологически преодолимы. А проблема именно быстродействия внутри 1С – очень существенна. Сделать так, чтобы содержимое поля HTML внутри самой 1С было сложным, все делало интерактивно, и при этом работало быстро, нельзя. Поэтому, когда вы захотите получить свой результат, вам нужно будет сразу же заложить эти риски на уровне архитектуры решения и вовремя предупредить клиента: «Можно использовать веб-клиент – там все работает, все хорошо. А внутри 1С у нас, к сожалению, старый элемент. Поэтому там долгая инициализация и низкая скорость».
При этом важно подчеркнуть, что под низкой скоростью подразумевается скорость по отношению к современным браузерам. Просто технологии развиваются быстрее, чем мы можем за ними успеть.
Данная статья написана по итогам доклада, прочитанного на конференции INFOSTART EVENT 2015 CONNECTION 15-17 октября 2015 года.
По умолчанию на начальную страницу Системы выведено окно «Текущие дела».
«Текущие дела» представляют собой набор настраиваемых виджетов.
« Виджеты » – это блоки информации, которые показывают актуальное количество текущих или просроченных работ по конкретной теме.
Задачи мне
Это один из самых важных виджетов, с которого, как правило, начинается рабочий день каждого сотрудника.
На виджет вынесена следующая информация:
- общее число задач пользователя (в заголовке) (1);
- количество задач, еще не принятых к исполнению (2);
- количество просроченных задач (3).
Переход по гиперссылке « Задачи мне » в заголовке ведет в список всех текущих задач сотрудника (1).
Переход по гиперссылке с количеством непринятых задач ведет в список «Задачи мне» с отбором непринятых задач (2).
Переход по гиперссылке с числом просроченных ведет в список «Задачи мне» с отбором просроченных задач (3).
Из меню можно создать процесс и перейти в список «Мои процессы» (4) .
Календарь
Показывает общее число запланированных событий и дает гиперссылки на предстоящие мероприятия. Благодаря этим цифрам сотрудник может предварительно оценить степень своей загруженности перед переходом к детальной информации в записях календаря.
На виджет вынесена следующая информация:
- общее количество записей календаря на предстоящий месяц (в заголовке) (1);
- список четырех ближайших событий пользователя (2).
Перейдя по гиперссылке, можно посмотреть «Мой календарь» на несколько дней, две недели, месяц или раскрыть подробный план дня (1).
Из меню виджета можно создать новую запись календаря (3).
Задачи отдела
Показывает руководителю актуальное количество задач, над которыми работают его подчиненные, сколько просроченных задач они успели накопить и сколько задач еще не приняли:
- число задач подчиненных (в заголовке) (1);
- число не принятых задач подчиненных (2);
- число просроченных задач подчиненных (3).
Переход по гиперссылке в заголовке виджета открывает список «Задачи отдела» . Это полный список задач как непосредственных подчиненных руководителя, так и подведомственных им отделов (1).
Переход по гиперссылке с количеством непринятых задач ведет в список « Список не принятых задач подчиненными » с отбором непринятых задач (2).
Переход по гиперссылке с числом просроченных задач ведет в отчет « Список истекающих задач подчиненных» (3) .
Из меню можно создать процесс и перейти в список «Мои процессы» (4) .
Мои документы
Показывает общее число документов, относящихся к текущему пользователю.
На виджет вынесена следующая информация:
- общее количество документов пользователя (в заголовке) (1);
- число документов с истекшим сроком действия (документы, допускающие продление) (2);
- число документов, срок исполнения которых истекает в ближайшие два дня (неисполненные документы) (3);
- число документов с истекшим сроком ответа (отсутствуе т связь « Получен ответ» ) (4).
Переход по гиперссылке в заголовке виджета открывает список «Мои документы» (1) .
Переход по гиперссылке с количеством просроченных документов открывает список « Мои документы» с отбором по срокам (2).
Переход по гиперссылке с числом документ ов б ез ответа ведет в отчет « Мои документы, ожидающие ответа» (3) .
Переход по гиперссылке с числом истекающих документов – в список « Мои документы» с отбором по истекающим срокам (4).
Из меню виджета можно создать новый входящий, внутренний или исходящий документ (5).
Я редактирую
Захватить файл для редактирования может только один пользователь. При этом для остальных сотрудников файл будет заблокирован от изменений до тех пор, пока пользователь не сохранит его новую версию.
Показывает гиперссылки на файлы, занятые текущим пользователем для редактирования. Гиперссылки ведут в соответствующие карточки файлов (2).
Переход по гиперссылке в заголовке виджета откроет полный список редактируемых файлов, с которыми пользователь работает в данный момент (1).
Из меню виджета можно открыть спис ок « Файлы» (3) .
Отсутствия
Показывает сведения об отсутствующих в настоящий момент сотрудников с учетом отборов.
Переход по гиперссылке в заголовке открывает список отсутствий со всеми установленными прежде отборами (1):
- работающие удаленно (желтый значок);
- другие причины отсутствия (красный значок);
- только не работающие удаленно (без значка).
Из меню виджета можно создать новое отсутствие (2) .
Контроль
Показывает сведения о количестве задач, документов, файлов, писем, процессов, мероприятий или проектов, которые пользователь поставил на контроль.
На виджет вынесена следующая информация:
- общее количество контрольных карточек пользователя (в заголовке) (1);
- количество карточек с истекшим контрольным сроком (2);
- ссылки на контрольные карточки с действующим контрольным сроком (3).
Переход по гиперссылке в заголовке и числу карточек с просроченным сроком контроля ведет в окно «На контроле» (1-2) .
Из меню виджета можно добавить новую контрольную карточку (4).
Каждый пользователь может настроить состав окна «Текущие дела» исходя из своих предпочтений.
Для этого в меню каждого виджета предусмо трена команда « Настроить виджет » .
Кнопка открывает помощник настройки, в котором можно выбрать один из предложенных виджетов:
В качестве настройки программа попросит указать пороговые значения показателей виджета, на которые нужно обратить ваше внимание.
Например, если у пользователя накопится больше десяти непринятых задач, на видж ете « Мои задачи » это число будет выделено красным цветом.
По умолчанию окно « Текущие дела» автоматически не обновляется
Чтобы обновить данные окна « Текущие дела» необходимо нажать кнопку « Обновить» или настроить автообновление по соответствующей гиперссылке в нижней части окна.
Для настройки автообновления необходимо выбрать временной интервал обновления и нажать кнопку « Установить».
Перед вами расширение конфигурации "1С Бухгалтерия предприятия" редакции 3.0, которое содержит шаблоны пользовательских блоков для информационной панели. Мне больше нравиться называть это "виджеты". С помощью этого расширения вы можете сделать от одного до трех собственных виджетов. Вот как это выглядит:
На скриншоте два левых виджета пользовательские. Их можно адаптировать под себя. Пример такой адаптации виджет "Курсы валют". При старте конфигурации отображаются курсы трех валют. Информацию виджет берет из регистра конфигурации "Курсы валют". Ниже скриншот настроек блоков информационной панели. Красным подчеркнуты пользовательские виджеты.
Расположение: РасширениеКонфигурации - общий модуль БлокиИнформационнойПанели Установите возвращаемое значение метода в Истина если виджет доступен или Ложь если недоступен.
Наименование виджета
Наименование виджета в "Настройке информационной панели" определяется методом:
Пример, смотри на скриншоте выше. Расположение: РасширениеКонфигурации - общий модуль БлокиИнформационнойПанелиКлиентСервер. Наименование виджета обычно, но не обязательно используется как значение заголовка информационного блока.
Способ обновления данных
Расширение к стандартному способу обновления данных виджетов добавляет альтернативный способ обновления данных.
Стандартный способ обновление данных срабатывает при наступлении событий:
- запуск конфигурации
- смена организации на информационной панели
- нажатие на кнопку "Обновить"
- по прошествию суток после последнего обновления, если конфигурация не выгружалась
Альтернативный способ обновление данных срабатывает при наступлении событий:
- все события стандартного способа
- по тайм-ауту с помощью обработчика ожидания
В расширении тайм-аут установлен равным 15 минутам. Значение можно изменить, установив переменную модуля:
Расположение: РасширениеКонфигурации - модуль формы ИнформационнаяПанель. Переключение между способами обновления данных выполняется с помощью переменной модуля:
Расположение: РасширениеКонфигурации - модуль формы ИнформационнаяПанель Если значение Истина то работает альтернативный способ обновления, если Ложь то работает стандартный способ.
Информация виджета
Для того, чтобы отобразить на вашем виджете информацию требуется выполнить следующую последовательность действий:
- Разместить на форме РасширениеКонфигурации - форма ИнформационнаяПанель реквизиты, которые будут программно заполнены данными. Тип реквизита: ФорматированнаяСтрока.
- Расставить реквизиты и иные элементы формы в блоке виджета.
Блок информационной панели (виджет) состоит из системных элементов, которые требуются подсистеме "Информационная панель" и пользовательских элементов, которые и определяют смысл виджета.
Рассмотрим дизайн на примере блока 31. Контейнер который содержит этот виджет выделен фиолетовым цветом. Контейнер состоит из групп и элементов. Пользовательские элементы на скриншоте выделены зеленым и должны располагаться в группе "ПОЛЬЗ3Х_Отступ". Сама же группа "ПОЛЬЗ3Х_Отступ" является системной и не должна подвергаться модификации. Пользовательские элементы и группы могут иметь произвольное наименование. Группировать свои элементы вы можете самостоятельно. Размер контейнера не более 30*12 символов. Служебный элемент "ДекорацияХ" требуется для выравнивания элементов по верхнему краю блока.
- Если виджет имеет элементы управления, разместите на форме команды и их обработчик.
- Установите наименование виджета в методе ТекстЗаголовкаПОЛЬЗХ(), который располагается РасширениеКонфигурации - общий модуль БлокиИнформационнойПанелиКлиентСервер
- Включите доступность виджета с помощью метода ПОЛЬЗХ_Доступен(), который располагается РасширениеКонфигурации - общий модуль БлокиИнформационнойПанели
- Опишите свойства вашего виджета в методе СвойстваПОЛЬЗX(), который распологается РасширениеКонфигурации - общий модуль БлокиИнформационнойПанели. Свойства, определенные в этом методе должны соответствовать реквизитам формы из п.п. 1. Пример реализации:
Метод должен возвращать строку со свойствами через запятую.
Аргумент функции структура с данными:
Итого
Я надеюсь на появление моря полезных, нужных и просто прикольных виджетов. От прогноза погоды и курса Биткоина до списка именинников и музыкального плеера. Дерзайте. Присылайте ссылки на ваши виджеты и я включу их в эту статью.
Настраиваемые виджеты на начальной странице, своеобразная панель для быстрого доступа к объектам. Виджеты это элементы интерфейса в виде цветных прямоугольников со ссылками на объекты конфигурации. Использование виджетов позволяет сконцентрировать на начальной странице часто используемые функции, например, варианты отчетов, списки документов, или используя виджет вводить новый документ прямо из начальной страницы.
Функционал
Расширение для бухгалтерии добавляющее на начальную страницу область, в которой доступно размещение до 12 виджетов (4 вертикальных ряда и 3 горизонтальных). За идею взята обработка "Текущие дела" из конфигурации Документооборот 2, там конечно это выглядело "повеселее" графики, счетчики.
Сетка виджетов фиксированная 4 на 3, размеры тоже. Настройки виджетов у каждого пользователя свои.
Для добавления виджета необходимо ткнуть мышкой в центр пустой области виджета, в значек добавления (бледноватая картинка плюсик в кружочке , которая появляется при активизации области без виджета).
Для удаления или изменения виджета необходимо ткнуть в значек контекстного меню на виджете (трегугольник вниз) и выбрать пункт "Настроить виджет. ".
Доступны следующие виджеты:
- Объект конфигурации (справочник, документ, отчет, обработка и прочие). Для отчетов доступна настройка любого варианта. Для ссылочных объектов доступны варианты использования "Открыть форму списка" и "Ввести новый элемент".
- Объект расширений. Отчеты или обработки из расширений подключенных к конфигурации. Для отчетов доступно использование вариантов.
- Дополнительный отчет или обработка. Из справочника "Дополнительные отчеты и обработки". Для отчетов доступно использование вариантов.
Требования
Бухгалтерия предприятия для России, редакция 3.0 (3.0.49.21) или выше. Совместимость с ранними версиями не тестировалась, но возможно имеет место быть.
Толстый, тонкий клиент. В web-клиенте тоже работает, но там несколько кривоваты кнопки. Теоретически расширение должно заработать на любой конфигурация, основанной на БСП версии 2.3 в режиме совместимости "Версия 8.3.8".
Читайте также: