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

29.09.21

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

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

Введение

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

 
 Верстка интерфейса для мобильного приложения 1С

Задача

Реализовать нижнее меню для мобильного приложения на 1С.

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

Для экспериментов сделал пример в VS Code с которым будем работать:

Использовались следующие версии 1С:

  • Платформа: 8.3.17.1496
  • Мобильная платформа: 8.3.16.142

Ссылка на все исходники и материалы будет в конце статьи также будут приводиться только ключевые моменты по коду, остальное сможете самостоятельно изучить за чашечкой чая.

Анализ верстки

В исходниках на GitHub нужно обратить внимание на следующие моменты:

  • Файл index.js: используются стрелочные функции, они в 1С не будут работать поэтому, когда будем переносить на 1С, нужно будет переделать под обычные функции.
 
 Про стрелочные функции
  • Файл index.html: в теге script используется атрибут defer, он также не будет работать в 1С т.к. атрибут defer предназначен только для внешних скриптов и для учебного примера содержимое скрипта полностью будет внутри тега. 
 
 Про defer

Рассмотрим структуру HTML учебного примера в классическом варианте:

 
 Структура HTML в классическом варианте

Содержимое тегов div с классом title и footer__inner нужно будет менять. 

Первый метод

Идея данного метода заключается в формировании HTML структуры с помощью JavaScript. Примерная логика:

  1. формирует строку JSON с данными
  2. Передает сформированную строку в функцию JavaScript, которая преобразует ее в массив с объектами
  3. Формируем HTML и меняем содержимое с помощью JavaScript функций

В итоге на стороне остается только сформировать строки в формате JSON, передать их в нужные функции и вызвать функции JavaScript для изменения структуры HTML

Возвращаемся к исходникам на GitHub и проанализируем основные файлы, там можем увидеть вариант формирования HTML структуры с помощью JavaScript:

  1. Файл index.html. Тег body пустой
  2. Файл index.js. У нас есть переменная footerMenuJSON, которая содержит пункты меню в формате Json. Данная строка передает функцию setItemsMenu, которая преобразует ее в массив с объектами. Далее вызываются две функции для отрисовки main (generateMain()) и footer (generateFooter())
 
 index.js (часть кода) 

Переходим к . В исходниках файл с конфигурацией первого метода называется mobile1c_adapt_js.cf. В конфигурации добавлена единственная обработка на форме которой расположено ПолеHTML и реквизит формы с типом строка, с аналогичным названием. Код формы рассмотрим ниже:

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
	ПодключитьОбработчикОжидания("ПослеОткрытия", 1, Истина);	
КонецПроцедуры

&НаКлиенте
Процедура ПослеОткрытия()
	
    Документ         = ЭтаФорма.Элементы.ПолеHTML.Документ; 
    ДанныеНижнееМеню = ОбщегоНазначенияВызовСервера.НижнееМенюJSON();

    Документ.defaultView.setItemsMenu(ДанныеНижнееМеню);
    Документ.defaultView.generateMain(); 
    Документ.defaultView.generateFooter();

КонецПроцедуры;

В процедуре СформироватьСтраницу получаем стартовою структуру HTML, которая заполнена по шаблону.

 
 Шаблон HTML

Первая проблема, которая возникает, это невозможность вызвать функции JavaScript ПриОткрытии формы т.к. они еще не доступны. Для обхода данной проблемы используется обработчик ожидания. За все остальное дальше будет отвечать JavaScript.

Плюсы

  1. Большая часть логики для работы с HTML размещена в JavaScript. Для 1Сника все сводится к правильному формированию строк Json и вызову нужных функций JavaScript, как работа с каким-либо api. Данный подход будет удобен если версткой и адаптацией под 1С занимаются разные люди.
  2. Интерфейс более плавно перерисовывается по сравнению, если структура формировалась и изменялась на стороне 1С (об этом в след методе).

Минусы

  1. На конкретном примере пришлось подключать обработчик ожидания, чтобы отрисовать начальную страницу, эта задержка заметна в пользовательском режиме. Но она связана с особенностью, что данные  пунктов меню хранятся в справочнике в мобильном приложении, альтернативой можно забирать эти данные сразу с сервера методами JavaScript (если они будут работать в ) или формировать начальные пункты в начальной структуре HTML.
  2. Отладка. Т.к объем кода JavaScript заметно увеличится при таком методе, вы можете столкнутся с проблемой, когда итоговая строка HTML будет на столько большая, что при попытке открыть ее в конфигураторе он будет зависать, а при копировании строки из окошка ниже она может обрезаться. С данной проблемой вы так же можете столкнуться если подключаете много дополнительных компонентов JavaScript.  Предполагаю, что данный метод Инструменты отладки Web-страниц в приложении на устройстве Android позволяет обойти данную проблему (не тестировался).

Второй метод

Он основывается на подходе описанным в статье Асинхронный обмен данными с JavaScript (и не только) без потерь.

Данный метод был изучен на занятии по разработке HTML интерфейса, автор Илья Низамов (ютуб).

Несколько полезных статей на взаимодействия 1С и JavaScript:

В исходниках файл с конфигурацией второго метода называется mobile1c_adapt_1c.cf.

Здесь шаблон HTML в выглядит по-другому:

 
 Шаблон HTML

Добавляется функция для формирования пунктов меню:

Функция ПолучитьМеню(ВыбранID = "") Экспорт
	
	ШаблонПункта = "
	|<a href=""%1"" class=""footer__item %4"" on click=""paramChange('menu', '%2')"">
	|<img src=""%3"" class=""footer__icon"">
	|</a>";
	
	Меню = "";
	МассивПунктов = ОбщегоНазначенияВызовСервера.ПунктыМеню();
		
	Для Каждого СтрокаПункт Из МассивПунктов Цикл
		
		Если (ВыбранID = "" И СтрокаПункт.active) 
			ИЛИ ВыбранID = СтрокаПункт.id 
		Тогда
			ДопКласс = "footer__item--focus";
		Иначе
			ДопКласс = "";
		КонецЕсли;	
			
		Меню = Меню + СтрШаблон(ШаблонПункта, СформироватьСсылку(СтрокаПункт.id), СтрокаПункт.id, 	
			СтрокаПункт.icon, ДопКласс);
			
	КонецЦикла;
	
	Возврат Меню;
	
КонецФункции

В строке on click=""paramChange('menu', '%2')""> умышленно поставлен пробел т.к редактор текста на инфостаре вырезает данный кусок.

Рассмотрим код формы обработки, на которой расположено ПолеHTML:

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормыКлиент.СформироватьФорму(ПолеHTML, ЭтаФорма);
	ПодключитьОбработчикОжидания("ПолучитьИОбработатьДанные", 1);
КонецПроцедуры

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	СтандартнаяОбработка = Ложь;
	ПолучитьИОбработатьДанные();
КонецПроцедуры

&НаКлиенте
Процедура ПолучитьИОбработатьДанные() Экспорт
	
	Документ = ЭтаФорма.Элементы.ПолеHTML.Документ; 
	Если Документ = Неопределено Тогда
		Возврат;
	КонецЕсли;
	
	Пока ОкноДокумента.queueHead < ОкноДокумента.queueTail Цикл 
		Данные = ПрочитатьДанныеИзJSON(ОкноДокумента.getEvent(ОкноДокумента.queueHead + 1));
		ОкноДокумента.queueHead = ОкноДокумента.queueHead + 1;
		Если Данные = Неопределено Тогда
			Возврат;	
		КонецЕсли; 
		
		Если НЕ Данные["menu"] = Неопределено Тогда
			ОбработатьМеню(Данные["menu"]);
		КонецЕсли; 
	КонецЦикла; 
	
КонецПроцедуры 

&НаСервереБезКонтекста
Функция ПрочитатьДанныеИзJSON(СтрокаJSON)
	Результат = ОбщегоНазначения.ПрочитатьСтрокуJSON(СтрокаJSON);
	Если ТипЗнч(Результат) = Тип("Строка") Тогда
		Возврат ОбщегоНазначения.ПрочитатьСтрокуJSON(Результат);
	Иначе
		Возврат Результат;
	КонецЕсли; 
КонецФункции

&НаКлиенте
Процедура ОбработатьМеню(Данные)

	Документ = ЭтаФорма.Элементы.ПолеHTML.Документ; 
	Если Документ = Неопределено Тогда
		Возврат;
	КонецЕсли;
	ЗаголовокСтраницы = html.ПолучитьЗаголовок(Данные);
	Меню              = html.ПолучитьМеню(Данные);
	
	html.ВставитьВHTML(Документ, ".title", ЗаголовокСтраницы);
	html.ВставитьВHTML(Документ, ".footer__inner", Меню);
	
КонецПроцедуры

Код процедуры ВставитьВHTML:

Процедура ВставитьВHTML(document, querySelector, htmlText) Экспорт
	Selector = document.querySelector(querySelector);
	Selector.innerHTML = htmlText;
КонецПроцедуры

Принцип работы:

  1. Все пункты меню и заголовок формируются в начальной структуре HTML в процедуре СформироватьФорму
  2. Каждому пункту меню присваивается событие клика on click=""paramChange(Имя, Значение)"
  3. Функция paramChange создает объект из параметров, который передает в функцию pushEvent
  4. Функция pushEvent добавляет объект в массив очереди queue
  5. На стороне 1С в процедуре ПолучитьИОбработатьДанные получаем значения из очереди и обрабатываем в зависимости от ключа
  6. В процедуре ОбработатьМеню выполняем замену содержимого блоков с классом title и footer__inner

Основной минус метода, что он не отрабатывает в веб клиенте.

Заключение

В заключение можно посмотреть видео с демонстрацией результата каждого метода:

На видео не так заметно, что первый вариант работает более плавно и быстрее. Пользователи, которые принимали участие в тестирование замечали разницу и определяли более быстрым первый вариант.

Объемы нашего приложения пока не такие большие и визуальная разница пока не настолько заметна.

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

UPDATE

05/11/20

Внесем следующие улучшения для первого метода:

1) Откажемся от обработчика ожидания. Будем использовать обработчик события ПолеHTML ДокументСфомирован (Спасибо Владимиру Голованову):

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
КонецПроцедуры

&НаКлиенте
Процедура ПолеHTMLДокументСформирован(Элемент)
	
    Документ         = ЭтаФорма.Элементы.ПолеHTML.Документ; 
    ДанныеНижнееМеню = ОбщегоНазначенияВызовСервера.НижнееМенюJSON();

    Документ.defaultView.setItemsMenu(ДанныеНижнееМеню);
    Документ.defaultView.generateMain(); 
    Документ.defaultView.generateFooter();

КонецПроцедуры

2) Начальное формирование пунктов меню сделаем при формирование начальной структуры:

Функция ПолучитьСкрипт() Экспорт
	
    ДанныеНижнееМеню	= ОбщегоНазначенияВызовСервера.НижнееМенюJSON();
	
    Текст =  "'use strict'
    |let footerMenuJSON = `" + ДанныеНижнееМеню + "`
    ...
    ...
    ...
    |setItemsMenu(footerMenuJSON)
    |generateMain()
    |generateFooter()
    |";
&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ФормаКлиент.СформироватьСтраницу(ПолеHTML, ЭтаФорма);
КонецПроцедуры

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

Ссылка на все исходники и материалы

Мой список. Управляй своими заметками. JavaScript внутри 1С

Приложение доступно в Play market

Следите за проектом в телеграмм канале ovmst

1C:Список

ver 1.0

ver 1.1

Другие материалы, которые могут вас заинтересовать:

приложение интерфейс html javascript мобильное мобильная платформа полеHTML webkit css js

См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн. Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

2880 руб.

03.12.2018    54617    137    102    

161

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 9900 руб.

27.12.2021    33281    80    157    

174

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный терминал сбора данных для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    91947    511    186    

293

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

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

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

6000 руб.

16.01.2015    61797    43    59    

80

Магазин 15 - приемка товара по штрихкодам или инвентаризация в торговом зале

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

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

12950 руб.

30.05.2023    3388    2    0    

4

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

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

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

5000 руб.

14.01.2016    54403    16    21    

42

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

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

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

2400 руб.

