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

12.03.25

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

Скачать файл

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

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

Вступление

В конфигурациях 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С v8.3 8.3.14 1C:Бухгалтерия 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Платные (руб)

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

9600 руб.

27.03.2025 934 3 5

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

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

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

6000 руб.

14.01.2016 56238 19 25

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

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

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

2400 руб.

29.06.2020 20481 30 6

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

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

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

6000 руб.

16.01.2015 64577 45 60

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

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

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

20.08.2024 27814 mrXoxot 44

132

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

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

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

27.05.2024 14715 smielka 37

105

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

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

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

27.12.2023 19202 1249 elcoan 53

128

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

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

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

3 стартмани

10.04.2023 13518 172 acces969 31

130

Комментарии

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

Свернуть все

1. dsdred 3819 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. Serg2000mr 700 09.12.24 23:29 Сейчас в теме

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

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

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

7. Serg2000mr 700 09.12.24 23:58 Сейчас в теме

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

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

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

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

9. Serg2000mr 700 10.12.24 11:01 Сейчас в теме

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

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

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

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

11. Serg2000mr 700 10.12.24 11:06 Сейчас в теме

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

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

(9)

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

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

15. Serg2000mr 700 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. Serg2000mr 700 10.12.24 12:12 Сейчас в теме

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

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

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

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

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

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

17. Serg2000mr 700 14.12.24 22:58 Сейчас в теме

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