🔥 Горящие вакансии
Все статьи

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

При заказной разработке в 1С каждый аналитик хотя бы раз сталкивался с проблемой презентации и согласования предлагаемого решения.

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

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

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

Для быстрого решения проблемы создания UI в 1С в сети появился сервис 1С Maker.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

 

Как создавать UI в 1С с помощью 1С Maker

1С Maker — сервис для разработки интерфейса в 1С на платформе 8.3. У пользователя пропадает потребность в предварительном добавлении специфических форм, кнопок и элементов.

1С Maker — очень дружелюбный к пользователю сайт. Между его запуском и появлением первой созданной формы могут пройти считанные минуты. Навигация интуитивная, нет потребности в изучении инструкций и ознакомительной документации.

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

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Следует отметить один немаловажный нюанс: количество доступных проектов разнится в зависимости от тарифа. К сожалению, на момент написания материала бесплатная или базовая версия была очень ограничена и предусматривала создание всего двух проектов по пять форм. Количество пользователей только два. За каждую дополнительную форму или проект необходимо внести оплату, а добавление новых пользователей, шаринг формы и мультиязычный интерфейс не входят в пакет. Для полного доступа к сайту необходимо оплатить подписку. Размер оплаты зависит от выбранного тарифа и, соответственно, потребностей пользователя.

При создании формы сервис предлагает выбрать Тип устройства, Конфигурацию и тип объекта.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Тип устройства может быть:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Список конфигураций и типов объекта достаточно обширный:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

При этом, не зависимо от выбора состав и внешний вид форм не меняется никак ¯\_ (ツ)_/¯

Также есть возможность добавить типовой документ из шаблона, что очень облегчает задачу по отрисовке и доработке таких документов.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Немного печалит тот факт, что шаблоны не добавлялись и не менялись с 2021 года.

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

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Рабочая область макета состоит из трех частей:

  1. Элементы
  2. Форма
  3. Свойства

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

В поле «Элементы» приведен перечень всех доступных для добавления элементов.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Таблицы, кнопки и чек-боксы по форме можно перемещать мышкой.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Таблицы можно редактировать; заполнять и заголовки, и данные построчно.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

Вывод. 1С Maker — простой и доступный инструмент для оперативного решения вопросов по визуализации ТЗ и разработке UI в. 1С. Инструмент не требователен к уровню квалификации пользователей, что повлекло за собой упрощение функционала. Однако сайт имеет некоторые шероховатости и недоработки, которые, хочется верить, в будущем будут исправлены.

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

Смоделируем ситуацию, в которой заказчик ставит задачу, а аналитик создает UI для 1С при помощи 1CMaker.

Задача: Добавить в документ «Прием на работу» новый реквизит под названием: «Грейд», в котором будет прописываться информация о квалификации сотрудника.

Первый шаг: создание проекта.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Второй шаг: создание в проекте новой формы.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

В связи с тем, что наша задача — доработать типовой документ, то воспользуемся возможностью «Создать из шаблона».

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Выбираем нужный шаблон и нажимаем «Скопировать»:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Наш шаблон появляется на экране «Проекты».

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Шаг третий: изменение шаблонной формы.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

В первую очередь необходимо освободить место под новый реквизит:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Каждый элемент требуется сдвигать по отдельности.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

Следующим шагом добавляем на форму два элемента: «Текст» и «Поле ввода».

После того как добавили элемент «Текст», нужно ввести размеры и значение.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Следующий шаг — это добавление «Поля ввода». После того как вы разместите реквизит на форме, нужно задать размер.

В зависимости от функционала поля можно добавить те или иные элементы.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Так будет выглядеть результат добавления нового объекта

Так будет выглядеть результат добавления нового объекта

Рассмотрим пример создания формы с нуля. В форме проекта нажимаем клавишу: «Создать новую форму».

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Заполняем поля, создаем, затем открываем форму.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Первым шагом — добавляем кнопки.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Меняем размеры и названия. Для этого выделяем нужную кнопку и в окне свойств редактируем:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Есть возможность добавить иконку, очистить иконку. Размеры можно изменить задав их числом либо «Растянуть» мышкой.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Следующим шагом добавляем чек-бокс и растягиваем на ширину формы.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

В окне свойств меняем текст и указываем положение флажка (да\нет).

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Финальным шагом настраиваем размер самой формы, чтобы сократить поля. Это можно сделать нажав на свободное поле — выделится сама форма.

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Задав нужные значения, получаем готовый результат:

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

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

Видео: создание формы для константы в 1С с помощью 1C Maker

1С Maker: онлайн-сервис для UI и UX дизайна в 1С

Отправить резюме

    Я согласен на обработку персональных данных в соответствии
    со ст. 9 ФЗ № 152-ФЗ «О персональных данных»

    Pекомендовать друга

      Выбрать вакансию
      • Программист 1С
      • Консультант-аналитик 1С
      • Разработчик Android
      • Разработчик iOS
      • Разработчик React JS (middle)
      • Разработчик React Native (middle)
      • UX/UI дизайнер
      • Аналитик
      • QA engineer (тестировщик)
      • Разработчик PHP (senior)
      • Разработчик React JS
      • Разработчик Flutter
      • Разработчик React Native
      • Проекты для команды специалистов 1С
      • Вакансия для специалистов 1С: ИП, СЗ и юрлиц
      • Ведущий консультант Microsoft Dynamics 365 Sales
      • Консультант по финансам Microsoft Dynamics AX
      • Руководитель проектов Microsoft Dynamics 365 FO и AX 2012
      • Консультант Microsoft Dynamics AX на зарубежные проекты
      • Ведущий консультант Microsoft Dynamics 365 Finance and Operation
      • Разработчик Microsoft Dynamics 365 for Finance and Operations
      • Разработчик Microsoft Dynamics Axapta
      • Разработчик PHP (фреймворк Yii2 или Laravel)
      • Разработчик Bitrix
      • Ведущий разработчик Microsoft Dynamics AX на зарубежные проекты
      • Разработчик PHP
      Я согласен на обработку персональных данных в соответствии
      со ст. 9 ФЗ № 152-ФЗ «О персональных данных»

      Спасибо!

      Мы получили ваше резюме. Менеджер свяжется с вами в течение трех дней

      Горящие вакансии