29.06.2020    16698    21    4    

35
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Diversus 2306 02.11.20 10:40 Сейчас в теме
(0) Отличная статья. Мне вот интересно, можно ли перенести что-то типа FancyTree на 1С с синхронизацией справочника с этим деревом?
Меняем данные в FancyTree, меняются данные в справочнике. А при открытии FancyTree отображал данные справочника.
Т.е. по сути замена динамическому списку или дереву через js.
Как думаете, возможно такое в принципе?
Прикрепленные файлы:
3. leobrn 614 02.11.20 11:00 Сейчас в теме
(1) Спасибо за обратную связь. Я думаю возможно, но надо экспериментировать. Допустим, объединить два метода из статьи, меняем структуру первым, а вторым отправляем события в 1С на изменение данных. Надо будет только смотреть, как на больших объемах это будет работать через 1С.
6. TitanLuchs 395 02.11.20 11:08 Сейчас в теме
(3) Нормально будет работать на больших объемах, если за один запрос не передавать сразу все строки. Надо делать как в динамическом списке 1С: на одном уровне отображать только часть строк, а остальные подгружать при прокрутке или при нажатии кнопок пагинации. И строки подчиненных уровней грузить только при раскрытии родительской строки.
alexex; quazare; +2 Ответить
8. leobrn 614 02.11.20 11:12 Сейчас в теме
(6) я даже больше не про подгрузку данных задумался, когда читал задачу, а про моментальное изменение списка и отражений изменений в 1С
16. TitanLuchs 395 02.11.20 11:31 Сейчас в теме
(8) Там ничего сложного: при изменении значения в поле ввода ловим событие через onchange и выполняем асинхронный или синхронный (в зависимости от логики приложения) запрос к 1С. В нем передаем введенное в поле ввода значение, другие необходимые данные (например, ссылку на номенклатуру, количество которой заказано). Обратно возвращает JSON с ключами "Статус" с вариантами Истина или Ложь и массив "Сообщения". Если "Статус" равно Истина, значит действие выполнено корректно, ничего не делаем. Если "Статус" равно Ложь, то выводим сообщения об ошибке. Поле ввода при этом можно выделить цветом, например. Скорость выполнения запросов при этом обычно высокая: и обработка действия в 1С с записью в БД, и возврат результата занимает 200-300 мсек. Вот здесь можно протестировать: http://xn--b1aleerbckymu.xn--p1ai/remit_slk/ Логин 9629200900, пароль 9914. При изменении значения в ячейке происходит обработка действия в 1С и в результате справа внизу выводится сообщение.
21. leobrn 614 02.11.20 11:39 Сейчас в теме
(16) А это случайно не Вас упоминал Ранис Усманово в видео
, когда рассказывал про знакомого, который в день делает по личному кабинету?) У Вас просто столько примеров связанных с личными кабинетами)
TitanLuchs; +1 Ответить
26. TitanLuchs 395 02.11.20 11:46 Сейчас в теме
(21) Скорее всего про меня (надо послушать конкретно место), так как с Ранисом мы знакомы лично и ему наши веб-интерфейсы нравятся. Насчет "в день по кабинету" это он немного погорячился, обычно клиенты заказывают что-то относительно сложное, на разработку уходит от двух-трех дней до нескольких месяцев - и такие проекты бывают. Но простой интерфейс-одностраничник с одним списком и одной формой объекта за день вполне возможно реализовать.
62. leobrn 614 07.01.21 08:11 Сейчас в теме
(16) Вы в своих проектах используете vue.js?
63. TitanLuchs 395 07.01.21 13:21 Сейчас в теме
(62) Нет, у нас свой код, которого уже достаточно много для того, чтобы заявить, что мы написали свой фреймворк. Используем только css-библиотеки бутрстрап для визуализации, js полностью самописный. В свое время сделали так, чтобы упростить установку и исключить конфликты с другими библиотеками, которые могут быть установлены на сайт заказчика.
serverstar; +1 Ответить
4. leobrn 614 02.11.20 11:05 Сейчас в теме
(1) Ваш комментарий навел меня на идею реализовать простой To-do list (список задач) с использованием HTML, JS на 1С.
serverstar; +1 Ответить
9. Diversus 2306 02.11.20 11:13 Сейчас в теме
(4)
Ваш комментарий навел меня на идею реализовать простой To-do list (список задач) с использованием HTML, JS на 1С.

Обычно при изучении всяких MVC и т.п. эту задачу и делают )))
serverstar; +1 Ответить
10. leobrn 614 02.11.20 11:14 Сейчас в теме
(9) Да, поэтому я про нее и вспомнил))
14. Diversus 2306 02.11.20 11:28 Сейчас в теме
(10) А вот такое слабо реализовать на HTML? )))
Справа панель, которая меняет оформление у текущей строки.
Сейчас отрисовка сделана средствами 1С, что крайне негативно сказывается на производительности.
Хочу в HTML+JS, чтобы без перерисовки страницы все было и синхронизировалось со справочником.
Прикрепленные файлы:
18. leobrn 614 02.11.20 11:35 Сейчас в теме
(14) это будет особенный уровень извращений)
van_za; TitanLuchs; +2 Ответить
5. TitanLuchs 395 02.11.20 11:05 Сейчас в теме
(1) Можно. Вот здесь https://digitcat.ru/demo/di-unf/ примерно так реализован подбор товаров. И в форме документа на форме подбора номенклатуры. Реализация немного иная, чем в FancyTree, но принцип тот же.
van_za; JohnyDeath; quazare; Diversus; +4 Ответить
13. quazare 3586 02.11.20 11:26 Сейчас в теме
17. TitanLuchs 395 02.11.20 11:34 Сейчас в теме
(13) Спасибо, на это столько часов было потрачено, что уже и не посчитать.
2. vseputem 02.11.20 10:57 Сейчас в теме
красиво все выглядит
7. Diversus 2306 02.11.20 11:11 Сейчас в теме
(5) Шикарно. Особенно динамический список.
Я так понимаю использовали свое дерево? Каков принцип заполнения этого дерева и общения с 1С?
Как реализовали собственную авторизацию? Отдельный регистр с настройками?
11. TitanLuchs 395 02.11.20 11:17 Сейчас в теме
(7) Дерево свое, генерится кодом 1С из шаблонов, хранящихся в 1С. То есть, на клиента передается уже готовый HTML-код. Мы знаем, что так не по-феншую и надо передавать только данные формы, а сам html генерить на клиенте, но так проще: все-таки мы передаем это в пользование и сопровождение обычным 1Сникам.
Общение с 1С - путем обработки собыйтий onchange у полей ввода и клика по иконке сворачивания/разворачивания у групп. При срабатывании события собираем информацию о нем и отправляем в 1С, там в коде 1С анализируем м выполняем соответствующее действие.
Авторизация возможна двойная: или средствами 1С (в том числе в локалке через AD с автологином), или через свой РС. Вариант со своим РС не позволяет задействовать RLS, так как логин в 1С происходит под одним служебным пользователем, зато позволяет задействовать переиспользование сеансов, а это существенно снижает нагрузку на сервер.
quazare; leobrn; Diversus; +3 Ответить
15. quazare 3586 02.11.20 11:29 Сейчас в теме
(11) напишите статью про реализацию подобных деревьев - очень интерсно... поделитесь опытом!
pvlunegov; TitanLuchs; +2 Ответить
23. TitanLuchs 395 02.11.20 11:41 Сейчас в теме
(15) Есть уже несколько статей на основе моих выступлений на Infostart Event. Планируем сделать курс по работа с http-сервисами, там все подробно будет рассказано, с практикой и домашними заданиями.
27. quazare 3586 02.11.20 11:47 Сейчас в теме
(23) на сколько я понимаю - в вашем примере - каждая строка таблицы (каталог) - своего рода "кнопка" - генерирует запрос к веб-серверу и обновляет ответом страницу?

