Однажды тихими вечером... Впрочем, отбросим литературные изыски. В нашей организации довольно много различных бизнес-процессов, которые различаются реквизитами, документами и при этом используют один вид задач для движения по точкам. Задачи показываются в одном списке, пользователи их видят, нажимают кнопочки, исполняют, все как обычно. Колонки в списке задач были жестко заданы, показывая информацию из различных процессов. До определенного момента, пока количество ключевых параметров в бизнес-процессах примерно соответствовало, это всех устраивало. Но в один "прекрасный" момент у нас появились задачи с неизвестным заранее количеством ключевых реквизитов (как пример сведения об исполнителях групповых задач) и список перестал устраивать. Попытка пойти по пути СКД не увенчалась успехом - слишком долго перерисовывалась картинка при обновлении. Динамический список в обычной форме отсутствует, а управляемую форму в обычном клиенте нельзя (или я не знаю как) закрепить на экране. Такие мелкие казалось бы недостатки привлекали внимание руководства и обе идеи забраковали. Остался один вариант - создать заполняемый HTMLДокумент. Опыт создания такого документа, а точнее способ избежать все ошибки, которые я совершил при его создании, предлагаю уважаемым читателям. Сразу отмазка ака дисклеймер. Все справедливо и проверено для windows и обычных форм. Динамические не тестировались, линукс тем более.
При написании списка использовалась публикация Инфостарта: Javascript и 1С. Кросс-платформенное взаимодействие. Спасибо автору и участникам дискуссии.
Итак, сначала советы, куда без них.
Совет первый: Обязательно ориентируйтесь на версии IE, установленные на клиентских машинах, которые предполагают использование вашей разработки. Фрик-шоу стандартов от Микрософт, которая как тот сержант, одна идет в ногу, изрядно подпортит вам кровь при написании. Все, что ниже 9 версии, сразу ставит крест на разработке, ибо кривая поддержка css и обработки событий делает трудозатраты непропорциональными выхлопу. У меня два основных браузера были IE10 и 11 и это уже вносило достаточно разнообразия в рутинный процесс программирования. Обязательная строка в заголовке, если вы не хотите скатиться во встроенный в 1С IE6:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Первые кавычки расскажут браузеру, что нужно использовать HTML5 по возможности, вторые заставят поддерживать самую новую версию браузера, установленную на компьютере.
Совет второй: Для общения с 1с используйте javascript глобальные переменные и JSON нотацию. Любая функция js нашего документа возвращает в 1с неинициализированный COMobject, который мы не можем обработать. Возможно есть способы обойти эту ситуацию, мне они неизвестны. Поэтому любой вызов функций HTML документа лучше делать в два приема: 1.Вызов функции, которая что-то запишет в переменную документа в виде строки json, затем обращение к этой строке.
Совет третий: По максимуму используйте события click и dblclick в 1с для получения данных, остальные же события инициируйте и обрабатывайте скриптами документа. И я объясню почему: Единственный вариант вызвать событие в 1с умер вместе с IE9. Это метод fireEvent. Он пробивал броню parentWindow и мог вызвать некое событие в 1С. Метод js document.dispatchEvent стартует событие на странице, но за пределы документа событие не выходит и в 1с его обработчик не срабатывает. Плюс большая часть событий, которые являются свойствами поля HTMLдокумента, давно отменены в стандартах HTML и не поддерживаются тем же IE11.
Совет четвертый: забудьте про новомодные стрелочные функции, хитрые врапперы и замыкания. Чем дубовее код, тем лучше. Нет, врапперы и замыкания существуют, но я даже боюсь предположить какой стандарт js поддерживают IE в различных изводах. Постоянно будете натыкаться на то, что те или иные приемы не работают. Например для меня открытием стало, что this в IE10 всегда обозначает глобальный контекст, даже если его запихнуть во враппер, а объявление переменной let работает вообще непонятно как.
Совет пятый, вытекающий из предыдущих: Никогда не забывайте про сайты типа mdn или w3Schools, на которых вы можете узнать какие методы поддерживаются той или иной версией браузера.
Итак, сама разработка html для работы с 1с.
Первое что я начал делать: css стили, чтобы переложить отрисовку элементов на браузер.
Сначала нам нужно опеределить стиль для контейнера, который будет содержать информацию о задаче. Поскольку тег div будет использоваться много где, то для контейнера определим отдельный класс.
Небольшое отступление: Все, что я сейчас делаю со стилями - это мой личный вкус, настройка вида списка и его элементов может быть какой угодно. Если результат вам не понравился, смело экспериментируйте.
//чтобы не расписывать, какие селекторы что обозначают,
//отправлю к справочнику по css https://www.w3schools.com/cssref/css_selectors.asp
.container {
-ms-user-select: none;
border: 2px solid transparent;
background-color: hsl(0, 0%, 95%);
border-radius: 10px;
padding: 10px 15px 10px;
margin: 10px 0;
cursor: pointer;
min-width:120px;
}
Определим определим чередование цветов для контейнера. Обратите внимание, я использую функцию hsl чтобы не заморачиваться с вычислением цветов. Берем один цвет, и просто меняем его яркость.
.container:nth-child(even) {
background-color: hsl(0, 0%, 90%);
}
Выделим рамкой элемент, на который указывает курсор
.container:hover {
border-color: hsl(0,0%,60%);
}
Для задач у нас выставлены приоритеты, которые определяются атрибутом контейнера priority. Будем выделять их цветом и подкрашивать контейнер разными оттенками в зависимости от чередования
.container[priority='1'] {
background-color: hsl(120, 92%, 90%);
}
.container[priority='1']:nth-child(even) {
background-color: hsl(120, 92%, 85%);
}
.container[priority='2'] {
background-color: hsl(203, 92%, 90%);
}
.container[priority='2']:nth-child(even) {
background-color: hsl(203, 92%, 85%);}
Устанавливаем стиль для заголовка контейнера.
.tooltip{
margin: 1px;
line-height: 0.9em;
color: hsl(0, 0%, 15%);}
Стиль для тега time. Поскольку он будет использоваться только для одной опции, определяем стиль для всего тега
time {
float: right;
color: #aaa;
}
Теперь добавим стиль таблицы, в которой будем выводить информацию о задаче.
table {
table-layout:fixed;
white-space: pre-wrap;
width:100%;
min-width:90px;
text-align: left;
margin: 10px 0px;
border-collapse: separate;
border-spacing: 5px;
background: transparent;
color: #656665;
border: transparent;
}
Определим стиль ячеек и заголовков таблицы.
table th {
font-size: 12px;
padding: 1px;
margin: 1px;
}
table td {
font-size: 12px;
background: #fff;
padding: 5px;
}
И добавим описание стиля содержимого ячеек. В ячейки таблицы я вкладываю контейнеры div, потому что для ячеек <td> есть ограничения по настройке стиля.
table div{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
}
Теперь нужно добавить всплывающую подсказку, на случай если содержимое не влезает в ячейку (в самой ячейке текст будет забиваться точками). Обратите внимание на z-index. Он нужен, чтобы всплывающая подсказка оказалась поверх всех элементов контейнера.
table td span {
display: none;
position: absolute;
z-index:2;
background-color: cornsilk;
color: inherit;
margin: 10px 0;
text-align: center;
border-radius: 6px;
padding: 8px 0;
}
td:hover span {
display: block;
}
table div{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
}
Добавим описание контекстного меню. Само меню не должно быть привязано к элементу и должно быть поверх всех элементов, поэтому установим position:fixed и z-index:99;
.contmenu {
position:fixed;
background-color: hsl(240, 20%, 92%);
list-style-type: none;
margin: 0px;
float:right;
padding: 5px 5px 5px 0px;
border-radius: 6px;
z-index:99;
font-size:medium;
white-space: pre-wrap;
}
Выбранные пункты меню нужно выделять:
.contmenu>li {
background-color: hsl(240, 20%, 95%);
margin: 0px 0px 1px 15px;
padding: 10px 30px 10px 10px;
}
.contmenu>li:hover{background-color: hsl(240, 20%, 80%); color:white}
Получившийся результат выглядит так:
Вступайте в нашу телеграмм-группу Инфостарт