# Пример: настроить приложение в Low-code дизайнере

> [HTML Version](form_low_code.html)

В [Low-code дизайнере](https://elma365.com/ru/products/low-code/) при помощи метода Drag-and-Drop вы можете создавать и настраивать удобные интерфейсы:

- **формы** — для приложений и задач бизнес-процесса, например, карточки для создания и просмотра документа;

- **страницы** — пользовательский интерфейс для работы в системе;

- **виджеты** — компоненты, с помощью которых задаётся вид форм и страниц.

В этой статье на примере рассмотрим создание и настройку пользовательской формы и изменим форму создания в приложении **Договоры**: 

1. Разделим данные в карточке на смысловые блоки.

2. На боковой панели отобразим ответственного сотрудника.

3. При помощи скрипта добавим интерактивную подсказку для пользователя. 

## Шаг 1. Создать форму и перейти в Low-code дизайнер

После того как вы [создали приложение](how_to_create_an_app.md), вы можете добавить пользовательскую форму и настроить её в расширенном режиме в Low-code дизайнере. Для этого:

1. Откройте приложение **Договоры** и нажмите на значок шестерёнки рядом с его названием. В меню выберите пункт **Настройка формы**, в открывшемся окне нажмите **Расширенный режим**.

**(form_low_code1.png)**

2. На открывшейся вкладке **Контекст** можно добавить поля, которых ещё нет в контексте приложения. В примере создадим поле для заполнения сотрудника, который будет контролировать работу с договором. Для этого нажмите **+ Добавить** и создайте поле **Ответственный** с типом **Пользователи (один)**, чтобы выбирать в нём пользователей системы.

3. Чтобы открыть Low-code дизайнер, перейдите на вкладку с названием формы, которую хотите настроить: **Создание**, **Просмотр**, **Редактирование**. В нашем примере откройте вкладку **Создание**, нажмите **<По умолчанию>**, а затем **+** **Создать форму**.

**(form_low_code2.gif)**

## Шаг 2. Настроить внешний вид формы

По центру Low-code дизайнера расположено поле для моделирования, а справа — панели со свойствами приложения и готовыми виджетами. 

С их помощью настроим удобную для пользователей форму создания договора: 

1. Разделите форму на блоки. Для этого перетащите на поле для моделирования виджет **Панель с заголовком**. В заголовке укажите: **Внесите информацию по договору**.



(2.202.PNG)

2. Разместите в блоке основные поля для заполнения. Для этого со вкладки **Свойства** перетащите поля: **Контрагент**, **Номер договора**, **Дата заключения договора**. 

3. Создайте отдельный блок для загрузки файла. Для этого добавьте ещё одну панель с заголовком с названием **Загрузить файл договора**. Поместите в неё виджет, который размещён на форме по умолчанию — [Загрузка файла с предпросмотром](load_file_with_preview_widget.md).

4. Настройте боковую панель. По умолчанию здесь размещён виджет [Стандартная форма элемента](element_standart_form_widget.md), который содержит все созданные поля приложения. Выделите его и удалите его, поскольку в нашем примере нужные поля располагаются в основной части формы. Затем добавьте [Виджет боковой панели](side_panel_widget.md), назовите его **Контроль** и поместите внутрь свойство **Ответственный**. 

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

(2.201.PNG)

5. Нажмите кнопку **Сохранить** и **Опубликовать** в верхнем меню, чтобы форма стала доступна пользователям.

Теперь, когда сотрудники будут добавлять новые договоры, интерфейс будет выглядеть следующим образом:

(2.23.PNG)

## Шаг 3. Добавить скрипт для отображения подсказки 

С помощью виджетов вы можете создавать интерактивные формы, используя простые скрипты. Например, когда сотрудник наведёт курсор на поле для загрузки файла, всплывёт окно с дополнительной информацией. 

Чтобы добавить такой скрипт:

1. В [дизайнере интерфейсов](360027211631.md) на вкладке **Контекст** создайте переменную **info** с типом [Выбор «да/нет»](360009707032.md#yes_no). 

2. Добавьте на поле для моделирования виджет [Информационный блок](information_block.md). В открывшемся окне настроек введите текст инструкции: «Загрузите файл в формате .docx». Затем перейдите на вкладку **Системные**, в поле **Видимость** выберите опцию **Показать по условию** и укажите переменную **info**. Отображение информационного блока будет зависеть от значения этой переменной: виджет будет показан, если значение **true**.

(form_low_code3.png)

3. Выделите виджет **Загрузка файла с предпросмотром** и откройте его настройки, нажав на значок шестерёнки. 

4. Перейдите на вкладку **События** и добавьте скрипт, который будет изменять значение переменной **info** на **true**. Для этого в опции **Событие при наведении курсора** нажмите кнопку **Создать**, укажите название функции** showInfo **и выберите** Сохранить**, а затем** **—** Открыть**.

(form_low_code4.png)

5. На открывшейся вкладке **Скрипты** добавьте в созданную функцию следующий код, который будет определять значение переменной **info**:

````
async function showInfo(): Promise<void> \{  
    ViewContext.data.info = true  
\}

6. ````
Сохраните и опубликуйте внесённые изменения. 

Теперь, когда пользователь наведёт курсор на область для загрузки файла, значение переменной **info** изменится на **true** и информационный блок с инструкцией отобразится в карточке создания элемента. 

## Что делать дальше

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

````
начало примечание

````
**Полезные статьи:**

- [«Дизайнер интерфейсов»](interface_designer.md) — как настраивать страницы и виджеты в дизайнере; 

- [«Действия с виджетами на поле для моделирования»](canvas-navigation.md) — как управлять элементами в дизайнере при создании сложных интерфейсов;

- [«Пример: связать процесс с приложением»](how_to_bind_app_to_proccess.md) — как смоделировать процесс согласования договора и настроить его запуск после создания элемента; 

- [«Пример: настроить статусы для мониторинга процесса»](360010927040.md) — как отслеживать этапы продвижения элементов по настроенному маршруту. 

````
конец примечание
````