Как создать форму на сайте по шагам

1.Открываем формы через подменю "Компоненты" и создаем новую форму, код и название формы должны быть уникальными и отражать суть назначения новой формы.

2.Открываем пункт управление колонками и создаем поля, которые мы хотим вывести в форме. В отличие от Таблиц создавать primary key (id) не обязательно, т.к. мы берем только часть данных из БД, а не всю таблицу. Задавать имена полям стоит только, если мы собираемся выводить их через {colwithlabel} (см.п10).

В данном случае нам необходимо установить только нужный тип вывода, подробно о всех типах можно прочитать в статье Работа с формами. Пока, в качестве примера мы сделаем только три поля разных типов, чтобы примерно представлять как это все работает. Создаем поле name с типом строка, поле created с типом HTML5 Date и list c выводом списка.

3.В этом пункте мы настроим вывод нашего спискового поля. Открываем хранимку значений, и прописываем запрос к списку который нам потребуется. По умолчанию в хранимке уже есть процедура в качестве заглушки. Нам потребуется всего два значения Text - то что будет выводиться непосредственно в списке и Value - значение, которое мы используем для доступа к нужной строке обычно это id.

Если нужен элемент "Не выбрано", то можно сделать union select 0 Value, "Не выбрано" Text. Важный момент, если мы собираемся сохранять это значение в связанной таблице, то вместо 0 в value нужно прописывать null, иначе запрос будет выдавать ошибку.

4.Далее идем в хранимку getItem и с помощью процедуры достаем нужные значения. Если мы создаем форму только на добавление, то в хранимке прописываем select 1. Наша форма будет на редактирование и просмотр значений поэтому мы получаем все поля. Обязательно каждой колонке присвоить имя как в созданных полях, иначе они не будут отображаться.

5.Немного отвлечемся от настроек формы, зададим роли доступа и выведем то, что получилось на данный момент. Создадим новую таблицу, и добавим к ней сниппет модальной формы в виде значка-ссылки. В таблице будет список клиентов, а форма будет выводить имя этого клиента, когда на него было заведено оборудование, и какое оборудование за ним записано.

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

6.Открываем таблицу и жмем на иконку. Пока у нас выводится форма с разметкой по умолчанию, поэтому имена у полей имеют заголовки которые мы не меняли в настройках полей формы. Так же есть form-title, обычно в модальной форме он не нужен т.к. заголовок отображается в шапке окна и мы его задаем в сниппете.

Пока мы можем посмотреть как выводится список и дата, но при изменении этих значений данные не будут сохранены, изменение данных настраивается в хранимке saveItem

7.Для начала настроим хранимку для проверок checkItem, здесь можно настраивать условия при которых сработает save. В данный момент проверки нам не нужны, но процедуру все равно нужно настроить, чтобы система не выдала ошибки.

Для этого мы должны добавить параметры вида @field{код поля} {тип поля} = {0}, и в тело процедуры прописать select 1 result, '' Msg, таким образом, проверка производиться не будет, но при этом система не выдаст ошибки. Более детально процедура описана в статье Работа с формами.

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

9.Если все сделано правильно, кнопка "сохранить" будет выполнять процедуру которую мы только что прописали.

10.Теперь настроим кастомную разметку чтобы форма имела приличный вид. Cпускаемся вниз настроек для формы и начинаем верстать.
Мы можем вывести наши поля тремя разными способами:

1. {colcontrol-код поля} - поле без заголовка на редактирование
2. {colwithlabel-код поля} - поле с заголовком на редактирование используется по умолчанию
3. {colview-код поля} - поле на просмотр

Выглядеть это будет так:

11.Остановимся на варианте colcontrol т.к. нам нужно изменить все поля. Пару слов про {form-title} и {form-button}. Эти поля отвечают за заголовок и отображение кнопки сохранить, в данный момент они не нужны т.к. заголовок у нас присутствует в шапке формы, а кнопка есть в футере. Подробнее мы это разберем когда будем выводить форму на отдельной странице.

12.На этом разбор модальной формы закончен, давайте попробуем вывести нашу форму на отдельную страницу. Для этого создаем новую страницу со сниппетом нашей формы, не забываем прописывать роли доступа.

13.Далее идем в getItem нашей таблицы и меняем сниппет модальной формы на ссылку ведущую к новой странице, в ней же устанавливаем itemID

14.Теперь наша форма открывается на новой странице, обратите внимание что на ней отсутствует заголовок и кнопка сохранить, уже догадались почему?:)

15.Возвращаемся в кастомную разметку формы и добавляем недостающие элементы. Форма готова.

16.Теперь добавим к нашей форме ресурсы и комментарии. Открываем "Типы ресурсов" через подменю "Компоненты". Создаем и настраиваем новый тип ресурса, подробнее о работе с ресурсами можно прочитать в статье Работа с ресурсами.

17.Таким же образом добавляем новый тип комментариев. Подробно о комментариях тут.

18.Идем назад в разметку формы и добавляем туда сниппеты ресурсов и комментариев. Чтобы они были привязаны к конкретному объекту, нужно чтобы в сниппеты попадал конкретный id. Создадим новое поле с нашим идентификатором и выведем его в сниппеты через colview.

19.Результат:

20.Создадим форму на добавление, в данном случае сделаем аналогично с нашей первой формой, только возьмем два поля name и список с оборудованием list. Поскольку форма идет только на добавление в getItem нам не нужно получать значения полей, вместо этого просто пропишем там select 1.

21.Теперь настроим хранимки, в этот раз нам пригодится checkItem. Сделаем так, чтобы система не давала нам создать запись, где повторяются имена пользователей.

22.В saveItem прописываем insert по нашим полям, настраиваем разметку и обновление страницы при добавлении новых данных.

23.Теперь вернемся в таблицу и сделаем кнопку у заголовка, которая будет открывать нашу форму. Никакие данные получать не нужно поэтому url-itemID ставим 0.

Примечание: Если все же при добавлении нам нужно получить itemID, то сниппет лучше вставлять в Третий select в хранимке getItem у таблицы.

24.Результат:

25.В конце посмотрим как выводятся таблицы в модальном окне. В качестве примера используем нашу готовую кнопку с формой на добавление. Изменим в ней название и сниппет. Возьмем таблицу из предыдущего урока Как создать таблицу

26.Результат: