Варианты отображений свертываемых групп

19.12.17

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

Как пользователю только одним внешним видом сказать "Тут есть нужные данные. Только нажми". Используем разные варианты свертываемых групп.

Скачать файлы

Наименование Файл Версия Размер
Пример сворачиваемых групп
.epf 7,77Kb
36
.epf 1.0.1 7,77Kb 36 Скачать

Добрый день, коллеги.

Понадобилось мне для удобства расположения элементов на управляемой форме использовать свертываемые группы (группа с установленным свойством «Поведение» = Свертываемая).

Я смог выделить 5 видов отображения данной группы на форме.

Смотрите пример отображения всех развернутых групп:

И тут же как выглядят свернутые группы:

Вариант I. Это вариант по умолчанию. Группа отображается на форме в виде гиперссылки (Свойство "ОтображениеУправления" = "Гипперссылка заголовка"), что новым пользователям совсем не очевидно, а уже бывалым – тоже не сразу понятно.

Визуально это видно по скриншотам на примере "Сворачиваемая группа наша группа 1"

Согласитесь, довольно непросто догадаться, что эту группу можно свернуть.

Вариант II. Благо у нас есть еще один режим отображения свертываемой группы - картинкой (Свойство "ОтображениеУправления" = "Гипперссылка заголовка"). При этом все становится намного лучше и понятнее всем.  (Визуально это видно по скриншотам на примере "Сворачиваемая группа наша группа 1")

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

Вариант III. Если же вам хочется использовать вид гиперссылки с соответствующим подчеркиванием, то тут можно использовать один прием, который позволит вам показать пользователю, что тут все-таки не просто надпись. Для реализации следующего метода нам понадобится значки спецсимволов треугольников (смотри таблицу спецсимволов - символы "черный треугольник вниз" и "черный треугольник направо"): и мы будем использовать свойство: "ЗаголовокСвернутогоОтображения"

В нашем примере мы используем следующую строку заголовка: " Сворачиваемая группа наша группа 3". А в заголовке свернутого отображения (соответствующее свойство) укажем следующую строку " Сворачиваемая группа наша группа 3". При этом Свойство "ОтображениеУправления" должно быть установлено в значение "Гиперссылка заголовка". Тогда мы получим поведение как у нашей группы 3 на скриншотах. Так же данный вид используется для сворачиваемых групп в конфигурации 1С: Деньги

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

Вариант IV. Так же в типовой УТ я нашел еще одно интересное решение. Визуально решение представляет собой следующие вариант группы № 5 на скриншоте.

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

Тут используются 2 картинки со стрелками и рамками:

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

Но тут уже без программирования не обойтись.

В модуль формы необходимо будет добавить следующий код:

&НаКлиенте
Процедура СвернутьРазвернутьГруппу(Элемент)
	ИмяГруппыСвернутьРазвернуть = Элемент.Имя;
	ИмяГруппыСвернутьРазвернуть = СтрЗаменить(ИмяГруппыСвернутьРазвернуть, "ДекорацияОткрыть", "");
	ИмяГруппыСвернутьРазвернуть = СтрЗаменить(ИмяГруппыСвернутьРазвернуть, "ДекорацияЗакрыть", "");
	ИмяГруппыСвернутьРазвернуть = СтрЗаменить(ИмяГруппыСвернутьРазвернуть, "ЗаголовокГруппы", "");
	ИзменитьСвернутостьГруппы(ИмяГруппыСвернутьРазвернуть);
	ПодключитьОбработчикОжидания("УстановитьАктивностьПослеСворачиванияРазворачиванияГруппы",0.0001,Истина);
КонецПроцедуры

&НаСервере
Процедура ИзменитьСвернутостьГруппы(ИмяГруппы, Свернуть = Неопределено)
	Элементы["СворачиваемаяГруппа" + ИмяГруппы].Видимость = ?(Свернуть = Неопределено, Не Элементы["СворачиваемаяГруппа" + ИмяГруппы].Видимость, Не Свернуть);
	Элементы["ДекорацияОткрыть" + ИмяГруппы].Видимость = ?(Свернуть = Неопределено, Не Элементы["ДекорацияОткрыть" + ИмяГруппы].Видимость, Свернуть);
	Элементы["ДекорацияЗакрыть" + ИмяГруппы].Видимость = ?(Свернуть = Неопределено, Не Элементы["ДекорацияЗакрыть" + ИмяГруппы].Видимость, Не Свернуть);
КонецПроцедуры

&НаСервере
Процедура СкрытьРаскрытьВсеГруппы(Свернуть = Неопределено)
	
	ИменаСворачиваемыхГрупп = ИменаСворачиваемыхГрупп();
	
	Для Каждого ИмяГруппы из ИменаСворачиваемыхГрупп Цикл
		
		ИзменитьСвернутостьГруппы(ИмяГруппы, Свернуть);
		
	КонецЦикла;
	
КонецПроцедуры

