Разработка пользовательских интерфейсов в 1С с использованием HTML, CSS, Vue.js

18.06.25

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

В данной статье я бы хотел поделиться примером использования HTML, CSS и Vue.js при разработке пользовательского интерфейса в 1С. Данный пример разрабатывался и тестировался на платформе 1С:Предприятие 8.3 (8.3.27.1508).

Файлы

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

Наименование Скачано Купить файл
(только для физ. лиц)
Разработка пользовательских интерфейсов в 1с с использованием HTML, CSS, Vue.js
.cf 200,97Kb
3 1 850 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

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

Оформить подписку и скачать решение со скидкой

Что такое vue.js

Взято из википедии

 

 Vue.js (также Vue/vjuH0;/) — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.

В данном примере используется устаревшая версия фреймворка. Она более простая для понимая и не требует установки дополнительных библиотек или компонентов

 

Создание HTML разметки для последующего внедрения в 1с

Сам html выглядит довольно просто:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
    <script src="app.js"></script> 
    <!-- подключаем иконки-->
    <script src='https://unpkg.com/feather-icons@4.29.0/dist/feather.min.js'></script>
</head>
<body>
    <div id="task_board">
        <div v-for="(column, index) in columns" v-bind:style="{'width': widthColumns}" style="float: left">
            <span>{{column.name}}</span>
            <ul class="border">
                <li v-for="(task, index) in column.tasks" v-bind:id="'taskId='+task.taskId">
                    <div class="container" v-bind:id="'taskId='+task.taskId">
                        <h6 v-bind:id="'taskId='+task.taskId">{{task.taskDate}}</h6>
                        <h4 v-bind:id="'taskId='+task.taskId"><b v-bind:taskId='task.taskId'>{{task.taskName}}</b></h4>
                        <h6 v-bind:id="'taskId='+task.taskId">{{task.taskDescription}}</h6> 
                        <span v-if="task.isСritical" data-feather="flag"></span>
                        <span v-if="!task.isСritical" data-feather="star"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>  
<!-- рисуем стильные иконки -->
<script>
    feather.replace();
</script>
<!-- рисуем стильные иконки -->
<!-- создание объекта Vue -->
<script>
    var task_board = new Vue({
        el: '#task_board',
        data: {
            columns: [],
            widthColumns: ""
        },
        methods: {
            changeTaskBoard: function (columnsArray, widthColumns) {
                this.columns = columnsArray
                this.widthColumns = widthColumns
            },

        }
    }
    );
</script>
<!-- создание объекта Vue -->
</html>
В блоке <head> подключаются необходимые файлы:
style.css - стили оформления
vue.js - сама библиотека vue.js, я подключаю ее через локальный файл, но можно подключить и по ссылке
app.js - файл со некоторыми функциями на языке JavaScript, которые будут необходимы для работы
так же для красоты подключаются иконки

Далее рассмотрим скрипты, который находится после блока <body>

Скрипт отмеченный комментарием  <!-- рисуем стильные иконки --> позволяет использовать иконки, которые были подключены в блоке <head>

Скрипт отмеченный комментарием <!-- создание объекта Vue --> создает объект Vue, и этот объект помещается в переменную task_board.

У этого объекта есть свойства:

el - определяет какому элементу html будет принадлежать этот объект. В данном примере для элемента  <div id="task_board">. Таким образом принадлежность объекта vue к тому или иному элементу html определяется по id, только в о объекте vue id нужно указывать с "#" в начале

data - определяет какие данные будут хранится в этом объекте. В данном примере это "columns" - массив колонок, которые необходимо выводить и "widthColumns" - это ширина каждой колонки

methods - определяет методы, которые доступный данному объекту. В данном примете метод все один, в нем происходит первоначальное заполнение данных, которые есть в свойстве "data" (к этому методу еще вернемся, когда будем заполнять данными наш пример)