вы сами "нарисовали" макет или был взят откуда-то готовый?
28. TitanLuchs 395 02.11.20 12:04 Сейчас в теме
(27) Там не вся строка кнопка, а только иконка слева с плюсом, остальное верно: инициируется запрос к 1С, в его параметрах передается UID строки (по сути это УИД номенклатуры, так как одной номенклатуры одновременно в нескольких строках не может быть) и флаг текущего состояния строки: развернута или свернута. В зависимости от этих параметров 1С понимает, чего от нее хотят: или развернуть строку и показать ее содержимое, или свернуть и показать содержимое верхнего уровня.
Макет свой, css тоже свой. Оно же на продажу идет, там чужого быть не должно.
22. Diversus 2306 02.11.20 11:40 Сейчас в теме
(11) Был на вашем докладе на одном из Infostart Event, но тогда почему-то не впечталился этой темой.
Сейчас же, честно говоря офигеваю от возможностей того, что вы сделали)))
По сути - это нативный веб-интерфейс взамен стандартному веб-клиенту 1С, и ваша доработка лучше т.к. нативная, и без всяких ограничений со стороны платформы.
И даже скрипты на js в 1С стиле (см вложение).
Это круто. Чего уж там...
Прикрепленные файлы:
pvlunegov; TitanLuchs; +2 Ответить
24. TitanLuchs 395 02.11.20 11:42 Сейчас в теме
(22) Да, по сути это полноценный веб-клиент. Со своими ограничениями, конечно же, но и со своими преимуществам. Один из плюсов - без проблем работает на мобилках.
pvlunegov; +1 Ответить
12. Diversus 2306 02.11.20 11:26 Сейчас в теме
(11) Делал что-то подобное но не получилось решить проблему с собственной авторизацией. Через домен как настроили?
Вторая проблема - это обработка объекта без перерисовки. Сейчас есть желание, заменить на HTML+JS вообще форму документа/списка (документ сложный), чтобы использовать его одновременно и на мобильном приложении и на десктопе.
В связи с этим хочу попробовать что-то в таком же духе с деревом на простом примере.
20. TitanLuchs 395 02.11.20 11:38 Сейчас в теме
(12) Собственная авторизация - свой справочник посетителей сайтов с логигнами и хешами паролей, отдельный регистр для хранения сессий. При логине проверяется корректность пароля и если все ОК, то в РС сессий добавляется новая запись. Идентификатор сессии возвращается клиенту и сохраняется в куках. Далее при каждом запросе к 1С этот идентификатор сессии передается в заголовках, 1С видит, что такой сеанс есть, он активен, и авторизация не запрашивает.
Через домен - только в локалке. Там и настраивать ничего не надо, браузер показывает стандартное окно вводи логина/пароля, посетителю необходимо ввести логин/пароль пользователя 1С (именно пользователя, а не из справочника Посетители сайтов). Если в 1С настроена авторизация средствами ОС, то логин/пароль вводит не надо будет.
57. Diversus 2306 24.11.20 11:14 Сейчас в теме
(20) Кстати, сел подумал, а зачем свой справочник посетителей сайтов? Почему нельзя использовать справочник Пользователи?
Есть лайфхак, как получить по логину/паролю элемент справочника "Пользователи".
// Проверяет введен верный логин/пароль пользователя или нет.
//
// Параметры (название, тип, дифференцированное значение)
// 	Логин - Строка - логин пользователя
// 	Пароль - Строка - пароль пользователя
//
// Возвращаемое значение: 
//	СправочникСсылка.Пользователи - пустая ссылка, если пользователь не найден, или логин/пароль не подошел
//		Или ссылка на справочник пользователи, найденного пользователя.
//
Функция НайтиПользователяПоЛогинуИПаролю(Знач Логин, Знач Пароль)
	
	ПользовательИнформационнойБазы = ПользователиИнформационнойБазы.НайтиПоИмени(Логин);
	
	Если ПользовательИнформационнойБазы = Неопределено Тогда
	    Возврат Справочники.Пользователи.ПустаяСсылка();
	Иначе
	    
	    ХэшНастоящегоПароля = ПользовательИнформационнойБазы.СохраняемоеЗначениеПароля;
	    
	    НачатьТранзакцию();
	    Попытка
		    ПользовательИнформационнойБазы.Пароль = Пароль;
		    ПользовательИнформационнойБазы.Записать();
		    
		    ХешВведенногоПароля = ПользователиИнформационнойБазы.НайтиПоИмени(Логин).СохраняемоеЗначениеПароля;			    	
	    Исключение
	    	ОтменитьТранзакцию();
	    КонецПопытки;
	    	
		// Проверка, хэшей пароля.	    
	    Возврат ?(ХешВведенногоПароля = ХэшНастоящегоПароля, 
	    	Справочники.Пользователи.НайтиПоРеквизиту("ИдентификаторПользователяИБ", 
	    		ПользовательИнформационнойБазы.УникальныйИдентификатор),
	    	Справочники.Пользователи.ПустаяСсылка());
	    
	КонецЕсли;	
    
