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

08.12.24

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

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

Скачать файл

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

Наименование По подписке [?] Купить один файл
Демонстрационная обработка
.epf 9,95Kb
8
8 Скачать (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 секунду

 

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

 

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

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

 

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

См. также

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

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

5000 руб.

14.01.2016    55430    17    23    

43

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

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

6000 руб.

16.01.2015    63823    44    59    

82

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

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

2400 руб.

29.06.2020    19711    28    6    

43

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

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

20.08.2024    21770    mrXoxot    44    

128

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

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

27.05.2024    10910    smielka    37    

105

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

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

27.12.2023    17944    1225    elcoan    53    

125

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

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

3 стартмани

10.04.2023    12647    167    acces969    31    

126
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. dsdred 3776 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) Почему оно может там не работать? Там же везде один и тот же вебкит отрисовывает.
Viktor_Ermakov; +1 Ответить
6. Serg2000mr 763 09.12.24 23:29 Сейчас в теме
(4) Это даже не поле HTML, а поле картинки, где картинка в векторном формате. И да, должно работать и в веб-клиенте, и на линуксе.
8. webester 26 10.12.24 05:02 Сейчас в теме
(6) Вы же не думаете, что каким-то волшебным образом интерфейс совпадает и в вебклиенте и на декстопах без каких либо усилий? Управляемые формы целиком генерятся вебкитом.
7. Serg2000mr 763 09.12.24 23:58 Сейчас в теме
(3) Особенности SVG в Linux
Прикрепленные файлы:
5. triviumfan 98 09.12.24 13:03 Сейчас в теме
Приятные вкладки, всегда ими пользовался. Правда они раньше ещё могли закрепляться)
Serg2000mr; +1 Ответить
9. Serg2000mr 763 10.12.24 11:01 Сейчас в теме
(8) Управляемые формы рендерятся с помощью собственного движка 1С. И базовый рендеринг, и обработка событий осуществляются внутренними механизмами платформы. WebKit используется в веб-клиенте 1С, но не для управляемых форм непосредственно.
10. webester 26 10.12.24 11:02 Сейчас в теме
Управляемые формы рендерятся с помощью собственного движка 1С

Как вы это поняли?
11. Serg2000mr 763 10.12.24 11:06 Сейчас в теме
(10) Статья. Только некоторые элементы управляемого интерфейса используют webkit
webester; +1 Ответить
14. user1863362 10.12.24 19:33 Сейчас в теме
(9)
WebKit используется в веб-клиенте 1С
Неправда! Там используется Gecko!
15. Serg2000mr 763 10.12.24 19:40 Сейчас в теме
(14) Ну, в общем, да. Разные браузеры используют разные движки. Это может быть Gecko, Webkit, Blink и т.д.
Award; user1863362; +2 Ответить
12. Sashares 35 10.12.24 11:21 Сейчас в теме
13. Serg2000mr 763 10.12.24 12:12 Сейчас в теме
(12) Выглядит прикольно ) Вопрос правда, не ухудшится ли когнитивная сложность интерфейса при большом количестве данных. Все эти закругления могут быть приятными на вид поначалу, но вызывать утомляемость при постоянном использовании. Прямоугольные структуры глаз распознает быстрее.

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


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