Теперь подробно рассмотрим блок <body>

  • Первым элементом является элемент <div id="task_board">, и все что находится внутри этого элемента, будет иметь возможность использовать объект vue task_board, который был создан скриптом, описанным выше
  • Элемент <div>, этот элемент уже напрямую использует объект task_board.
    • Конструкция v-for="(column, index) in columns" позволяет вывести этот элемент в цикле, другими словами, элемент будет выведен столько раз, сколько элементов в массиве columns
    • Конструкция v-bind:style="{'width': widthColumns}" позволяет задать ширину колонки, исходя из значения, которое указано в объекте task_board. Это сделано для того чтобы колонки растягивались равномерно, исходя из их количества

    • Конструкция style="float: left" стандартная конструкция html, задающая стили для элемента

  • Элемент <span>, в котором указана конструкция {{column.name}}. Двойные фигурные скобки позволяют вывести значение из объекта task_boardcolumn - это переменная, которая была определена в конструкции v-for="(column, index) in columns". Другими словами это элемент массива columns, у которого в свою очередь есть свойство name.
  • Элемент <ul>, он нужен для вывода списка
  • Элемент <li>, этот элемент уже выводит элементы списка.
    • Конструкция v-for="(task, index) in column.tasks" выводит в список элементы, которые есть в массиве tasks, который в свою очередь есть в каждом элементе массива columns
    • Конструкция v-bind:id="'taskId='+task.taskId" присваивает элементу <li>  некий идентификатор, который будет состоять из текста 'taskId=' и добавлением к этому тексту значения свойства taskId
  • Элемент <h6> выводит текст, значение текста указано в свойстве {{task.taskDate}}. Для последующий элементов <h4> и <h6> принцип работы такой же, за исключением значения, которое выводится в этом элементе
  • Следующие два элемента </span> показывают пример как использовать условия при выводе элементов. Первый элемент будет выведен, если значение свойства task.isСritical = Истина, второй элемент будет выведен наоборот, если task.isСritical = Ложь. В этих элементах выводятся разные иконки, в зависимости от результата условия

 

Стили css

Все стили взяты из открытых источников, поэтому без пояснений

/* оформление всего тела */
body {
    font-family: "Roboto", sans-serif;
  }

/* оформление списка */
.border {
list-style: none;
padding: 0;
}
.border li {
font-family: "Trebuchet MS", "Lucida Sans";
padding: 7px 20px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 10px solid #f05d22;
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
     -2px -2px 5px 0 rgba(0,0,0,.1),
    2px 2px 5px 0 rgba(0,0,0,.1),
    -2px 2px 5px 0 rgba(0,0,0,.1);
font-size: 20px;
letter-spacing: 2px;
transition: 0.3s all linear;
}
.border li:nth-child(2){border-color: #8bc63e;}
.border li:nth-child(3){border-color: #fcba30;}
.border li:nth-child(4){border-color: #1ccfc9;}
.border li:nth-child(5){border-color: #493224;}
.border li:hover {border-left: 10px solid transparent;}
.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
.border li:nth-child(5):hover {border-right: 10px solid #493224;}

/* оформление карточки задачи */

/* Add some padding inside the card container */
.container {
    padding: 2px 16px;
    cursor: pointer;
}
 
app.js

Принцип работы функций этого файла расскажу, когда будет описание их вызова

function createTasksBoard(columnsJson) {
    columns = JSON.parse(columnsJson)
    widthColumns = 100 / columns.length + "%"
    task_board.changeTaskBoard(columns, widthColumns)
    
}  
function addTask(taskJSON) { 
    
    task = JSON.parse(taskJSON)
    
    columnId = task.columnId
    
    let ref_array = task_board.columns.map(el => el.id)
    
    let indexArray = ref_array.indexOf(columnId)
    
    el = task_board.columns[indexArray].tasks
    
    el.push(task)
    
}  
function changeTask(taskJSON) {
    task = JSON.parse(taskJSON)
    columnId = task.columnId
    taskId = task.taskId
    for (let i = 0; i < task_board.columns.length; i++) {
        arr = task_board.columns[i].tasks
        let ref_array = arr.map(el => el.taskId)
        let indexArray = ref_array.indexOf(taskId)
        if (indexArray > -1) {
            //    Теперь можно удалить строку
            task_board.columns[i].tasks.splice(indexArray, 1)
        }
        
        
    }
    let ref_array = task_board.columns.map(el => el.id)
    let indexArray = ref_array.indexOf(columnId)
    el = task_board.columns[indexArray].tasks
    el.push(task)
}
vue.js - сам фреймворк можно подключить по ссылке https://cdn.jsdelivr.net/npm/vue@2 либо взять из текста ниже
 
 

Переходим в 1С

Для демонстрации примера будет выведена простая доска задач с этапами

Для этого нужно создать объекты в 1С:

  1. Справочник "Состояния задач", с реквизитом "Порядок" типа Число
  2. Документ "Задачи" с реквизитами: "ТекущееСостояние" - тип СправочникСсылка.СостоянияЗадач; "Критическая" - тип Булево; "НаименованиеЗадачи" - Строка; "ОписаниеЗадачи" - Строка
  3. Обработка "Задачи"

   4. Общий серверный модуль "Работа СJSON"

// Сериализует объект в строку JSON
// 
// Параметры:
//     ОбъектСериализации - Произвольный - Объект требующий сериализации
// Возвращаемое значение:
//     Строка - Полученная в результате сериализации строка JSON
Функция СериализоватьВJSON(ОбъектСериализации, Знач ВариантЗаписиДаты = Неопределено) Экспорт
    Перем НастройкиСериализацииJSON;
    
    ВариантЗаписиДаты = ?(ВариантЗаписиДаты = Неопределено, ВариантЗаписиДатыJSON.ЛокальнаяДата, ВариантЗаписиДаты);
    
    НастройкиСериализацииJSON = Новый НастройкиСериализацииJSON;
    НастройкиСериализацииJSON.ВариантЗаписиДаты = ВариантЗаписиДаты;
    НастройкиСериализацииJSON.ФорматСериализацииДаты = ФорматДатыJSON.ISO;
    ЗаписьJSON = Новый ЗаписьJSON;
    ЗаписьJSON.УстановитьСтроку();
    
    ЗаписатьJSON(ЗаписьJSON, ОбъектСериализации, НастройкиСериализацииJSON);
    
    Возврат ЗаписьJSON.Закрыть(); 
КонецФункции

// Десериализует строку JSON
// 
// Параметры:
//     СтрокаJSON - Строка - Десериализуемая строка JSON 
//     ИспользуяСериализатор - Булево - Используется если строка JSON приходит без описания типов 
//         (например из стороннего сервиса)
//         
// Возвращаемое значение:
//     Структура, Массив, ФиксированнаяСтруктура - Объект полученный из строки JSON
Функция ДесериализоватьИзJSON(СтрокаJSON, ИменаПолейДат = "") Экспорт
    Если СтрокаJSON = "" Тогда
        СтрокаJSON = "{}";
    КонецЕсли;
    ЧтениеJSON = Новый ЧтениеJSON;
    ЧтениеJSON.УстановитьСтроку(СтрокаJSON); 
    ОбъектИзСтрокиJSON = ПрочитатьJSON(ЧтениеJSON,,ИменаПолейДат, ФорматДатыJSON.ISO); 
    ЧтениеJSON.Закрыть();
    Возврат ОбъектИзСтрокиJSON; 
КонецФункции
 

   5. Общий серверный модуль "Конструкторы объектов"

Функция НоваяСтруктураКолонкиДоскиЗадач() Экспорт
    Колонки = Новый Структура();
    Колонки.Вставить("name", "");
    Колонки.Вставить("id", ""); 
    Колонки.Вставить("sequenceOrder", 0);
    Колонки.Вставить("tasks", новый Массив);
    Возврат Колонки;
КонецФункции  
Функция НоваяСтруктураЗадачи() Экспорт
    Задача = Новый Структура;
    Задача.Вставить("taskId", ""); 
    Задача.Вставить("taskDate", Дата(1,1,1));
    Задача.Вставить("taskName", "");
    Задача.Вставить("taskDescription", "");
    Задача.Вставить("columnId", ""); 
    Задача.Вставить("isСritical", Ложь);
    Возврат Задача;
КонецФункции
 
 

 Вся остальная логика будет организованна в обработке "Задачи"

Для начала в обработке нужно создать текстовые макеты, в которых будет хранится текст html, css и js файлов, которые были созданы ранее.

В форме обработки необходимо создать реквизит "ПолеHTML" с типом строка не ограниченной длины, вывести его на форму и поменять вид на "Поле HTML документа" 

При открытии формы нужно сохранить тексты, которые были помещены в макеты в каталог на диске

 #Область ОбработчикиСобытийФормы
&НаКлиенте
Процедура ПриОткрытии(Отказ)
    СформироватьПолеHTML();
КонецПроцедуры 
#КонецОбласти 

#Область СлужебныеПроцедурыИФункции 
#Область СохранениеМакетовВФайл 
&НаКлиенте
Процедура СформироватьПолеHTML()   
    
    ОповещениеПослеПолученияКаталогаВременныхФайлов = новый ОписаниеОповещения("ПослеПолученияКаталогаВременныхФайлов", ЭтотОбъект, Неопределено);
    
    НачатьПолучениеКаталогаВременныхФайлов(ОповещениеПослеПолученияКаталогаВременныхФайлов);

КонецПроцедуры
&НаКлиенте
Процедура ПослеПолученияКаталогаВременныхФайлов(ИмяКаталогаВременныхФайлов, ДополнительныеПараметры) Экспорт 
    
    ИмяКаталога =  ИмяКаталогаВременныхФайлов + "\" + "Tasks\"; 
    
    ОповещениеПослеСозданияКаталога = Новый ОписаниеОповещения("ПослеСозданияКаталога", ЭтотОбъект, Неопределено);
    НачатьСозданиеКаталога(ОповещениеПослеСозданияКаталога, ИмяКаталога);
КонецПроцедуры
&НаКлиенте
Процедура ПослеСозданияКаталога(ИмяКаталога, ДополнительныеПараметры) Экспорт  
    
    Макет = ПолучитьТекстМакета("МакетIndex");
    СохранитьМакетВФайл(Макет, "index.html", ИмяКаталога);

    Макет = ПолучитьТекстМакета("МакетCSS");
    СохранитьМакетВФайл(Макет, "style.css", ИмяКаталога);

    Макет = ПолучитьТекстМакета("МакетApp");
    СохранитьМакетВФайл(Макет, "app.js", ИмяКаталога); 
    

    Макет = ПолучитьТекстМакета("МакетVue");
    СохранитьМакетВФайл(Макет, "vue.Js", ИмяКаталога); 
    
    ПолеHTML = ИмяКаталога + "index.html";
КонецПроцедуры

 &НаКлиенте
Процедура СохранитьМакетВФайл(Макет, ИмяФайла, ИмяКаталога)
    ОповещениеОЗаписиФайла = Новый ОписаниеОповещения("ПослеЗаписиФайла", ЭтотОбъект, Неопределено);
    ИмяФайла = ИмяКаталога + ИмяФайла;
    ТекстДок = Новый ТекстовыйДокумент;
    ТекстДок.УстановитьТекст(Макет);
    ТекстДок.НачатьЗапись(ОповещениеОЗаписиФайла, ИмяФайла);
КонецПроцедуры  
&НаКлиенте
Процедура ПослеЗаписиФайла(Результат, ДополнительныеПараметры) Экспорт 
КонецПроцедуры
    
&НаСервере
Функция ПолучитьТекстМакета(ИмяМакета)
    ОбъектОбработки = РеквизитФормыВЗначение("Объект");
    Макет = ОбъектОбработки.ПолучитьМакет(ИмяМакета);
    Текст = Макет.ПолучитьТекст();
    Возврат Текст
КонецФункции
#КонецОбласти
#КонецОбласти
 

В результате при открытии формы обработки, все нужные файлы записались в один каталог, а само поле html документа берет данные из файла index.html 

Заполнение данных

В модуле объекта обработки нужно создать функции получения данных

#Область ПрограммныйИнтерфейс                
Функция ПолучитьДанныеПоЗадачам() Экспорт
    Запрос = Новый Запрос;
    Запрос.Текст = 
    "ВЫБРАТЬ
    |    ДЗ_СостоянияЗадач.Наименование КАК name,
    |    ДЗ_СостоянияЗадач.Порядок КАК sequenceOrder,
    |    УНИКАЛЬНЫЙИДЕНТИФИКАТОР(ДЗ_СостоянияЗадач.Ссылка) КАК id,
    |    ДЗ_Задачи.Ссылка КАК ЗадачаСсылка
    |ИЗ
    |    Справочник.ДЗ_СостоянияЗадач КАК ДЗ_СостоянияЗадач
    |        ЛЕВОЕ СОЕДИНЕНИЕ Документ.ДЗ_Задачи КАК ДЗ_Задачи
    |        ПО ДЗ_СостоянияЗадач.Ссылка = ДЗ_Задачи.ТекущееСостояние
    |ГДЕ
    |    НЕ ДЗ_СостоянияЗадач.ПометкаУдаления
    |    И НЕ ДЗ_Задачи.ПометкаУдаления
    |
    |УПОРЯДОЧИТЬ ПО
    |    sequenceOrder
    |ИТОГИ
    |    МАКСИМУМ(name),
    |    МАКСИМУМ(sequenceOrder)
    |ПО
    |    id";
    Колонки = Новый Массив;
    ВыборкаКолонки = Запрос.Выполнить().Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам);
    Пока ВыборкаКолонки.Следующий() Цикл
        НоваяКолонка = ДЗ_КонструкторыОбъектов.НоваяСтруктураКолонкиДоскиЗадач();
        ЗаполнитьЗначенияСвойств(НоваяКолонка, ВыборкаКолонки);
        НоваяКолонка.id = Строка(ВыборкаКолонки.id);
        ВыборкаЗадачи = ВыборкаКолонки.Выбрать(); 
        ЗадачиКолонки = Новый Массив;
        Пока ВыборкаЗадачи.Следующий() Цикл
            НоваяЗадача = ПолучитьДанныеПоЗадаче(ВыборкаЗадачи.ЗадачаСсылка);
            ЗадачиКолонки.Добавить(НоваяЗадача);
        КонецЦИкла;                      
        НоваяКолонка.tasks = ЗадачиКолонки;
        Колонки.Добавить(НоваяКолонка);
    КонецЦИкла;
    Возврат Колонки;
КонецФункции
Функция ПолучитьДанныеПоЗадаче(СсылкаНаЗадачу) Экспорт 
    
    Задача = ДЗ_КонструкторыОбъектов.НоваяСтруктураЗадачи();
    Задача.taskId = Строка(СсылкаНаЗадачу.УникальныйИдентификатор()); 
    Задача.taskDate = Формат(СсылкаНаЗадачу.Дата, "ДФ=dd.MM.yyyy");
    Задача.taskName = СсылкаНаЗадачу.НаименованиеЗадачи;
    Задача.taskDescription = СсылкаНаЗадачу.ОписаниеЗадачи;
    Задача.columnId = Строка(СсылкаНаЗадачу.ТекущееСостояние.УникальныйИдентификатор()); 
    Задача.isСritical = СсылкаНаЗадачу.Критическая;
    Возврат Задача;
    
КонецФункции
#КонецОбласти

 

 

Функция ПолучитьДанныеПоЗадачам() - возвращает массив из структур, свойства структуры описаны в ДЗ_КонструкторыОбъектов.НоваяСтруктураКолонкиДоскиЗадач()

Функция ПолучитьДанныеПоЗадаче() - возвращает структуру задачи, свойства структуры описаны в ДЗ_КонструкторыОбъектов.НоваяСтруктураЗадачи()

В форме обработке создаем команду "Сформировать", выводим ее на форму. Действие команды:

&НаКлиенте
Процедура Сформировать(Команда)
    ДанныеПоЗадачамJSON = ПолучитьДанныеПоЗадачам(); 
    Элементы.ПолеHTML.Документ.window.createTasksBoard(ДанныеПоЗадачамJSON);
КонецПроцедуры
&НаСервере
Функция ПолучитьДанныеПоЗадачам()
    ТекущийОбъект = РеквизитФормыВЗначение("Объект");
    ДанныеПоЗадачам = ТекущийОбъект.ПолучитьДанныеПоЗадачам();
    ДанныеПоЗадачамJSON = ДЗ_РаботаСJSON.СериализоватьВJSON(ДанныеПоЗадачам);
    Возврат ДанныеПоЗадачамJSON;
КонецФункции
 

Элементы.ПолеHTML.Документ.window.createTasksBoard(ДанныеПоЗадачамJSON); этой строкой вызывается функция createTasksBoard(), которую создали в файле app.js.

В этой функции переданный json приводится к массиву элементами которого являются объекты со свойствами:

  • name
  • id
  • sequenceOrder - не используется
  • tasks - массив объектов со свойствами:
    • taskId
    • taskDate
    • taskName
    • taskDescription
    • columnId
    • isСritical

Затем определяется ширина каждой колонки, исходя из количества колонок, к примеру если есть 5 стадий задач то ширина каждой колонки будет равна "20%"

Полученные данные передаются в функцию changeTaskBoard(), объекта vue task_board

В результате работы команды "Сформировать", поле html документа на форме заполнить данными

 

Создание новой задачи

Добавим на форму обработки команду "Новая задача", действие команды:

 &НаКлиенте
Процедура НоваяЗадача(Команда)    
     
    СсылкаНаДокумент = СоздатьНовуюЗадачу();
    ПараметрыОткрытияФормы = Новый Структура;
    ПараметрыОткрытияФормы.Вставить("Ключ", СсылкаНаДокумент);
    
    ОповещениеПослеЗакрытияФормыНовойЗадачи = Новый ОписаниеОповещения("ПослеЗакрытияФормыНовойЗадачи", ЭтотОбъект, ПараметрыОткрытияФормы); 
    ОткрытьФорму("Документ.ДЗ_Задачи.ФормаОбъекта",ПараметрыОткрытияФормы,,,,,ОповещениеПослеЗакрытияФормыНовойЗадачи,РежимОткрытияОкнаФормы.БлокироватьОкноВладельца);
    
КонецПроцедуры

&НаСервере
Функция СоздатьНовуюЗадачу()
    НоваяЗадача = Документы.ДЗ_Задачи.СоздатьДокумент();
    НоваяЗадача.Дата = ТекущаяДатаСеанса();
    НоваяЗадача.Записать();
    Возврат НоваяЗадача.Ссылка;
КонецФункции

&НаКлиенте
Процедура ПослеЗакрытияФормыНовойЗадачи(РезультатЗакрытия, ДополнительныеПараметры) Экспорт  
    СсылкаНаЗадачу = ДополнительныеПараметры.Ключ;   
    ЗадачаJSON = ПолучитьДанныеПоЗадаче(СсылкаНаЗадачу);
    Элементы.ПолеHTML.Документ.window.addTask(ЗадачаJSON);
Конецпроцедуры 
 

 

Логика создания задачи простая:

  • Создается новый документ
  • Открывается форма объекта этого документа
  • После закрытия формы вызывается функция Элементы.ПолеHTML.Документ.window.addTask(ЗадачаJSON);. Эта функция так же находится в файле app.js

На входе функция принимает json, который преобразуется в объект.

Далее по значению свойства columnId в массиве task_board.columns ищется нужный элемент, в который добавляется преобразованный объект. В результате новая созданная задача сразу попадает в нужный список. Происходит благодаря "реактивности" фреймворка vue. 

Редактирование Задачи

Для редактирования задачи добавим событие "ПриНажатии" полю html документа, с действием:

 &НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    Если ДанныеСобытия.Свойство("Element") И СтрНачинаетсяС(ДанныеСобытия.Element.id, "taskId=") Тогда
        СсылкаНаЗадачуСтрокой = СтрЗаменить(ДанныеСобытия.Element.id,"taskId=", "");  
        ПараметрыОткрытияФормы = Новый Структура("Ключ", ПолучитьСсылкуНаЗадачу(СсылкаНаЗадачуСтрокой));  
        ОповещениеПослеЗакрытияФормыРедактированияЗадачи = Новый ОписаниеОповещения("ПослеЗакрытияФормыРедактированияЗадачи", ЭтотОбъект, ПараметрыОткрытияФормы);
        ОткрытьФорму("Документ.ДЗ_Задачи.ФормаОбъекта", ПараметрыОткрытияФормы,,,,,ОповещениеПослеЗакрытияФормыРедактированияЗадачи,РежимОткрытияОкнаФормы.БлокироватьОкноВладельца);        
    КонецЕсли;
КонецПроцедуры
&НаКлиенте
Процедура ПослеЗакрытияФормыРедактированияЗадачи(РезультатЗакрытия, ДополнительныеПараметры) Экспорт
    СсылкаНаЗадачу = ДополнительныеПараметры.Ключ;   
    ЗадачаJSON = ПолучитьДанныеПоЗадаче(СсылкаНаЗадачу);
    Элементы.ПолеHTML.Документ.window.changeTask(ЗадачаJSON);
    
КонецПроцедуры
 

 

В html элементам, которые связаны с задачей свойству "id" было присвоено значение  "'taskId='+task.taskId". taskId - это уникальный идентификатор документа "Задача", который передается при заполнении и при добавлении новой задачи. Теперь используя id элементов можно получить ссылку на документ и открыть его форму. После закрытия формы так же формируется структура задачи и преобразовывается в json.

Элементы.ПолеHTML.Документ.window.changeTask(ЗадачаJSON); вызывает функцию из файла app.js. В этой функции переданная задача сначала удаляется из того массива задач, в котором она находилась до изменения, затем добавляется по новой, в тот массив, который соответствует идентификатору стадии. Так же как и с добавлением, больше ничего не требуется, фреймворк сам перестроит элементы.

 

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

 

UPD

Для поля HTML документа можно вызвать "Инструменты разработчика", как в браузере. Там можно посмотреть дерево элементов, консоль, есть отладчик. Вызывается сочетанием клавиш ctrl+alt+shift+F12

Вступайте в нашу телеграмм-группу Инфостарт

Пользовательский интерфейс UI HTML CSS Vue.js

См. также

Работа с интерфейсом Анализ учета Мониторинг 1С v8.3 8.3.14 1C:Бухгалтерия 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью подсистемы "Инфоборды". Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Подсистема реализована в форме расширения 1С.

16800 руб.

27.03.2025    4836    12    11    

16

Работа с интерфейсом Системный администратор Программист 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

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

6000 руб.

14.01.2016    57089    19    25    

45

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

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

6000 руб.

18.01.2022    11070    2    2    

7

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

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

2400 руб.

29.06.2020    20993    30    6    

46

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

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

20.08.2024    32642    mrXoxot    44    

135

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

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

27.05.2024    18482    smielka    37    

105

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

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

27.12.2023    20105    1261    elcoan    53    

128

Инструментарий разработчика Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия Абонемент ($m)

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

3 стартмани

10.04.2023    14206    174    acces969    31    

131
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. SerVer1C 925 18.06.25 12:19 Сейчас в теме
Вставлять в статью текстовое содержимое открытого фреймворка, вместо ссылки на него, это ......... Даже слов нет....
user1707765; kpotoyalo; koltunov.sp; starik-2005; +4 Ответить
2. AlexF1 46 18.06.25 12:24 Сейчас в теме
(1) Это устаревшая версия фреймворка, я не нашел ссылки не него, поэтому приложил текстом
3. opus70 74 18.06.25 12:27 Сейчас в теме
(1) отличное решение в свете текущих всяких блокировок
делать ссылки на сторонние ресурсы которые смотриш раз и отключили это плохо

жаль что сам фрамеворк(vue.js) тянет в своем коде делать обращение к сторонним ресурсам
('See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.', target);) и так далее
4. SerVer1C 925 18.06.25 12:31 Сейчас в теме
(3) Чтоб вам платформу 1С в base64 выкладывали )
5. AlexF1 46 18.06.25 12:42 Сейчас в теме
(4) Я нашел ссылку на этот фреймворк, добавил ее в статью. Спасибо!
6. AlexF1 46 18.06.25 12:45 Сейчас в теме
(4) Я нашел ссылку на этот фреймворк и добавил ее в статью.
7. Viktor_Ermakov 376 19.06.25 10:03 Сейчас в теме
у меня готовиться выпуск открытого расширения библиотеки канбан доска.
Там на нативном HTML JS CSS без использования фреймворков будет работать канбан доска в любой конфигурации.
Никаких сторонних обращений не будет на этом этапе.
Конечно с Vue проще рисовать, но я делал ручками с нуля, в общем ждите.
8. AlexF1 46 19.06.25 10:10 Сейчас в теме
(7) Канбан доска показана просто в качестве примера.
9. Viktor_Ermakov 376 19.06.25 10:29 Сейчас в теме
(8) Да, я понимаю Алексей, спасибо Вам за работу.
Ваш опыт очень интересен для меня, в планах тоже использовать фреймворки, для более красивого, быстрого создания чего либо.
11. AlexF1 46 19.06.25 10:46 Сейчас в теме
(9) Рад что статья оказалась полезной
13. vandalsvq 1660 19.06.25 11:07 Сейчас в теме
(7) в качестве элемента для отображения использовали поле HTML или планировщик прогнули (имел такой опыт, вполне присопособить можно, не так красиво, но вполне жизнеспособно).
14. AlexF1 46 19.06.25 11:09 Сейчас в теме
(13) В качестве элемента отображения используется поле HTML
15. Viktor_Ermakov 376 19.06.25 11:13 Сейчас в теме
(13)
Я в (7) указал что использовал "HTML JS CSS", а такой набор я умею использовать только в ПолеHTML.
В конфигурации Bliz/Tasks используется канбан доска на платформенных возможностях, но я решил чуть ее украсить.
16. starik-2005 3180 19.06.25 11:32 Сейчас в теме
(13)
планировщик
Это одно большое неповоротливое недоразумение )))
17. vandalsvq 1660 19.06.25 12:47 Сейчас в теме
(16) никто не говорит что он прекрасен, но его приготовить съедобным, не факт что процесс готовки понравится ))))
В любом случае у 1С планировщик вышел лучше Диаграммы Ганта, с ней вообще только плакать хочется
10. starik-2005 3180 19.06.25 10:40 Сейчас в теме
Статья скорее полезная. Использовать JS в 1С - это хорошая штука. Там даже дебагер можно вызвать для поля HTML-документа, хотя выглядит он корявенько, но в общем и целом работает. Автор в курсе, кстати?

