# Эстетическое оформление

**Цвет**

```
ЭлементыФормы.ПолеВвода1.ЦветФонаПоля = WebЦвета.Красный;
ЭлементыФормы.ПолеВвода1.ЦветФонаПоля = Новый Цвет(51,51,51);
```

<span style="color: rgb(0, 0, 0);">Цвет по-умолчанию задается пустым Цвет(): </span>

```
Если Объект.Завершен Тогда 
		Элементы.ПроцессЗавершенНадпись.ЦветТекста = Новый Цвет();
	КонецЕсли;
```

**Общая информация**

[Программное создание элементов оформления](https://infostart.ru/1c/articles/1118319/)

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

**Элементы оформления и представления реквизитов**

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

**Группы-Обычная группа** контейнер компонентов, расположенных в соответствии с настройками (горизонтально или вертикально). Могут быть окружены рамкой, отображаться на общем фоне заданного цвета и иметь общий заголовок. Комбинируя свойства Поведение, горизонтально / вертикально и дочерние группы можно сделать очень навороченный интерфейс.  
**Группы-Страницы.** Для страничного отображения. Внутри нужно добавить группы для отображения в виде страницы. Тип у дочерней группы становится Страница)  
**Группы-Командная панель.** Отображает команды, созданные в форме или у существующих элементов (у кого команды предусмотрены). Хотя у меня не отобразилась команда в списке возможных, так что хз.

**Декорация-Надпись и Декорация-Картинка** есть события нажатие и обработка навигационной ссылки.

**Дополнение элемента формы.** Можно указывать строку поиска, управление поиском. Нужно указывать табличный элемент, по которому будет происходить поиск. Если нужно вынести блок поиска в другое место от шапки таблицы.

**Общие свойства элементов оформления**

**Заголовок.** Работает для простых типов - подпись около элемента. Для сложных - не работает.  
**Важность при отображении.** Работает в случае мобильного клиента. Группирует менее важные элементы в выпадающий список.

**Расположение.** Ширина и Высота 0 - авто, однако старается вместить все элементы, комбинация например горизонтальная всегда и ширина 10 для 4 кнопок не работает. Однако например вертикальная и 10 сжимает каждую из 4 кнопок.

**Детали для элемента Группа**

**Вид.** Соответствует типам групп Обычная группа, Страницы, Командная панель.  **Поведение.** Два дополнительных способа - Свертываемая и Всплывающая.   
Свертываемая - позволяет свернуть элементы. Должно быть задано свойство Заголовок (будет отображаться в раскрытом состоянии). Может быть задано свойство ЗаголовокСвернутогоОтображения и свойство Свернута. Свойство ОтображениеУправления (картинка или гиперссылка) определяет вид оформления заголовка.   
Всплывающая - по умолчанию в виде ссылки, по клику всплывает дополнительное окно (не модальное).  
**Отображение.** Степень акцента на группе при помощи размера шрифта заголовка и расстояния между группами, Нет соответствует группе без отображения.  
**Группировка.** Порядок группировки вложенных элементов внутри группы.  
**Объединенная.** Не понял, зачем нужно. Ведь если группа создается, то подразумевается, что элементы должны подчиняться правилам группы.  
**Сквозное выравнивание.** Опция усреднения выравнивания элементов внутри разных групп.  
**Путь к данным заголовка.** Если указано, то в скобках после названия группы это указывается.  
**Формат.** Формат представлений чисел, дат и булева типа. - если указан путь к данным заголовка.  
**Использование ТекущейСтроки, ИспользуемаяТаблица.** Для мобильного приложения.

**Детали для элемента Строка.**

Тип оформления может быть строкой ввода, подписью, переключателем, картинкой, HTML документом, PDF документом, текстовым документом.

**Тип оформления Картинка** Нужен для отображения сохраненной в базе в хранилище значений изображения.

**Тип оформления Поле html документа.** Позволяет загрузить html код, добавленный в виде текста. Может подгружать картинки из внешних источников (Интернета). Но грузился долго. Но если добавить в событие ПриОткрытии - остальная форма доступна.

```
МояСтрока = "<html lang=""en""><head><meta charset=""UTF-8""><meta name=""viewport"" content=""width=device-width, initial-scale=1.0""><title>Документ</title></head><body><h1>Привет!</h1><img src=""https://helpf.pro/uploads/avatars/00.gif""></body></html>"
```

Переадресация страницы сработала.

```
МояСтрока = "<html><head><meta http-equiv=""refresh"" content=""0;url=https://dzen.ru""></head></html>"
```

Если ссылка открывается в новой странице - тогда в браузере. JS скрипт вывода сообщения пользователю не выполнил. А скрипт отображения часов сработал:

```
МояСтрока = "<html></head><body><div id=""clock""></div><script>window.onload = function(){window.setInterval(function(){var now = new Date();var clock = document.getElementById(""clock"");clock.innerHTML = now.toLocaleTimeString();},1000);};</script></body></html>";
```

Поддержка стилей есть. Резюме: внешний html ресурс возможен, но стоит 2 раза подумать, выпить глоток кофе и еще раз подумать.

**Создать html ссылку**

Оказалось непростым делом. Аж уже начал думать, что через html документ делать - в топе поиска устаревшая информация. Создается команда формы,

```
&НаКлиенте
Процедура ОткрытьПомощьПинг(Команда)
	ПерейтиПоНавигационнойСсылке("http://tvm16:81/doku.php/aisimushestvo/pingcheck");
КонецПроцедуры
```

перетаскивается на форму, и в свойствах кнопки выставляется вид Гиперссылка.

</body></html>