&НаСервере
Функция ИменаСворачиваемыхГрупп()
	
	ИменаСворачиваемыхГрупп = Новый Массив;
	
	ИменаСворачиваемыхГрупп.Добавить("НашаГруппа4");
	ИменаСворачиваемыхГрупп.Добавить("НашаГруппа5");

	Возврат ИменаСворачиваемыхГрупп;
КонецФункции

&НаКлиенте
Процедура УстановитьАктивностьПослеСворачиванияРазворачиванияГруппы()
	Если Элементы["ДекорацияОткрыть" + ИмяГруппыСвернутьРазвернуть].Видимость Тогда
		ТекущийЭлемент = Элементы["ДекорацияОткрыть" + ИмяГруппыСвернутьРазвернуть];
	Иначе
		ТекущийЭлемент = Элементы["ДекорацияЗакрыть" + ИмяГруппыСвернутьРазвернуть];
	КонецЕсли;
КонецПроцедуры

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	СкрытьРаскрытьВсеГруппы(Истина);
КонецПроцедуры

 

На форме же нам необходимо сделать следующее:

1) Добавить реквизит формы с названием "ИмяГруппыСвернутьРазвернуть" и Типом Строка (0).

2) У нашей сворачиваемой группы установить название вида "СворачиваемаяГруппаНашеНазваниеГруппы" - у меня в примере это "СворачиваемаяГруппаНашаГруппа4"

3) У сворачиваемой группы установить свойство "Поведение" в значение "Свертываемая" и снять флажок в свойстве группы "ОтображатьЗаголовок" - чтобы не было видно название группы

4) Нам надо добавить вторую группу. Особо требований к названию нет, оно должно быть уникальным. У нас мы назвали ее "ГруппаЗаголовокНашаГруппа4"

5) В данную группу необходимо добавить 3 декорации. 2 с видом "Картинка" и одна с видом "Надпись". Картинки будут хранить изображения стрелок (либо других изображений) для открытой и закрытой группы. Надпись - будет эмулировать заголовок группы. При этом есть требования к названию данных элементов (как видно из приложенного кода). Картинки должны иметь названия вида "ДекорацияОткрытьНашеНазваниеГруппы" и "ДекорацияЗакрытьНашеНазваниеГруппы". Элемент с надписью должен иметь название вида "ЗаголовокГруппыНашеНазваниеГруппы"

У нас, как видно из картинки, видно, что элементы называются соответственно "ДекорацияОткрытьНашаГруппа4", "ДекорацияЗакрытьНашаГруппа4", "ЗаголовокГруппыНашаГруппа4".

6) Для Декораций с видом "Картинка" нам необходимо естественно установить саму картинку, установить флаг свойства декорации "Гиперссылка" в значение "Истина", а в качестве обработчика события "Нажатия" выбрать процедуру модуля "СвернутьРазвернутьГруппу".

По желанию так же можно установить флаг "Гиперссылка" для декорации вида "Надпись" и эту же процедуру выбрать в качестве обработчика нажатия.

7) в модуле формы в функции "ИменаСворачиваемыхГрупп" необходимо задать массив элементов, которые необходимо включить в данный механизм обработки. Имя должно быть вида "НашеНазваниеГруппы". В примере кода вы можете видеть строку вида:

ИменаСворачиваемыхГрупп.Добавить("НашаГруппа4");
ИменаСворачиваемыхГрупп.Добавить("НашаГруппа5");

8) При создании формы (и по желанию при совершении любых других действий) скрыть либо раскрыть все группы добавить вызов функции "СкрытьРаскрытьВсеГруппы". Например, для того, чтобы скрыть все группы нужно использовать следующий код:

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	СкрытьРаскрытьВсеГруппы(Истина);
КонецПроцедуры

Структура отображаемых элементов формы будет иметь следующий вид:

Вариант V. Отличается от 4-го варианта тем, что мы декорация вида "Надпись" сделали гиперссылкой и раскрыть группировку можно и по нажатию на заголовок, а не только как в варианте 4 только по клику на изображение.

P.S. Во вложении обработка, которая демонстрирует выше описанный пример.

Группа Поведение Свертываемая Отображение Ссылка Картинка

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

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

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

6000 руб.

16.01.2015    61813    43    59    

80

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

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

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

5000 руб.

14.01.2016    54410    16    21    

42

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

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

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

2400 руб.

29.06.2020    16705    21    4    

35

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

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

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

27.12.2023    10751    750    elcoan    45    

106

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

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9631    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

1 стартмани

