Разработка пользовательских интерфейсов в 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
0
0 Скачать (1 SM) Купить за 1 850 руб.

Что такое 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с  

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

См. также

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

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

14400 руб.

27.03.2025    2134    7    9    

12

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

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

6000 руб.

14.01.2016    56903    19    25    

45

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

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

6000 руб.

18.01.2022    10857    2    2    

7

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

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

2400 руб.

29.06.2020    20821    30    6    

46

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

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

20.08.2024    31310    mrXoxot    44    

134

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

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

27.05.2024    17273    smielka    37    

105

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

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

27.12.2023    19838    1257    elcoan    53    

128

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

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

3 стартмани

10.04.2023    13965    174    acces969    31    

131
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. SerVer1C 922 18.06.25 12:19 Сейчас в теме
Вставлять в статью текстовое содержимое открытого фреймворка, вместо ссылки на него, это ......... Даже слов нет....
2. AlexF1 25 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 922 18.06.25 12:31 Сейчас в теме
(3) Чтоб вам платформу 1С в base64 выкладывали )
5. AlexF1 25 18.06.25 12:42 Сейчас в теме
(4) Я нашел ссылку на этот фреймворк, добавил ее в статью. Спасибо!
6. AlexF1 25 18.06.25 12:45 Сейчас в теме
(4) Я нашел ссылку на этот фреймворк и добавил ее в статью.
Оставьте свое сообщение