Улучшаем интерфейс. Вертикальные закладки

11.07.25

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

+56 –1
> > >
  • Вертикальные закладки.png
  • Много неиспользуемого места.png
  • Рамка группы.png
  • Вертикальные закладки.gif
На управляемых формах отсутствуют нормальные вертикальные закладки, какие были в обычных формах. Решаем эту задачу через SVG-картинки.

Файлы

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

Наименование Скачано Купить файл
Демонстрационная обработка
.epf 9,95Kb
14 2 500 руб. Купить

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

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

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

Вступление

 

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

 

Выглядит это не очень и остается много свободного места. А на экране и так места мало.

 

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

 

Идея

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

Призвав на помощь ChatGPT (нужен VPN) и взяв пример из статьи, я создал несколько кнопок с вертикальным текстом.

 
 Содержимое SVG-файла с кнопкой

 

А вот так они выглядят:

 

         

 

На каждую закладку по две картинки, активное и неактивное состояние. Картинки можно создавать заранее, но как видно, их легко сгенерировать программно. Если нужно, можно добавить на них иконку, но этого я делать пока не стал.

 

 

Результат

Спустя непродолжительное время я сделал рабочую обработку.

 

 

Ура! Давняя проблема легко решена.

 

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

 

 

Но, как оказалось, это легко решается: в свойствах шрифта заголовка страницы устанавливаем масштаб шрифта 0%. Идея взята отсюда Рамка группы в управляемых формах за 1 секунду

 

Однако, как выяснилось, эта фишка работает только при режиме совместимости от 8.3.20 и выше.
В режиме совместимости 8.3.6 и ниже содержимое такой закладки вообще не отображается.

 

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

 

Обработка приложена. Файлы SVG можно получить, если сохранить обработку в XML.

Файл - Сохранить как - Тип файла "Внешняя обработка в XML формате".

 

 

Протестировано на платформе 8.3.25.

ТОП-6 инструментов для разработчика 1С

Подборка лучших инструментов для разработчика 1С включает Toolkit, DCT, OneDebugger, PrintWizard, DataFormWizard и Infostart MCP. Любой инструмент со скидкой 20% при покупке от двух решений.

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

+56 –1

См. также

Infostart Dashboard: Монитор показателей, виджеты и дашборды в 1С 8.3

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

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

31720 руб.

27.03.2025    80117    54    42    

65
Дизайнер форм 1С

Разработка Инструментарий разработчика Работа с интерфейсом Адаптация типовых решений Нейросети 1C:Бухгалтерия 1C:ERP 1С:ЗУП 1С:КА 1С:УНФ 1С:УТ 1С:Розница 1С:ДО 1С:ERP Управление предприятием 2 Платные (руб)

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

36600 руб.

28.08.2025    7591    2    2    

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

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

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

6100 руб.

14.01.2016    60365    22    25    

47
Удобные фильтры: динамические кнопки-закладки для списков в 1С

Консолидация данных Работа с интерфейсом Программист Пользователь 1С:Предприятие 8 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 1C:ERP Узбекистан Беларусь Кыргызстан Россия Казахстан Платные (руб)

Знакомая ситуация? Пользователи, особенно менеджеры, уверены: отборов много не бывает. Идут пожелания добавить в форму списка еще один быстрый фильтр, еще два, еще пять... В итоге интерфейс превращается в нагромождение полей отбора, а потребность в «самом главном» отборе, который «вот прямо сейчас нужен», все равно не закрыта. Универсальное расширение, которое решает эту проблему элегантно и технологично. С его помощью в любую форму списка можно легко добавить панель настраиваемых кнопок-закладок, каждая из которых применяет сложный фильтр-запрос, а так же показывает актуальное количество элементов в реальном времени.

6088 руб.

17.10.2025    1958    3    0    

2
Настройки управляемых форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, доступ для 1С:УТ 11

Работа с интерфейсом 1С:Предприятие 8 1С:Управление торговлей 11 Россия Платные (руб)

Настройки управляемых форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, условное оформление, доступ и пр. для 1С

6100 руб.

20.02.2018    23365    25    21    

42
Универсальный редактор картинок 1С, хранимых в базе, с возможностью рисования

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

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

6100 руб.

16.01.2015    68187    46    60    

85
Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер 1С:Предприятие 8 Бесплатно (free)

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

20.08.2024    48987    mrXoxot    44    

139
Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист 1С:Предприятие 8 Бесплатно (free)

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

27.05.2024    26374    smielka    39    