КонецФункции
Показать

Т.е. по сути, если нам нужен пользователь, то можно обойтись без доп. справочника.
58. TitanLuchs 395 24.11.20 15:26 Сейчас в теме
(57) Так-то все верно, можно и напрямую к пользователям обращаться. Но только при условии, что все посетителя веб-интерфейса соответствуют пользователям 1С. Например, есть стандартный интерфейс, а для некоторых случаев - веб-интерфейс. Но у нас же часто стоит задача пустить в 1С внешних пользователей, которые не являются нашими сотрудниками и, соответственно, пользователями. Это могут быть покупатели, контрагенты. А могут быть и сотрудники, которые пользователями 1С не являются, например, водители. В этом случае используется свой справочник, у которого реквизит "Объект ИБ" типа "Любая ссылка". В нем указывается контрагент, партнер или сотрудник, который соответствует данному логину. Далее а коде общего модуля веб-интерфейса в зависимости от его логики реализуется необходимый функционал. Если это покупатель, то показываем ему только Заказы клиента, у которых в реквизите "Контрагент" стоит соответствующий элемент из реквизита "Объект ИБ" справочника "Посетители сайтов". Если это сотрудник, то показываем ему именно его расчетный листок. И т.д.
В итоге получается нет необходимости заводить лишние сущности. Не надо партнерам и сотрудникам создавать элементы в справочнике "Пользователи".
30. TitanLuchs 395 02.11.20 12:16 Сейчас в теме
(12) Обработка объекта без перерисовки - путем выполнения http-запросов к 1С через xmlhttprequest. Вызываем нужный http-сервис 1С, передаем в него параметры. Результат получаем в виде строки. Если там закодированный JSON - парсим его. А дальше все зависит от логики приложения. Например, 1С может передать результат выполнения в виде стркутуры, в которой в одном ключе хранится статус выполнения операции (успешно/ошибка) и в другом или описание ошибок (можно показать их через alert), или html-код, который вставляем в нужное место страницы.
31. leobrn 614 02.11.20 12:20 Сейчас в теме
(30)
xmlhttprequest
xmlhttprequest и fetch без ограничений будут работать в 1С обертке? Под какой-то статьей на инфостарте читал про ограничения данных методов из поля HTML-документа в 1С.
32. TitanLuchs 395 02.11.20 12:29 Сейчас в теме
(31) У нас работают. Единственные ограничения, с которыми сталкивались, это отвал запросов из-за CORS в локалке, когда скрипты и html лежат на одном УРЛ, а база 1С опубликована на другом. Но вставка необходимых данных в заголовки запроса, соответствующая настройка веб-сервера, на котором крутится 1С, и проверка origin на стороне 1С проблему решают.
А так - какая разница 1С, откуда и с помощью чего ей пришел http-запрос? Но допущу, что я чего-то не знаю и с чем-то еще не сталкивался. Всякое бывает, иногда такие интересные кунштюки всплывают. Вот сегодня как раз клиент обратился - на его странице JS возвращает пустую строку в window.location.search, хотя там должны быть параметры GET-запроса. У всех работает, а у него нет. Но там сложная инфраструктура с кучей редиректов, клиент очень крупный, федерального размера. Может у кого-то и с запросами из xmlhttprequest есть проблемы - не исключаю такой возможности.
user1011519; leobrn; +2 Ответить
19. Steelvan 302 02.11.20 11:37 Сейчас в теме
(1)

План подключения примерно следующий:
*) Берем все скрипты, css и html и делаем одним файлом;
*) Берем данные из справочника, который должен быть отображен в дереве и пакуем в json;
*) Добавляем в тот же файл;
*) Сей файл загружаем в ПолеHTMLДокумента;
*) К ПолеHTMLДокумента подключаем 1Сные функции для обработки событий через ДобавитьОбработчик;
Список событий для прослушки https://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeEvents
*) Ловим события в 1Сных функциях и меняем данные в нашем справочнике;

Вроде все выполнимо.
DELOVOYDOM; leobrn; TitanLuchs; +3 Ответить
25. Diversus 2306 02.11.20 11:44 Сейчас в теме
(19) Ну если все так просто Steelvan, тогда с вас статья на эту тему с демо-примером ;-)
29. TitanLuchs 395 02.11.20 12:05 Сейчас в теме
(25) Этих статей на ИС уже с десяток наберется минимум. Поищите.
33. Diversus 2306 02.11.20 13:34 Сейчас в теме
(29) Верно, но все для старых версий платформ, где не была изменена работа HTMLДокумент.
34. TitanLuchs 395 02.11.20 13:36 Сейчас в теме
(33) Пардон, это я не про то подумал. Да, с WebKit в поле HTMLДокумента особенности есть.
35. leobrn 614 02.11.20 13:43 Сейчас в теме
Предлагаю принять участие в опросе по выбору следующих тем (HTML,JS,1C) для статей/видео.
36. user1274464 03.11.20 09:52 Сейчас в теме
Что-то не понял посыл про стрелочные функции. Почему это не будут работать? У меня все работает
37. leobrn 614 03.11.20 09:54 Сейчас в теме
(36) Из 1С я не могу обращаться к стрелочным функциям, у меня возникает ошибка, что метод не найден.
38. leobrn 614 05.11.20 05:46 Сейчас в теме
Собрав обратную связь, дополнил статью улучшениями для первого метода
39. van_za 243 05.11.20 14:03 Сейчас в теме
Автор молодец, плюсую, красивый интерфейс получился!!!

