Компонент Text Field

🌐 Цей документ доступний українською та англійською мовами. Використовуйте перемикач у правому верхньому куті, щоб змінити версію.

1. Опис компонента

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

Використовуйте Textfield з переліку Оновлених компонентів.

2. Основні функції

Компонент Textfield підтримує велику кількість опцій для застосування при взаємодії із формою процесу, які розподілені за вкладками.

  • Display

  • Data

  • Validation

  • API

  • Conditions

  • Table

  • Label: назва компонента, яка відображається поряд з ним.

  • Label Position: визначає положення назви відносно компонента (верх, праворуч, зліва, або внизу).

    • Для опцій Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: встановлює ширину яку займає Label у відсотках відносно input.

      • Label Margin: встановлює відступ між Label та input у відсотках.

  • Placeholder: це текст, який відображається у полі коли воно пусте (незаповнене).

  • Description: опис компонента, який може допомогти користувачам зрозуміти його призначення.

  • Tooltip: текст, який відображається при наведенні курсора на компонент.

  • Prefix: текст, який відображається перед даними поля вводу

  • Suffix: текст, який відображається після даних поля вводу

  • Input Mask: допомагає користувачеві вводити дані, забезпечуючи попередньо визначений формат. Для отримання додаткової інформації дивіться документацію jquery.inputmask.

  • Tab Index: html атрибут який дозволяє контролювати навігацію по полям вводу за допомогою клавіатури. Детальніше можна почитати про нього в документації по html наприклад тут.

  • Autocomplete: дозволяє налаштувати можливість полю вводу бути автоматично заповненим значеннями які збереглись в браузері. Основні значення це on та off, детальніше з властивостями цього поля можна ознайомитись тут.

  • Hidden: поля, які приховані від користувача, але все ще є частинами форми й будуть передані при відправленні форми. Не забудьте прибрати прапорець в Clear when hidden, інакше будь-яке значення цього компонента буде порожнім.

  • Hide Input: маскує введення в поле, замінюючи символи кружечками, які часто зустрічаються в полях пароля. Використовуйте це налаштування під час роботи з конфіденційними даними.

  • Disabled: забороняє редагування.

  • Default Value: значення за замовчуванням.

  • Text Case: після введення даних ви можете змінити регістр тексту.

    • Mixed: змішаний регістр.

    • Uppercase: верхній регістр.

    • Lowercase: нижній регістр.

  • Clear value when hidden: дозволяє налаштувати очищення значення компоненту, коли компонент стає прихованим на сторінці.

  • Custom default value: дозволяє налаштувати власне, користувацьке значення за замовчуванням для компонента. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Calculated value: дозволяє обчислювати значення компонента на підставі інших даних або умов. На відміну від Custom default value, значення поля буде обчислюватись кожного разу, коли відбуваються будь-які зміни на формі - користувач вводить данні, завершуються за http запити. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Allow manual override of calculated value: дозволяє користувачам вручну перевизначити обчислене значення компонента.

  • Validate On: визначає, коли цей компонент повинен активувати валідацію на клієнті (опції Зміна або Розмиття).

  • Required: поле обов’язкове для заповнення перед відправленням форми.

  • Trim Spaces: видаляє пробіли на початку та в кінці.

  • Minimum Length: встановлює мінімальну вимогу до довжини цього поля.

  • Maximum Length: встановлює максимальну вимогу до довжини цього поля.

  • Minimum Word Length: встановлює мінімальну кількість слів, які можна додати в це поле.

  • Maximum Word Length: встановлює максимальну кількість слів, які можна додати в це поле.

  • Regular Expression Pattern: встановлює перевірку шаблону регулярного виразу, яку має пройти значення поля перед надсиланням форми.

  • Custom error message: спеціальне повідомлення про помилку, яке відображається, коли дані не проходять валідацію.

  • Custom validation: власна валідація, яка дозволяє вам створити специфічні для ваших потреб перевірки на валідність. У цій функції використовується JS вставка. Детальніше про JS вставки.

  • Property Name: ім’я поля в структурі даних, яка буде відправлена при відправці даних форми. Також це ім’я поля в структурі даних яким предзаповнюється форма. Поточне значення цього поля можна перевірити в структурі даних, яка відображається на вкладці Запит в інтерфейсі розробки форм.

  • Advanced Conditions: дозволяють вам налаштовувати складні умови для компонента. Ці умови визначають, коли компонент стає, наприклад. видимим, базуючись на інших компонентах або їх значеннях на формі.

    Ця функція використовує JS-вставки. Детальніше про це див. на сторінці JS-вставки.

  • Simple: виконує тіж самі задачі, що і Advanced Conditions, але дозволяє задати умови в більш простому форматі

  • Table View: визначає, чи відображувати елемент в таблиці та в EditGrid.

  • Table column width: дозволяє налаштовувати ширину стовпця у таблиці, яка відображається під час використання компонента в EditGrid.

  • Sort As Number: визначає, чи сортувати значення як строку або як число при використані компонента в EditGrid.

3. Формат даних

Submission
String
// Приклад: 'Тест'

4. Сценарії використання

4.1. Встановити маску для номера телефону

В полі Input Mask ввести: +38(999) 999-9999

4.2. Видалення пробілів на початку і в кінці (Trim Spaces)

Для налаштування функціональності, виконайте наступні кроки:

  1. Увійдіть до інтерфейсу моделювання форм.

  2. Знайдіть Конструктор.

  3. На панелі зліва відкрийте Оновлені компоненти.

  4. Оберіть компонент Textfield та перетягніть його до панелі моделювання.

    text field trim spaces 1

  5. У новому вікні відкрийте вкладку Validation.

  6. Активуйте функцію Trim Spaces і натисніть Save, щоб зберегти зміни.

    text field trim spaces 2

  7. Відкрийте вкладку Перегляд, щоб перевірити результат виконання функції.

    Функція Trim Spaces відпрацьовує таким чином, що коли користувач вносить у текстовому полі на формі значення, які містять пробіли на початку (перед текстом), або в кінці (після тексту), то при надсиланні запита з форми такі пробіли видаляються.

    text field trim spaces 3

  8. Введіть декілька пробілів, текстове значення і знову декілька пробілів.

  9. Перейдіть на вкладку Запит та перегляньте результат у коді.

    text field trim spaces 4

    JSON-код містить значення без пробілів перед та після тексту.

    Якщо текстове значення містить 2 і більше слів, то пробіли між словами не видаляються, що і можна побачити в коді.

    text field trim spaces 5

    text field trim spaces 6