Skip to main content

Форми

Використовується для створення та редагування даних у таблицях бази даних для користувачів.

Документація​

Повний перелік параметрів, які може приймати форма, можливо переглянути в документації до форм: https://storybook.softpro.ua/

Документація по окремих типах форм: https://help.softpro.ua/reference-function/form

Створення форми​

Використовуємо компоненти форм на основі Vue.

Для формування форми створити у відповідній папці файл у форматі JSON, приклад:

   {
    "xssCheck": false,
    "schema": {
        "user_name": {
            "type": "Text",
            "ua": "ПІБ",
            "i": "Заповніть у форматі Петренко Петро Петрович"
        },
        "contact.email": {
            "type": "Email",
            "ua": "Email",
            "placeholder": {
                "ua": "Email",
                "en": "Email"
            }
        },
        "message": {
            "type": "richtext",
            "title": false,
            "ua": "Повідомлення",
            "en": "Message",
            "i": "Опишіть проблему, пропозицію чи коментар в даному полі",
            "validators": [
                "required"
            ]
        }
    },
    "style": {
        "label": "vertical",
        "buttonPosition": "bottom-center"
    }
}

Параметри​

Основні параметри​

xssCheck - перевірка на заборонені символи. За замовчуванням включена. При вказанні значення false можна відключити перевірку для всієї форми або окремого поля форми.

style - налаштування відображення форми:

  1. label - розташування назв полів
  2. buttonPosition - розташування кнопок

type​

Основний параметр - те, як поле буде показано в формі.

!!! info

Значення типу форми бажано вказувати в нижньому регістрі. Хоча форма приймає значення в будь-якому регістрі.
  • Text - Основний тип в формі - приймає текстові значення
  • Textarea - Застосовується найчастіше для тізерів, коротких описів
  • Number - Для числових значень, в т.ч. і для десяткових
  • MarkedText - Передаються маска, якими мають бути значення. Може застосовуватися, наприклад, для мобільних номерів
  • Password - Спеціальний тип форми для вводу та перевірки паролю
  • Email - Спеціальний тип для email
  • DataTable - Таблиця в формі
  • File - Вибір файлів з можливістю перетягуванння елементів.
  • FileList - Вибір файлів зі зручним переглядом всіх файлів.
  • Checkbox - Вибір декількох значень без випадаючого списку
  • Switcher - Переключення між значеннями false/true
  • Radio - Вибір один одного значення без випадаючого списку
  • Autocomplete - Вибір декількох значень із випадаючого списку
  • Date - Вибір дати
  • Datetime - Вибір дати та часу
  • Timepicker - Вибір часу
  • Colorpicker - Вибір кольору
  • Richtext - Текстовий редактор з підтримкою markdown розмітки
  • Geom - Створення геометрії (позначки на карті) для об'єкта
  • Camera - Додавання живого фото з веб-камери
  • Slider - Числове значення, що встановлюється по лінії-повзунку
  • Tree - Створення значень поля у форматі деревоподібного структурованого списку

В процесі розробки:

  • Team - Вибір користувачів, наявних на порталі
  • Address - Повноцінний функціонал для зручного вводу адреси з геокодуванням та позиціюванням на карті
  • Rate - Вибір значення зірочками. Використовувати для форм, де потрібно оцінка/відгук
  • Palette - вибір палітри кольорів
  • Worktime - Вибір робочого часу в формі

ua​

Вказується назва поля українською. Є аналогічні параметри en, ru - для інших мов.

Інші​

  • pin - для основних полів, можна прикріприти в правій частині. Допустимі значення: true, false
  • col - ширина поля в формі. Допустимі значення: діапазон від 1 до 12, цілі числа.
  • title - показ назви поля (ua) в формі. За замовчуванням false. Допустимі значення: true, false
  • i - інформація. Приймається будь-який текстовий масив. HTML не читається.
  • help - блок допомоги в полі форми. Приймається будь-який текстовий масив. HTML не читається.
  • multi - можливість вибору декількох значень. Допустимі значення: true, false
  • default - значення поля за замовчуванням. Значення відрізняються в залежності від типу поля форми.
  • min - мінімальне значення
  • max - максимальне значення
  • behavior - показ/приховання певного поля.
  • mask - маска для type: MarkedText
  • parent - батьківське поле форми.
  • form
  • add
  • validators
  • base_layer - вказуються базові шари для type: Geom
  • placeholder - текст, що виводиться в полі
  • options - опції (найчастіше використовуємо в autocomplete). Приклад заповнення: {"id":1,"text":"test_text"}

Параметри стилів​

Форма може змінювати зовнішній вигляд, нижче наведені параметри стилів. Працює як через вміст style{...}, так і як самостійні значення на одному рівні із schema

"schema": {},
"style": {
    "layout": "tabs" || "accordion" || "wizard" || "default",
    "label": "inline"|| "vertical" || "horizontal",
    "buttonPosition": "top-left" || "top-center"||"top-right"|| "bottom-left" || "bottom-center" || "bottom-right",
    "submitButton": "назва кнопки"
}

Вивід форми​

Існує декілька опцій, за допомогою яких можна виводити форму.

handlebars​

Вказується хелпер {{{__form form="form_name" model='table_name' id=id}}}:

  • form_name - назва форми (без .json),
  • table_name - назва таблиці в БД,
  • id - унікальний ідентифікатор таблиці

html attribute - add, edit​

<a add="{{_token id=айді таблиці model='назва таблиці, в яку записується' form='назва форми'}}"> Стаття</a>

vue​

Вказується хелпер {{{_vue "vs-form" form="form_name"}}}, де form_name - назва форми (без .json)

table​

Вказується в таблиці у форматі:

{
    "table": "billing.service",             // Таблиця в базі даних, з якої беруться дані
    "add_form": "web.customize_menu.form"   // Назва форми, яка пов'язана з таблицею
}

Корисні посилання​

Основна бібліотека компонент, що використовуються при побудові форм: element.elemen.io