Но...
получается что 1с является браузером в котором открывается web приложение...да еще и глючным браузером не поддерживающий современный js
мне кажется что при вашем знании js лучше уже делать приложение на react native ...
:) призываю всех 1с ников изучать js и очень крутую и простую для понимания библиотеку react от фейсбук!!! :)

https://ru.reactjs.org/
pvlunegov; privin731; d4rkmesa; leobrn; +4 Ответить
40. leobrn 614 05.11.20 14:04 Сейчас в теме
41. alex_sayan 07.11.20 12:42 Сейчас в теме
А вам не кажется, что вместо того чтобы ухряпываться на рисовании мобильного интерфейса в HTML, проще и эффективнее будет написать мобильное приложение на Java/Kotlin под Android и на Swift под iOS?
42. leobrn 614 07.11.20 13:03 Сейчас в теме
(41) не могу сказать на сколько проще, не сталкивался с данными технологиями. Вопрос на сколько быстро вы изучите ту или иную технологию.

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

Вы получаете сборку сразу для android и ios
43. alex_sayan 07.11.20 13:35 Сейчас в теме
(42) по-моему длительность изучения той или иной технологии дело третье, гораздо важнее насколько она будет эффективна. ИМХО, освоить разработку на Java под Android не сложнее, чем освоить HTML и JavaScript. А возможности земля и небо. Возьмите любое гугловское приложение:
https://play.google.com/store/apps/dev?id=5700313618786177705
все они написаны на родных андроидовых технологиях. Но у всех у них очень удобный интерактивный интерфейс, и масштабируемость просто космическая, они отлично работают на миллионах различных устройств, от тормозных китайфонов с маленьким экраном, до топовых смартфонов и планшетов. 1с с HTML такое даже и не снилось
privin731; +1 1 Ответить
44. alex_sayan 07.11.20 13:46 Сейчас в теме
(42)
Вы получаете сборку сразу для android и ios


Тоже сомнительное преимущество. Можно использовать Flutter или Xamarin, приложения будут кроссплатформенными, а возможности богатыми. Посмотрите, например:
https://www.youtube.com/watch?v=qQ75cxc5q8o
45. Diversus 2306 09.11.20 15:26 Сейчас в теме
(41) Не всегда это возможно.
Пример: я автор конфигурации Управление IT-отделом 8, в ней можно работать:
1. В тонком клиенте
2. В личном кабинете
3. В мобильном приложении
Если использовать HTML + JS, то можно везде сделать одинаковый интерфейс и сделать его адаптивным.
В рамках вот таких задач не получится использовать Java/Kotlin под Android и на Swift под iOS, т.к. тогда мы сделаем несравненно больше работы.
46. alex_sayan 09.11.20 17:41 Сейчас в теме
(45) так можно использовать и кроссплатформенные мобильные технологии. Flutter, Xamarin, React Native и иже с ними. Это будет намного лучше ХТМЛ

можно везде сделать одинаковый интерфейс и сделать его адаптивным


Это кажется. Интерфейс будет заметно различаться от устройства к устройству. Ты же понимаешь, что приложение может быть запущено и на китайфоне с экраном 4" и разрешением 800x480, и на топовом самсунге с экраном 6.7" и разрешением 3200х1440? Чтобы интерфейс приложений был одинаковым на самых разношерстных устройствах, всегда пишут на Java/Kotlin под Android и на Swift под iOS. Только так можно добиться большой масштабируемости мобильных приложений. Под масштабируемостью МП как раз и понимается возможное количество устройст, на которых приложение будет одинаково хорошо работать. Ради эксперимента скачай Android Studio, запусти несколько различных эмуляторов, установи какое-нибудь "произведене" на 1с под ХТМЛ и узри какое это убожество

не получится использовать Java/Kotlin под Android и на Swift под iOS, т.к. тогда мы сделаем несравненно больше работы


Тоже иллюзия. Есть масса вещей, которые Android и iOS берут на себя, и которые тебе придётся разруливать вручную. Например, размеры картинок в зависимости от плотности экрана. Под андроид и иос тебе вообще не нужно заморачиваться, просто разлжил картинки разного разлешения по папкам, операционки сами подтянут нужную для каждого экрана. На ХТМЛе тебе придётся самостоятельно анализировать плотность экрана и выводить подходящую картинку. Если у тебя одни и те же картинки на все случаи жизни, то у тебя такой себе интерфейс, он будет уродски отображаться на больших и маленьких устройствах
47. Diversus 2306 09.11.20 18:03 Сейчас в теме
(46)
так можно использовать и кроссплатформенные мобильные технологии. Flutter, Xamarin, React Native и иже с ними. Это будет намного лучше ХТМЛ

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

Ты же понимаешь, что приложение может быть запущено и на китайфоне с экраном 4" и разрешением 800x480, и на топовом самсунге с экраном 6.7" и разрешением 3200х1440?

Это заблуждение. Есть такое понятие как адаптивная верстка и оно прекрасно будет работать на всех устройствах с разным разрешением экрана. Инфостарт тоже сделан используя адаптивную верстку. Попробуйте отмасштабровать окно с сайтом, верстка одна а будет работать на всех устройствах. А теперь откройте Инфостарт на мобильном и там все будет Ок.
То, что есть нативная разработка и то, что она в некоторых моментах лучше - я не спорю.
Но есть рамки определенных задач, где такое не нужно или лишнее. И кстати, тот же Flutter (я на нем делал демо-проект), тоже использует адаптивность тот же прием, что и предлагается в этой статье, только используя HTML+JS.

И последнее: те кто так категорично пишет обычно ничего серьезного в своей жизни не делали и не представляют про масштабы разработки, что PM-ы бьются над тем, чтобы сократить количество потраченного времени не в ущерб качеству. Использование HTML+JS хороший способ это сделать. Это вам подтвердит и TitanLuchs со своим демо-примером в (5). Приведите пример того, что лично вы сделали самостоятельно в области "Java/Kotlin под Android и на Swift под iOS" и тогда продолжим дискуссию.

PS: И перестаньте тыкать не знакомым людям в интернете. Я вас не знаю.
pvlunegov; +1 Ответить
48. alex_sayan 09.11.20 18:46 Сейчас в теме
(47) зачем мне приводить примеры моих поделок? Я могу привести в пример встроенные андроид-приложения. Гугл-плей, плей-музыка, гмаил... Они отлично работают на смартфонах по всему миру, от дешевого китайфона с 4-м андроидом, до флагманского самсунга с 10-м андроидом. А написаны на голой Java. Вы просто не добьетесь такой масштабируемости, используя флаттеры, ксамарины, не говоря про МП 1с. Когда речь заходит о серьёзных приложениях, выкидывают всякую кроссплатформщину и пишут отдельно на Java/Kotlin под Android и отдельно на Swift под iOS. Только так можно добиться высокой масштабируемости. Да что там далеко ходить, первый серьёзный мобильный сервис фирмы 1с написан не на 1с, а на джаве:
https://play.google.com/store/apps/details?id=com.e1c.mobile.ess&hl=ru&gl=US

PM-ы бьются над тем, чтобы сократить количество потраченного времени не в ущерб качеству. Использование HTML+JS хороший способ это сделать

Не соглашусь. HTML всего-лишь способ обойти убогость мобильного интерфейса 1с. Скорости разработки это не особо добавляет, про что и речь. В (44) ссылка на видео, как на Flutter за 20 минут рисуется небольшой интерфейс. Сколько понадобится времени, чтобы изобразить такое же на 1с используя HTML+JS? Дня хватит?
50. Diversus 2306 10.11.20 15:47 Сейчас в теме
(48)
зачем мне приводить примеры моих поделок? Я могу привести в пример встроенные андроид-приложения.

Я так и думал. Много слов, а на деле своего ничего нет, ни на Android, ни на 1С... Или все же есть?
Если это троллинг, то он не удачный, а если же вы реально в теме, то почему не пишите о своем опыте?
Я бы с удовольствием почитал про то, как можно организовать обмен данными между десктопным приложением на 1С и мобильным приложением на Flutter, как организовать обновления Flutter приложений, реально ли новичку из 1С за короткий срок создать приложение на Flutter и сколько это займет времени и т.п. Это не сарказм, мне это реально интересно и я думаю не только мне.
51. alex_sayan 10.11.20 16:54 Сейчас в теме
(50) в смысле ничего нет? Т.е. приложения, установленные на каждом смартфоне, совсем не в счёт?
52. Diversus 2306 10.11.20 16:55 Сейчас в теме
(51) Я конкретно про вас говорю. ВЫ САМИ ДЕЛАЛИ ЧТО-НИБУДЬ ИЗ СПИСКА ЧТО ПРЕДЛАГАЕТЕ?
54. alex_sayan 10.11.20 17:10 Сейчас в теме
(52) я писал МП на 1с и на Java под Android Studio. Да, мне есть с чем сравнивать. Поэтому и пишу, что дрочерство с отрисовкой интерфейса на HTML по трудозатратам как-минимум сопоставимо с разработкой нативных приложений
DELOVOYDOM; +1 Ответить
53. alex_sayan 10.11.20 17:06 Сейчас в теме
(50)
Я бы с удовольствием почитал про то, как можно организовать обмен данными между десктопным приложением на 1С и мобильным приложением на Flutter

Очевидно, через XML или JSON. Примерно также, как и на 1с. С Flutter я сам почти не знаком. Но на Java есть over 100 тыщ способов работать с текстовыми форматами. Там даже проще, чем в 1с. Это мы на 1с ручками расколупываем XML, другие так не работают. Например, вот:
https://www.youtube.com/watch?v=RSmwdijv_M0
на входе XSD-схема, на выходе готовый код для работы с данными из XML
49. alex_sayan 09.11.20 19:36 Сейчас в теме
(47)
тоже использует адаптивность тот же прием


Это не совсем то, что я имел ввиду
https://www.youtube.com/watch?v=XWzE4_9Zny0
вот такие вещи Android разруливает сам. Нужно лишь заранее приготовить, например, картинки разного разрешения. Используя HTML+JS вопросы плотности экрана тебе придётся разруливать самостоятельно
55. leobrn 614 12.11.20 07:02 Сейчас в теме
Всем привет. Разрабатываю мобильное приложение 1C:TODO (HTML/CSS/JS) (подробнее в телеграмме). Промежуточные результаты смотрите в видео: https://youtu.be/NGWUmrthzjw
Прикрепленные файлы:
56. leobrn 614 19.11.20 13:07 Сейчас в теме
Перенес функционал на мобильную платформу 1С. Результат в видео https://youtu.be/qa32y2XTNho
59. user592773_demon1995.27 30.11.20 17:00 Сейчас в теме
Возможно ли убрать вообщеэтот заголвок формы??
Прикрепленные файлы:
60. leobrn 614 30.11.20 17:02 Сейчас в теме
(59) на данный момент нет такой возможности
66. pvlunegov 157 26.04.21 07:52 Сейчас в теме
(60) При сборке apk приложения есть возможность убрать или изменить заголовок приложения в манифесте приложения.
61. maksa2005 530 24.12.20 21:09 Сейчас в теме
(59)но можно изменить цвет
64. leobrn 614 12.02.21 13:39 Сейчас в теме
Приложение "Мой список" доступно в PlayMarket:
https://play.google.com/store/apps/details?id=ru.ovm.todo

Видео презентация:
https://youtu.be/WNlC5q5Wsv4
65. leobrn 614 03.03.21 12:12 Сейчас в теме
Доклад по теме https://youtu.be/pWX_NqM_Syw. Поддержите лайком
serverstar; +1 Ответить
67. serverstar 62 13.09.21 12:08 Сейчас в теме
Здравствуйте!

Подскажите пожалуйста. я использую 1 метод, то есть весь интерфейс отрисовывается при помощи JS, который формируется в отдельном общем модуле. А как теперь мне реализовать перерисовку поляHTML при нажатии на ссылку, не понимаю? То есть как мне вернуться с уровня js на уровень 1с, чтобы при нажатии на ссылку, у меня перерисовывался новый интерфейс по новому макету из 1с, с подстановкой новых данных из json соответственно?

// ps может через обработчик поляhtml при нажатии или
68. leobrn 614 13.09.21 17:20 Сейчас в теме
(67) скачайте примеры конфигураций из статьи , внизу есть ссылка на исходники
69. leobrn 614 13.09.21 17:22 Сейчас в теме
(67) только статья и примеры показывают как делать перерисовку на стороне js. А про примеры который вы пишите можете посмотреть мини курс от Ильи Низамова про html интерфейс (1000руб вроде )
70. serverstar 62 13.09.21 21:04 Сейчас в теме
(69)
перерисовку на стороне js.
Спасибо, но пишу свои примеры полностью основываясь на исходниках из вашей статьи, подход ПЕРВЫЙ. То есть, макет генерируется полностью js. но, я столкнулась с трудность в том, что при клике на ссылке, мне по логике нужно переходить в объект, который находится по ссылке. Соответственно нужна отрисовка нового макета с новыми данными. А из контекста js нужно вызвать ДРУГОЙ 1с макет. А я не знаю, как вызвать 1сную функцию из конструкции типа:
|function getTasksList() {
| //if(!TaskListItems){return}
| const tasks = TaskListItems.map(function(task) {
| return `
| <div class=""taskBlock"">
| <div class=""left_block"">
| "<"a href=""ПРИ_КЛИКЕ_СЮДА_ВЫЗЫВАЕТСЯ_НОВЫЙ МОДУЛЬ 1с"" class=""task__item "" on click=""updatePage('${task.taskName}')"">
| <img class=""round"" src=""${getRandomTaskListPIC()}"">
| </div>
| <div class=""right_block"">
| <h4 class=""heading"">${task.taskName}</h4>
| <p class=""srt"">${task.srt}</p>
| <p class=""ro"">${task.Ро}</p>
| <p class=""sch"">${task.tsk}</p>
| </div>
| </a>
| </div>
|
`
| })
| return tasks.join('')
|}


Как оформить ссылку и код к ней, чтобы вызвать функцию из 1с-ного модуля?
71. serverstar 62 19.09.21 18:32 Сейчас в теме
Итак, как обратиться к функциям JS из 1С, используя свойство ПоляHTML defaultView?

    view = ЭтаФорма.Элементы.ПолеHTML.Документ.defaultView;
    mResult = view.func();


Обычно такой метод работает.
НО!!! Обнаружилась интересная особенность.

При обращении к функции JS view.func(); если в строке скрипта присутствуют слова 'USE STRICT'
будет выдаваться ошибка метод объекта не обнаружен (func())

Решением является удаление слов 'USE STRICT' из скрипта JS
72. leobrn 614 19.09.21 18:37 Сейчас в теме
(71) все зависит от версии вебкита на устройстве. Прогоняйте ваш код js через Babel https://kolmogorov.pro/what-is-it-babel-chto-takoe-dge-ispolzuyut ,чобы обеспечить максимальную работоспособность на всех устройствах
serverstar; +1 Ответить
73. serverstar 62 19.09.21 18:45 Сейчас в теме
(72) версии webkit на устройстве. а разве сам вебкит не вшит в платформу и не поставляется с ней? все свои эксперименты дилетанта я провожу на 8.3.18.1334. и 8.3.19 И в обоих случаях пишет "метод объекта не обнаружен"
74. leobrn 614 19.09.21 18:47 Сейчас в теме
(73) приводите код к старым форматам иначе будете периодический сталкиваться с ошибками на разных устройствах .
serverstar; +1 Ответить
75. serverstar 62 19.09.21 18:50 Сейчас в теме
(74) да, согласна с вами =^-^= просто это такое приятное чувство для начинающего, докопаться наконец-то до истины. ну и решила написать об этой тонкости. вдруг кому пригодится
76. leobrn 614 19.09.21 18:53 Сейчас в теме
(75) https://t.me/ovmst/79 примеры проблем на старых устройствах используя новые фишки js
serverstar; +1 Ответить
77. leobrn 614 19.09.21 18:54 Сейчас в теме
(76) и такое же может быть с css свойствами
serverstar; +1 Ответить
78. serverstar 62 12.10.21 21:01 Сейчас в теме
Здравствуйте!

У меня в полеHTML формируется html-форма. Но при нажатии на текстовое поле для внесения текста отрабатывает событие ПолеHTMLПриНажатии() и соответственно, не дает внести никакие данные в html-форму. Если по некоторому условию написать в ПолеHTMLПриНажатии() {....СтандартнаяОбработка = ЛОЖЬ; ...} никакие действия не происходят, но ввести текст все равно НЕ получается.

Потом в этом же полеHTML происходит перерисовка интерфейса: другие формы и списки.

Такой вопрос: как постоить логику работы модуля, чтобы получилось ввести текст в поля формы и отправить это все на обработку далее?
79. serverstar 62 29.11.21 15:16 Сейчас в теме
Итак, снова я в этой ветке.

Все это конечно хорошо, и производить обмен JS и 1С через событие ПриНажатии() удобно.
Вот только засада. На android-эмуляторе событие ПриНажатии() срабатывает ТОЛЬКО если есть тег "http:// и ОБЯЗАТЕЛЬНО
href="" заполнено ссылкой. НЕ пустой ссылкой типа href=""#"" или href=""##"" или href=""!#"" или href=""jav * ascript:void(0)""

Поэтому вопрос к знатокам. как уже в Android-эмуляторе заставить работать ПриНАжатии у тега <a></a>???
80. maksa2005 530 16.01.22 19:06 Сейчас в теме
(79)просто. прописать код <a> в странице
81. maksa2005 530 16.03.22 10:14 Сейчас в теме
Красивый дизайн. В мобильном приложении используется модальность, а значит не получится использовать переход на другие страницы. Не совсем удобно сделано, но скрыть боковую панель увы никак)
82. Steelvan 302 27.04.22 11:11 Сейчас в теме
Изучать js для разработки и сопряжения веб-морд это здорово, однако следует понимать, что js это совсем другие принципы программирования.
Например,

https://youtu.be/9WtG6SWK7dM
83. user1427868 22.09.23 12:06 Сейчас в теме
Здравствуйте, а cf файла самого мобильного приложения не будет в доступе? в ссылках на исходники не совсем то
Оставьте свое сообщение