116
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. dsdred 4220 08.12.24 19:04 Сейчас в теме
Красиво.
baranchikov; SergMuravev; +2 – Ответить
2. user2117977 08.12.24 21:48 Сейчас в теме
Оу
+ – Ответить
3. efin 09.12.24 03:24 Сейчас в теме
Подскажите, в веб-клиенте работает? На линуксе работает?
+ – Ответить
4. webester 26 09.12.24 06:30 Сейчас в теме
(3) Почему оно может там не работать? Там же везде один и тот же вебкит отрисовывает.
Viktor_Ermakov; +1 – Ответить
6. SergMuravev 883 09.12.24 23:29 Сейчас в теме
(4) Это даже не поле HTML, а поле картинки, где картинка в векторном формате. И да, должно работать и в веб-клиенте, и на линуксе.
+ – Ответить
8. webester 26 10.12.24 05:02 Сейчас в теме
(6) Вы же не думаете, что каким-то волшебным образом интерфейс совпадает и в вебклиенте и на декстопах без каких либо усилий? Управляемые формы целиком генерятся вебкитом.
+ – Ответить
7. SergMuravev 883 09.12.24 23:58 Сейчас в теме
(3) Особенности SVG в Linux
Прикрепленные файлы:
+ – Ответить
5. triviumfan 101 09.12.24 13:03 Сейчас в теме
Приятные вкладки, всегда ими пользовался. Правда они раньше ещё могли закрепляться)
SergMuravev; +1 – Ответить
9. SergMuravev 883 10.12.24 11:01 Сейчас в теме
(8) Управляемые формы рендерятся с помощью собственного движка 1С. И базовый рендеринг, и обработка событий осуществляются внутренними механизмами платформы. WebKit используется в веб-клиенте 1С, но не для управляемых форм непосредственно.
+ – Ответить
10. webester 26 10.12.24 11:02 Сейчас в теме
Управляемые формы рендерятся с помощью собственного движка 1С

Как вы это поняли?
+ – Ответить
11. SergMuravev 883 10.12.24 11:06 Сейчас в теме
(10) Статья. Только некоторые элементы управляемого интерфейса используют webkit
webester; +1 – Ответить
14. user1863362 10.12.24 19:33 Сейчас в теме
(9)
WebKit используется в веб-клиенте 1С
Неправда! Там используется Gecko!
+ – Ответить
15. SergMuravev 883 10.12.24 19:40 Сейчас в теме
(14) Ну, в общем, да. Разные браузеры используют разные движки. Это может быть Gecko, Webkit, Blink и т.д.
Award; user1863362; +2 – Ответить
12. Sashares 33 10.12.24 11:21 Сейчас в теме
Давай по новой, Миша(с)
https://wonderland.v8.1c.ru/blog/novyy-interfeys-1s-predpriyatie-8/
+ – Ответить
13. SergMuravev 883 10.12.24 12:12 Сейчас в теме
(12) Выглядит прикольно ) Вопрос правда, не ухудшится ли когнитивная сложность интерфейса при большом количестве данных. Все эти закругления могут быть приятными на вид поначалу, но вызывать утомляемость при постоянном использовании. Прямоугольные структуры глаз распознает быстрее.

Один из примеров чрезмерного дизайна - анимация перемещения скачиваемого файла в правый верхний угол экрана в Яндекс-браузере. Каждый раз возникает небольшое головокружение.
+ – Ответить
16. slknnk 81 14.12.24 18:03 Сейчас в теме
Но, как оказалось, это легко решается: в свойствах шрифта заголовка страницы устанавливаем масштаб шрифта 0%.


Не факт что эта особенность будет дальше работать. Например на релизе 8.3.21 скрытые таким способом заголовки страниц отображаются. Это конечно уже старенький релиз, но на крупных проектах не часто обновляют платформу.
Сам шрифт заголовков этих "вертикальных" страниц отображается не сглаженным, сразу бросается в глаза, что колхозинг не нативный.
Прикрепленные файлы:
+ – Ответить
17. SergMuravev 883 14.12.24 22:58 Сейчас в теме
(16) Это надо будет посмотреть, как чтобы и на 8.3.21 отображалось нормально.
Проблему "колхозинга" попробуйте решить через размер или масштаб шрифта. В браузере данная svg отображается очень четко. Масштабируя окно обработки в 1С, можно увидеть, что этот векторный шрифт нечеткий только при определенных масштабах.
+ – Ответить
Для отправки сообщения требуется регистрация/авторизация