05.07.2022    3672    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12087    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. DrAku1a 1679 20.12.17 08:40 Сейчас в теме
Спасибо! Очень наглядно и понятно!
Vyacheslide; Kim1C; +2 Ответить
2. rusinfostart 21.12.17 03:57 Сейчас в теме
Добавлено, в архив добрых дел:)
Vyacheslide; Kim1C; +2 Ответить
3. ildary 21 22.12.17 15:03 Сейчас в теме
(2) Скажите пожалуйста, где можно взглянуть на этот архив?
user717534; +1 Ответить
4. Vyacheslide 22 25.12.17 07:03 Сейчас в теме
Спасибо! Очень полезная статья))
5. UtSpar 134 25.12.17 07:53 Сейчас в теме
Интересная статья, первый вариант - не всегда понятно что группа свернутая, а остальные варианты со стрелочками дают понять что там что то есть.
Но например у нас, в большинстве случаев пользователь понимает что внутри группы что то есть, но боится нажимать чтобы ничего не сломать, поэтому вторая проблема доказать пользователю что когда развернешь группу ничего не сломается и заполненная тобою форма в течении добрых минут 20 не закроется.
6. Kim1C 178 25.12.17 10:42 Сейчас в теме
(5) У меня, к счастью, подобных случаев пока что не было. Вы как решаете данную проблему?
8. UtSpar 134 25.12.17 11:08 Сейчас в теме
(6) Мы используем agile методолгию Scrum, по ней мы раз в две недели пользователям по видео конференции показываем то что сделали, и вот такие моменты, не только с группами показываем. Например "Кстати вот в этом примере в таблице нет кнопок переместить, но можно нажать еще, и выбрать там кнопку переместить", вообщем так советами при демонстрации повышаем граммотность пользователей)
7. DarkUser 25.12.17 11:03 Сейчас в теме
Наверное самый лучший вариант это III.
Проблемы 4 и 5 варианта в том, что делается серверный контекстный вызов для изменения видимости элементов формы. При тяжелых формах это бывает довольно затратным. Однако, плюсы 4 и 5 варианта в том, что всегда программно можно узнать состояние группы, свернута или развернута. В типовых сворачиваемых группах этого очень не хватает.
9. Kim1C 178 28.12.17 09:17 Сейчас в теме
(7)В принципе начиная с платформы версии 8.3.7 изменения свойства видимости (на чем построены 4 и 5 варианты) уже не требует вызова сервера (см. https://its.1c.ru/db/metod8dev#content:5898:hdoc). Для этого так же надо чтобы в конфигурации режим совместимости стоял начиная от 8.3.7 и выше.
Но тогда придется продублировать код. т.е. функция
Процедура ИзменитьСвернутостьГруппы(ИмяГруппы, Свернуть = Неопределено)
должна разделиться на 2 - одна для сервера, вторая для клиента (к сожалению директива компиляции &НаКлиентеНаСервере в модуле формы недоступна). Для функции же
Функция ИменаСворачиваемыхГрупп()
надо изменить директиву компиляции и сделать ее
&НаКлиентеНаСервереБезКонтекста
.
Я посмотрел, у меня после этих изменения, почему-то все равно идет вызов сервера при сворачивании или разворачивании 4/5 вариантов. Скорее всего неявный. Будет время, разберусь где
10. CoderEgoist 18.04.19 19:35 Сейчас в теме
(9) Судя по всему, не для всех элементов формы это работает. Если изменять видимость Группы или Табличной части то серверный вызов выполняется. Если элемент связанного с реквизитом формы типа строка, тогда серверного вызова нет.
11. user1639897 06.08.21 16:19 Сейчас в теме
Добрый день, по варианту III не получилась строка со стрелкой, можете написать эту строку еще раз?
Smollsan; +1 Ответить
12. maxim_saharov 04.10.21 14:35 Сейчас в теме
Спасибо! - тут небольшая опечатка:
"Вариант II. ......................."Сворачиваемая группа наша группа 1")"
наверно хотели написать - "Сворачиваемая группа наша группа 2"

также про это можно было написать тоже -
Установите флажок «Свернута», если хотите, чтобы свертываемая группа при открытии формы была свернута;

а то я мне нужно что бы просто было при открытии свернуто было - я начал вникать по вашей статье как это програмно сделать) а потом на другом сайте увидел что есть такая галка и все)
15. yhor 22.06.23 06:08 Сейчас в теме
(12) И добавлю: Вариант II. Благо у нас есть еще один режим отображения свертываемой группы - картинкой (Свойство "ОтображениеУправления" = "Гипперссылка заголовка" - вот здесь не ГиперссылкаЗаголовка, а Картинка.
13. S_e_r_g_1977 30.01.23 21:01 Сейчас в теме
Спасибо, отличная статья.
14. Cthulhu 1 11.04.23 15:54 Сейчас в теме
кра.са.та!
а что, только мне интересно (и непонятно) - как же все-таки можно отловить то самое событие, без отлавливания которого содержимое статьи (ну или как минимум половина оного) - имеет нулевую практическую ценность? событие формы? или этой самой группы? (ой, а у групп не бывает событий, фирма 1с и тут спутала нужное с лишним)
прим.: про костыли в виде обработчика ожидания - неа, не надо.
16. Smollsan 13.07.23 09:49 Сейчас в теме
Тема спец символов для варианта 3 не раскрыта. В заголовке используйте ALT+31, свернутый заголовок ALT+16
17. mixailz28 19.02.24 16:51 Сейчас в теме
(16) Можно еще подробнее. ALT+31 - это в кавычках писать, в заголовке группы или программно?
18. mixailz28 20.02.24 08:39 Сейчас в теме
(17) Символ_1 = Символ(9658);
Спасибо
Оставьте свое сообщение