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

11.07.25

На управляемых формах отсутствуют нормальные вертикальные закладки, какие были в обычных формах. Решаем эту задачу через SVG-картинки.

Файлы

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

Наименование	Скачано	Купить файл (только для физ. лиц)	По подписке PRO
Демонстрационная обработка .epf 9,95Kb 12	12	1 850 руб. Купить	1 SM Скачать

Вступление

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

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

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

Идея

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="152">
  
  <rect x="1" y="1" width="28" height="150" fill="#ffffff" stroke="#a9a9a9" stroke-width="1" rx="5"/>
  <text x="16" y="76" fill="#000000" font-family="Arial" font-size="12" text-anchor="middle" transform="rotate(-90, 16, 76)">
    Документ
  </text>

</svg>

Это не фрагмент! Всего 6 строк в файле.

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

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

Результат

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

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

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

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

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

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

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

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

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

ТОП-5 ИНСТРУМЕНТОВ ДЛЯ РАЗРАБОТЧИКА 1С

Toolkit, DCT, OneDebugger, PrintWizard, DataFormWizard
со скидкой 20% при покупке от 2х решений!

УЗНАТЬ ПОДРОБНЕЕ

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

+54 –1

См. также

1С Инфоборды (дашборды, виджеты, монитор показателей, BI аналитика)

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

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

24000 руб.

27.03.2025 9011 20 13

Условное оформление формы в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

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

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

6000 руб.

18.01.2022 11476 3 3

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

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

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

6000 руб.

16.01.2015 65585 45 60

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

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

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

2400 руб.

29.06.2020 21276 31 6

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

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

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

20.08.2024 34617 mrXoxot 44

135

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

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

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

27.05.2024 19959 smielka 37

106

Новогоднее оформление для 1С

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

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

27.12.2023 20605 1273 elcoan 53

128

Конструктор HTML, CSS и javascript

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

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

3 стартмани

10.04.2023 14492 175 acces969 31

131

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. dsdred 3958 08.12.24 19:04 Сейчас в теме

Красиво.

2. user2117977 08.12.24 21:48 Сейчас в теме

Оу

3. efin 09.12.24 03:24 Сейчас в теме

Подскажите, в веб-клиенте работает? На линуксе работает?

4. webester 26 09.12.24 06:30 Сейчас в теме

(3) Почему оно может там не работать? Там же везде один и тот же вебкит отрисовывает.

6. SergDobrodelov 716 09.12.24 23:29 Сейчас в теме

(4) Это даже не поле HTML, а поле картинки, где картинка в векторном формате. И да, должно работать и в веб-клиенте, и на линуксе.

8. webester 26 10.12.24 05:02 Сейчас в теме

(6) Вы же не думаете, что каким-то волшебным образом интерфейс совпадает и в вебклиенте и на декстопах без каких либо усилий? Управляемые формы целиком генерятся вебкитом.

7. SergDobrodelov 716 09.12.24 23:58 Сейчас в теме

(3) Особенности SVG в Linux

Прикрепленные файлы:

5. triviumfan 102 09.12.24 13:03 Сейчас в теме

Приятные вкладки, всегда ими пользовался. Правда они раньше ещё могли закрепляться)

9. SergDobrodelov 716 10.12.24 11:01 Сейчас в теме

(8) Управляемые формы рендерятся с помощью собственного движка 1С. И базовый рендеринг, и обработка событий осуществляются внутренними механизмами платформы. WebKit используется в веб-клиенте 1С, но не для управляемых форм непосредственно.

10. webester 26 10.12.24 11:02 Сейчас в теме

Управляемые формы рендерятся с помощью собственного движка 1С

Как вы это поняли?

11. SergDobrodelov 716 10.12.24 11:06 Сейчас в теме

(10) Статья. Только некоторые элементы управляемого интерфейса используют webkit

14. user1863362 10.12.24 19:33 Сейчас в теме

(9)

WebKit используется в веб-клиенте 1С

Неправда! Там используется Gecko!

15. SergDobrodelov 716 10.12.24 19:40 Сейчас в теме

(14) Ну, в общем, да. Разные браузеры используют разные движки. Это может быть Gecko, Webkit, Blink и т.д.

12. Sashares 33 10.12.24 11:21 Сейчас в теме

Давай по новой, Миша(с)
https://wonderland.v8.1c.ru/blog/novyy-interfeys-1s-predpriyatie-8/

13. SergDobrodelov 716 10.12.24 12:12 Сейчас в теме

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

Один из примеров чрезмерного дизайна - анимация перемещения скачиваемого файла в правый верхний угол экрана в Яндекс-браузере. Каждый раз возникает небольшое головокружение.

16. slknnk 78 14.12.24 18:03 Сейчас в теме

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

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

Прикрепленные файлы:

17. SergDobrodelov 716 14.12.24 22:58 Сейчас в теме

(16) Это надо будет посмотреть, как чтобы и на 8.3.21 отображалось нормально.
Проблему "колхозинга" попробуйте решить через размер или масштаб шрифта. В браузере данная svg отображается очень четко. Масштабируя окно обработки в 1С, можно увидеть, что этот векторный шрифт нечеткий только при определенных масштабах.