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

08.12.24

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

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

Скачать файл

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

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

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

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


См. также

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

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

5000 руб.

14.01.2016    55705    17    23    

43

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

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

6000 руб.

16.01.2015    64094    45    60    

83

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

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

2400 руб.

29.06.2020    20026    28    6    

44

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

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

20.08.2024    24095    mrXoxot    44    

130

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

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

27.05.2024    12409    smielka    37    

105

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

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

27.12.2023    18492    1230    elcoan    53    

127

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

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

3 стартмани

10.04.2023    12971    167    acces969    31    

126

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

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    8219    kalyaka    6    

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

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

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


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