add

src/content/docs/knowledge-base/Общие/Полезные обработки и отчеты.md

@@ -21,4 +21,10 @@ slug: общие/полезные-обработки-и-отчеты
 
 ## Консоль кода (Ironskills)
 
-[Файлом](/poleznoe/КонсольКодаIS.epf)
+[Файлом](/poleznoe/КонсольКодаIS.epf)
+
+## Консоль запросов
+
+[На гитхаб](https://github.com/Dyrnwyn/1C_OM/tree/master)
+
+[Файлом](/poleznoe/УправляемаяКонсольОтчетов_3.8.9.epf)

src/content/docs/knowledge-base/Общие/Управляемые формы/Общие рекомендации.md

@@ -0,0 +1,440 @@
+---
+title: Общие рекомендации
+slug: общие-управляемые-формы/общие-рекомендации
+---
+
+[Спизжено отсюда](https://github.com/Oxotka/1CDesignGuide/blob/main/README.md)
+
+# Гайд для создания форм на 1С
+
+**Цель** - улучшить качество интерфейсных решений в среде 1С
+
+**Гайд** - это инструкция по дизайну форм в среде 1С. Он охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна
+
+- [Гайд для создания форм на 1С](#гайд-для-создания-форм-на-1с)
+  - [Элементы формы](#элементы-формы)
+    - [Декорация](#декорация)
+      - [Декорация-надпись](#декорация-надпись)
+      - [Декорация-картинка](#декорация-картинка)
+    - [Поле ввода](#поле-ввода)
+    - [Флажок](#флажок)
+    - [Выключатель (Тогл, Свитчер)](#выключатель-тогл-свитчер)
+    - [Переключатель](#переключатель)
+    - [Тумблер](#тумблер)
+    - [Гиперссылки](#гиперссылки)
+    - [Кнопка](#кнопка)
+    - [Табличная часть](#табличная-часть)
+    - [Диалоговое окно](#диалоговое-окно)
+    - [Подсказка и расширенная подсказка](#подсказка-и-расширенная-подсказка)
+  - [Компоновка формы](#компоновка-формы)
+    - [Группы](#группы)
+      - [Обычная группа](#обычная-группа)
+      - [Свертываемая группа](#свертываемая-группа)
+      - [Всплывающая группа](#всплывающая-группа)
+    - [Командная панель](#командная-панель)
+    - [Команды формы](#команды-формы)
+    - [Шапка формы](#шапка-формы)
+    - [Подвал формы](#подвал-формы)
+    - [Условное оформление](#условное-оформление)
+  - [Дополнительные материалы](#дополнительные-материалы)
+  - [Вопросы и пожелания](#вопросы-и-пожелания)
+  - [Благодарность](#благодарность)
+
+## Элементы формы
+
+### Декорация
+
+Декорация - это базовый элемент для вывода текста
+
+<img src=uf_notes/img/usualLabel.png width=500>
+
+#### Декорация-надпись
+
+Обычно используется как подсказка на форме с помощью форматированной строки
+
+<img src=uf_notes/img/formatString.png width=500>
+
+1. Не ставьте точку в конце, если текст состоит из одного предложения
+2. Не используйте декорацию, если она не выполняет полезное действие
+3. Не используйте декорацию для установки заголовки простых полей. В этом случае не срабатывает автофокус на поле и часто забывают поставить двоеточие в заголовке поля
+4. Не используйте декорацию для выравнивания элементов. Используйте для этого свойства [Групп](#группы)
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+#### Декорация-картинка
+
+Обычно используется для иллюстрации чего-либо, а также для привлечения внимание пользователя
+
+ <img src=uf_notes/img/pictureLabel.png width=500>
+
+1. Используйте картинку в составе форматированной строки или отдельным элементом
+2. Не используйте картинку из файла, добавьте ее в библиотеку картинок
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Поле ввода
+
+Поле ввода - это базовый элемент для ввода значений
+
+ <img src=uf_notes/img/inputField.png width=500 border=1>
+
+1. Установите ширину поля такой, чтобы вмешалось самое длинное значение из списка
+2. Добавьте кнопку Очистки (x), если в поле ввода предусмотрено удаление или пустое значение, кроме отборов на формах, там используется флажок
+3. Опишите подсказку ввода для пустого значения на форме, если предусмотрено пустое значение
+
+    <img src=uf_notes/img/inputClearButton.png width=500 border=1>
+
+4. Добавьте кнопку выбора для строковых полей ввода, если есть из чего выбрать, например, выбор Пути к файлу или Наименования
+5. Используйте многострочное поле ввода для строковых значений длинее 100 символов. Установите заголовок для многострочного поля сверху
+6. Сохраняйте значения выбранные пользователем для реквизитов формы, если они повторяются, например, поля с периодом или Организацией
+7. Не показывайте заголовок у поля Организация или Банковский счет для сокращения места, например, в шапке отчета. Пользователь знает свою организацию и может понять что в этом поле по выбранному значению
+8. Добавляйте подсказку ввода, в случае если не показываете заголовок. Для Организаций в отчете напишите "По всем организациям" - покажите поведение пустого поля
+
+    <img src=uf_notes/img/organization.png width=500 border=1>
+
+9. Не используйте платформенный выбор типа для составных типов. Добавьте отдельный выбор типа, например, Контрагент или Физическое лицо
+10. Не делайте поле выбора для одного значения - заполните реквизит самостоятельно, а поле скройте функциональной опцией
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Флажок
+
+Флажок используем для включения или выключения опции
+
+<img src=uf_notes/img/checkboxTitle.png width=450 border=1>
+
+1. Установите заголовок флажка справа. Отойдите от умолчания платформы
+2. Зона действия флажка, с точки зрения интерфейса, небольшая или отсутствует. Например, при включении флажка можно включить доступность соседнего реквизита или гиперссылки. Если требуется влиять на форму сильнее, используйте [Выключатель](#выключатель-тогл-свитчер) или [Переключатель](#переключатель)
+3. Используйте флажок для простой опции, в которой понятно, что означают оба состояния. Если из названия сложно понять действие флажка, то можно добавить подсказку снизу
+4. Не используйте флажок для сложных опций, в которых не очевидны оба состояния. Используйте для этого [Переключатель](#переключатель)
+5. Не используйте в заголовке флажка отрицательные формулировки, потому что пользователю сложнее понять выключенный флажок, например, «Не Не проводить документ при записи»
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Выключатель (Тогл, Свитчер)
+
+Выключатель переключает состояние формы, реквизита или настройки. Например, включает или выключает опцию. Это вид флажка и к нему применяются правила [Флажка](#флажок)
+
+Выключатель заимствован из мобильных операционных систем, где он используется для включения и выключения настроек
+
+<img src=uf_notes/img/toggle.png width=350 border=1>
+
+1. Используйте выключатель, если при переключении состояния действие происходит сразу и не нужны дополнительные подтверждения
+2. Выключатель ассоциируется с большим влиянием, чем флажок. При изменении состояния действие на форму может быть более обширным
+3. Не используйте на одной странице больше 2-3 выключателей
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Переключатель
+
+Переключатель используется для выбора одного значения из перечисленных
+
+<img src=uf_notes/img/radiobuttons.png width=500 border=1>
+
+1. Используйте переключатель когда значений немного - от 2 до 5, если больше, используйте [Поле ввода](#поле-ввода) со списком значений
+2. Установите значение по умолчанию первым в списке, например, 🔘 Все ⚪ С ошибками ⚪ Без ошибок
+3. Добавьте подсказки к значениям переключателя для сложных опций
+
+    Для этого создайте два элемента формы с путем к одному реквизиту, у каждого элемента можно сделайте свою подсказку
+
+    <details><summary>Как выглядит в конфигураторе</summary>
+    <img src=uf_notes/img/radiobuttonsWithHints.png width=500 border=1>
+    </details>
+
+4. Выносите повторяющиеся тексты значений переключателя в заголовок
+
+    <img src=uf_notes/img/radiobuttonPeriods.png width=500 border=1>
+
+5. Переключатель действует на то, что находится справа и под ним
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Тумблер
+
+Тумблер используется для выбора одного значения из перечисленных. Аналогичен [Переключателю](#переключатель)
+
+<img src=uf_notes/img/switcher.png width=600 border=1>
+
+1. Используйте тумблер для 3-5 значений
+2. Используйте тумблер, если от выбранных значений перестраивается форма под ним или выполняется какое-то действие, потому что тумблер выглядит как кнопки
+3. Тумблер выглядит компактнее, чем [Переключатель](#переключатель) и подходит для коротких значений
+4. Не используйте в значениях тумблера повторяющиеся слова, вынесите их в заголовок
+5. Не используйте тумблер для 2 значений - не ясно какой пункт выбран
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Гиперссылки
+
+Гиперссылка используется для перехода к другой форме. Пользователю привычно, что по гиперссылке он куда-то перейдет или откроется новая форма и будет потерян фокус с основной формой
+
+<img src=uf_notes/img/hyperlink.png width=300 border=1>
+
+1. Используйте для открытия подчиненных и служебных форм. Например, настройка НДС
+2. Давайте осмысленное и достаточно длинное название гиперссылке, чтобы в нее можно было удобно нажать
+3. Из гиперссылки должно быть понятно, куда она ведет
+4. Не выполняйте действия на форме с помощью гиперссылки. Используйте для этого [Кнопки](#кнопка)
+5. Не пишите в гиперссылке слова "здесь", "тут" или "подробнее"
+6. Не ставьте две ссылки подряд - трудно заметить переход между двумя ссылками
+7. Не меняйте цвет гиперссылки, за исключением ссылок с предупреждением
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Кнопка
+
+Кнопка используется для выполнения действия на форме
+
+<img src=uf_notes/img/button.png width=150 border=1>
+
+1. Используйте кнопку для выполняения действие по запросу пользователя
+2. Используйте кнопку с пометкой для команды, связанной со строкой списка (табличная часть или динамический список), например "Использовать как основной"
+
+    <img src=uf_notes/img/buttonUseAsDefault.png width=500 border=1>
+
+3. Сделайте понятный заголовок для кнопки, не пытайтесь сделать его коротким. В случае если по кнопке будет открываться новая форма (не рекомендуется), то название кнопки должно сообщать об этом. Например, "Показать настройки"
+4. Используйте кнопку Без фигуры для команд, которые не рекомендуется выполнять или когда кнопок слишком много. Следует использовать с осторожностью
+Подробнее про [отображение кнопок без фигур](https://t.me/AriN1C/46)
+5. Не используйте кнопку для перехода к другой форме, используйте для этого [Гиперссылку](#гиперссылки)
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Табличная часть
+
+Табличные части используются для хранения и управления множеством связанных записей внутри одного объекта
+
+<img src=uf_notes/img/table.png width=800 border=1>
+
+1. Делайте заголовок табличной части в 1 строку. При необходимости вывести сложный заголовок выводите подсказки в самой таблице, в строке. Например, см. Корректировка реализации
+
+    <img src=uf_notes/img/complicateTitle.png width=200 border=1>
+
+2. Уберите заголовок табличной части, если в ней всего одна колонка. Опишите декорацией содержание табличной части, если это требуется
+3. Добавьте в табличной части пустую последнюю колонку, чтобы управлять шириной табличной части. Отключите заголовок у этой колонки, включите "Только просмотр" и установите "Растягивать по горизонтали"
+
+    <img src=uf_notes/img/blankColumn.png width=200 border=1>
+
+4. Прижимайте заголовок колонки табличной части к значению, например, для Числа прижмите вправо, а для Строка или Ссылка - слева (по умолчанию)
+
+5. Ознакомьтесь со стандартом для проектирования интерфейсов - <https://its.1c.ru/db/v8std/content/717/hdoc>
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Диалоговое окно
+
+Диалоговое окно открывается для вопроса или предупреждения пользователю. Это блокирующее сообщение, которое требует обязательного внимания пользователя.
+Обычно выводится для необратимых действий, например, очистка табличной части или установка особого режима работы.
+Следует использовать с осторожностью!
+
+<img src=uf_notes/img/dialog.png width=600>
+
+1. Уделите особое внимание тексту в диалоговом окне. Опишите подробно в тексте, что требуется от пользователя, добавьте четкий вопрос с однозначным ответом
+2. Опишите утвердительное действие, чтобы пользователь однозначно понял о том, что будет выполнено. Для этого установите текст этой кнопки, чтобы он повторял запрашиваемое действие
+3. Обрабатывайте закрытие диалогового окна по крестику справа вверху. Для этого установите одну из команд диалогового окна как КодВозвратаДиалога.Отмена
+
+    ```BSL
+    &НаКлиенте 
+    Асинх Процедура ЗадатьВопрос()
+  
+    ТекстВопроса = 
+        "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины.
+        |В этом режиме будут приходить только важные уведомления
+        |
+        |Установить режим тишины?";
+  
+    Кнопки = Новый СписокЗначений;
+    Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины");
+    Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть");
+  
+    Результат = Ждать ВопросАсинх(ТекстВопроса, Кнопки);
+  
+    Если Результат = КодВозвратаДиалога.Да Тогда
+        Сообщить("Режим тишины установлен");
+    КонецЕсли;
+  
+    КонецПроцедуры
+    ```
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Подсказка и расширенная подсказка
+
+У большинства элементов есть свойство Подсказка, которая выводится в зависимости от свойства Отображение подсказки.
+Подсказка - это обычная строка, но можно включить Расширенную подсказку, чтобы использовать форматированную строку. Для этого на элементе формы следует нажать на правую кнопку мыши и выбрать пункт Показать расширенную подсказку
+
+1. Используйте для разовых подсказок отображение через кнопку. Если пользователь видит новый ему элемент и сомневается, что с ним делать, ему достаточно один раз посмотреть подсказку по кнопке, чтобы разобраться. Позже он сможет вернуться к этой подсказке, если потребуется
+
+    <img src=uf_notes/img/buttonHint.png width=700 border=1>
+
+2. Используйте подсказка сверху о всей форме, если она используется не часто. У пользователя такая подсказка будет всегда перед глазами. Например, если это форма с настройками правил
+
+    <img src=uf_notes/img/underHint.png width=700 border=1>
+
+3. Сделайте подсказку снизу для сложных элементов, чтобы объяснить пользователю, что этот реквизит означает. Важно давать подсказки на важные элементы формы, чтобы подчеркнуть их важность
+4. Используйте различные средства оформления для акцентирования внимания на конкретный реквизит, например, желтый фон или картинки
+5. Подсказок много не бывает, но они не должны быть навязчивыми
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+## Компоновка формы
+
+### Группы
+
+Группы используются для объединения элементов вместе. Группы позволяют управлять расположением и выводом элементов
+
+#### Обычная группа
+
+1. Проверьте уместность отображения заголовка у группы, в большинстве случае он не требуется
+2. Уберите из заголовка слово "Группа", которое добавляет платформа
+
+    <img src=uf_notes/img/groupTitle.png width=400 border=1>
+
+3. Уберите подсказки в группе созданные платформой по умолчанию - они выводится при удержании курсора над группой
+4. Избегайте Расположение - **Горизонтально, если возможно**. Исходите из минимально допустимого расширения 1280х768px
+5. Изучите типы выделения обычной группы. Сильное выделение - добавляется полоса и отступ у подчиненных реквизитов, Обычное выделение и Слабое выделение - крупный заголовок
+
+   <img src=uf_notes/img/highlightGroup.png width=500 border=1>
+
+6. Используйте обычное выделение, если нужно сделать больший отступ вокруг группы. [Подробнее о слабом и обычном отображении групп](https://t.me/Aripovn/31)
+
+   <img src=uf_notes/img/representationGroup.gif width=500>
+
+7. Используйте свойство - **Выравнивание элементов и заголовков** для прижатия элементов к одному из краев
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+#### Свертываемая группа
+
+Свертываемая группа позволяет скрыть реквизиты внутри сворачиваемого блока
+
+<img src=uf_notes/img/collapsibleGroupTitle.png width=500 border=1>  
+
+1. Используйте свертываемаю группу, чтобы скрыть элементы - это делает форму компактнее и удобнее для работы.
+Также смотри стандарт - [Оформление групп разделов с настройками и справочниками](https://its.1c.ru/db/v8std/content/753/hdoc)
+
+2. Давайте описание содержащихся реквизитов в заголовке свертываемой группы, например, Банковский счет и Адрес:
+
+    <img src=uf_notes/img/titleOnGroup.png width=700 border=1>
+
+   В случае если в группе находятся только команды или гиперссылки (см. пример в Администрирование в БСП), то заголовок свернутой группы необязательно заполнять. В этом случае мы упрощаем навигацию по форме для пользователя
+
+3. Снимите флаг "Отображать отступ слева" у свертываемой группы, чтобы элементы были вровень с остальными реквизитами формы
+
+4. Используйте для программного управлением свойства группы Свернута методы Группа.Показать() и Группа.Скрыть()
+
+5. Не помещайте в свертываемую группу элементы, которые требуются часто или являются обязательными
+
+6. Не размещайте свертываемую группы выше обычных групп
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+#### Всплывающая группа
+
+Всплывающая группа может использоваться для размещения необязательных или справочных реквизитов, чтобы форма была компактнее
+
+<img src=uf_notes/img/popupGroup.png width=700 border=1>
+
+1. Используйте элемент с осторожностью, так как для пользователя такая группа не является привычным элементом и он может пропустить ее
+2. Давайте описание содержащихся значений в заголовке группы, чтобы пользователь мог посмотреть их не открывая
+3. Установить Отображение управления = Картинка, чтобы появилась соответствующая пиктограмма у группы. Это позволит пользователю узнавать поведение таких элементов
+4. Используйте всплывающую группу как подсказку, на которой можно разместить не только форматированную строку, но и дополнительные реквизиты. Сделайте говорящий заголовок, побуждающий пользователя на него нажать
+5. Используйте всплывающую группу как открываемую форму по гиперссылке, для этого установите цвет текста заголовка как у гиперссылки
+
+   <img src=uf_notes/img/popupGroupHyperlink.png width=500 border=1>
+
+6. Не помещайте во всплывающую группу обязательные реквизиты, а также реквизиты, которые часто используются
+7. Не экономьте на заголовке у всплывающих групп. Пользователь должен понимать, что ожидать при нажатии на заголовок
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Командная панель
+
+Командную панель можно собрать самостоятельно если требуется добавить свои команды
+
+<img src=uf_notes/img/commandPanel.png width=700>
+
+1. Установите Источник команд - Форма для стандартных команд объекта
+2. Установите Источник команд - Глобальные команды командной панели формы для глобальных команд, например Структура подчиненности, Дополнительные сведения и История изменений
+3. Для того, чтобы разбить табличную часть на две, следует продублировать стандартные команды формы, при этом отключить их в составе команд формы
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Команды формы
+
+1. Расположите основную кнопку слева вверху в формах на весь экран, например, **Провести и закрыть**
+
+    <img src=uf_notes/img/postAndClose.png width=600 border=1>
+
+2. Расположите основную кнопку справа внизу в формах (модальных) не на весь экран, Например, **ОК**
+
+    <img src=uf_notes/img/okButton.png width=600>
+
+3. Используйте только одну кнопку по умолчанию на форме. Если требуется сделать несколько, например, если действия важные и равнозначные, то этим командам установите оформление как у кнопки по умолчанию: шрифт - Жирный и цвет фона кнопки - Золотой RGB(255, 255, 0)
+
+4. Переназначайте кнопку по умолчанию при переключении страниц, если на форме их несколько
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Шапка формы
+
+1. Располагайте элементы сверху вниз, слева направо в порядке важности
+2. Расположите справа поля, которые нужно редко менять:
+Например, поле Организация или Подразделение заполняется значениями по умолчанию и не требуют внимания пользователя, поэтому размещайте их справа.
+Проверьте, что они заполняются автоматически или сохраняются предыдущие значения
+3. Не стремитесь сделать левую и правую часть симметричной. Главное чтобы слева были важные поля, а справа неважные. Нормально, если с правой стороны будет больше полей, чем с левой
+4. Скрывайте поля по Функциональным опциям, например, Организация или Подразделение, чтобы упростить форму
+5. Не допускайте, чтобы нижние поля влияли на элементы, находящиеся выше. Например, не размещайте сначала Договор, а потом Контрагента. Пользователь может изменить это поле и не обратить внимание на то, что поменялось выше
+6. Не размещайте поля, которые изменяют форму ниже других реквизитов. Расположите условный **Вид операции** самым первым полем
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Подвал формы
+
+1. Расположите в подвале наименее важные реквизиты или справочную информацию в виде итогов
+
+    <img src=uf_notes/img/results.png width=600 border=1>
+
+2. В Бухгалтерии предприятия в формах документов последними реквизитами обычно идут Комментарий и Ответственный
+
+    <img src=uf_notes/img/comment.png width=600 border=1>
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+### Условное оформление
+
+Условное оформление используется для визуального выделения данных на основе заданных условий
+
+1. Применяйте одни и те же стили для аналогичных условий, например в динамическом списке новые элементы выделяются жирным
+2. Не используйте много различных стилей и цветов
+3. Не используйте условное оформление для управления видимостью строк
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+## Дополнительные материалы
+
+1. [Стандарты по оформлению форм](https://its.1c.ru/db/v8std#browse:13:-1:11)
+2. [Хитрости и советы по созданию форм от Рарус](https://rarus.ru/publications/20220530-ot-ekspertov-hitrosti-po-sozdaniyu-form-1c-532555/)
+3. [Контур.Гайды](https://guides.kontur.ru/)
+4. Репозиторий [UX-1C:Элементы интерфейса 1С](https://github.com/shch-anna/ux-1c)
+5. Алан Купер об интерфейсе. Основы проектирования взаимодействия
+6. [Стек технологий для 1С](https://github.com/Oxotka/StackTechnologies1C)
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+## Вопросы и пожелания
+
+Добавляйте вопросы и пожелания в [Issues к этому репозиторию](https://github.com/Oxotka/1CDesignGuide/issues). 
+
+При необходимости гайд будет дополняться
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+## Благодарность
+
+Подпишитесь на мой [Телеграм канал](https://t.me/AriN1C) или [купите мне кофе](https://boosty.to/1cnik/donate)
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)
+
+[<img src='https://infostart.ru/bitrix/templates/sandbox_empty/assets/tpl/abo/uf_notes/img/logo.svg'>](https://infostart.ru/1c/articles/2167324/)
+
+Прочитайте и поставьте + этой статье на Инфостарт - [Гайд для создания форм на 1С](https://infostart.ru/1c/articles/2167324/)
+
+[↑ Наверх](#гайд-для-создания-форм-на-1с)