По поводу огромного кода, то тут скорее к инфостарту претензия, что нет кнопки копирования области. Эти кнопки во всех ИИ есть. Так что я бы попросил местных веб-мастеров сделать такую кнопку, которая бы помещала область кода или вот таким образом приведенного фреймворка в буфер обмена. И если они не умеют, то пусть попросят ИИ - он напишет.

Ну и для неленивых и нетупых - разберитесь с vite, освойте транспиляцию, а то даже ES6 не полностью поддерживается в текущих версиях 1С, а ему уже 10 лет почти.
12. AlexF1 46 19.06.25 10:50 Сейчас в теме
(10) Спасибо что напомнили, про дебагер забыл написать. Для поля HTML документа можно вызвать "Инструменты разработчика", как в браузере. Там можно посмотреть дерево элементов, консоль, ну и сам дебагер. Вызывается сочетанием клавиш ctrl+alt+shift+F12
Прикрепленные файлы:
18. starik-2005 3180 19.06.25 13:16 Сейчас в теме
(12)
забыл написать
Так вы это в статье напишите, а не в комменте. Я эту комбинацию сам нашел случайно, просто попробовав все, что можно. И потом, ища оное в интернетах, заметил, что почти нигде об этом ничего не написано. Поэтому не ленюсь в комментах к таким статьям об этом напоминать. Но неплохо было бы, чтобы об этом в статье народ писал. Самому про это писать не охота, т.к. слишком много знаю про оное, и изложить это в виде простой статьи не получается уже. А цикл - это не мое.
19. xzka 23.06.25 07:28 Сейчас в теме
Поддерживать всё это дело, когда у вас многостраничный сайт очень непростое занятие. И есть нюанс, что 1С не поддерживает последние версии js, некоторые процедуры могут не работать
24. AlexF1 46 23.06.25 12:12 Сейчас в теме
(19) У меня не было необходимости делать многостраничный сайт, по сути совсем не было необходимости делать сайт. Это просто расширение возможностей пользовательского интерфейса. Изначальная задача состояла в том, чтобы дать руководителям подразделений возможность создавать/редактировать рабочий график сотрудников. Средствами 1С удобный интерфейс сделать не получалось. Было принято решение все сделать в HTML. В результате пользователи получили интуитивно понятный функционал, который позволяет без тормозов делать свою работу. На скрине показано как это выглядит в реальности. Есть возможность ставить часы работы по каждому дня. Можно выделить диапазон ячеек и указать одно время для всего диапазона. Можно копировать диапазоны между сотрудниками. Добавлено контекстное меню, в котором есть все необходимые для работы функции. Можно указать разные виды состояния сотрудника (отпуск, больничный, прогул). Разные виды выделяются разными цветами в колонке, при раскрытии колонки можно увидеть подробности (на скрине показано на примере отпуска и рабочих часов). Не сохраненные данные так же подсвечиваются в виде заштрихованной колонки. Выделять, копировать, удалять можно так же горячими клавишами.
В общем ограничений практически нет
Прикрепленные файлы:
20. maxx 999 23.06.25 09:30 Сейчас в теме
Однозначно плюсую. Добавить бы ещё небольшой абзац про интерактив с пользователем в 1С, т.е. отработка нажатий мыши в 1С, то было бы здорово. А то получается, что HTML здесь - просто красивая печатная форма, а не интерфейс взаимодействия с пользователем.
21. AlexF1 46 23.06.25 10:52 Сейчас в теме
(20) В статье есть пример взаимодействия пользователя с полем HTML. На примере редактирования задачи я показал как можно взаимодействовать с данными, которые есть в HTML
22. maxx 999 23.06.25 11:37 Сейчас в теме
(21) Да, точно. Пролистал на телефоне, ВСё СУПЕР.

Кстати не проверяли как всё это выглядит, если зайти в базу через Мобильный клиент?
23. AlexF1 46 23.06.25 11:38 Сейчас в теме
(22) Мобильный клиент не проверял
Оставьте свое сообщение