Компонент Email

На цій сторінці:

1. Опис компонента
2. Основні функції
3. Формат даних

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

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

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

Для валідації email адрес використовується emailBlacklist, детальніше тут.

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

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

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: текст, який відображається при наведенні курсора на компонент.
Tab Index: html атрибут який дозволяє контролювати навігацію по полям вводу за допомогою клавіатури. Детальніше можна почитати про нього в документації по html наприклад тут.
Hidden: поля, які приховані від користувача, але все ще є частинами форми й будуть передані при відправленні форми. Не забудьте прибрати прапорець в Clear when hidden, інакше будь-яке значення цього компонента буде порожнім.
Disabled: забороняє редагування.
Prefix: текст, який відображається перед даними поля вводу
Suffix: текст, який відображається після даних поля вводу
Autocomplete: дозволяє налаштувати можливість полю вводу бути автоматично заповненим значеннями які збереглись в браузері. Основні значення це on та off, детальніше з властивостями цього поля можна ознайомитись тут.

Default Value: значення за замовчуванням.
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: поле обов’язкове для заповнення перед відправленням форми.
Custom error message: спеціальне повідомлення про помилку, яке відображається, коли дані не проходять валідацію.
Custom validation: власна валідація, яка дозволяє вам створити специфічні для ваших потреб перевірки на валідність. У цій функції використовується JS вставка. Детальніше про JS вставки.
Minimum length: мінімальна кількість символів, які користувач повинен ввести.
Maximum length: максимальна кількість символів, які користувач може ввести.
Regular Expression Pattern: паттерн в форматі RegExp, якому має відповідати поле, щоб пройти валідацію

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

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

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

Advanced Logic: в контексті компонентів вебформ означає складніші та гнучкі умови й правила, які можна встановити для взаємодії елементів форми між собою. означає, що можна налаштовувати не тільки прості відображення чи приховування полів на основі одного-двох умов, але й створювати складніші логічні вирази, які реагують на різні стани та вхідні дані.
- Logic Name: назва логічного блоку або умови, яку ви встановлюєте. Вона використовується для ідентифікації цієї конкретної логіки або умови в межах вашої форми.
- Trigger: умова або подія, яка викликає виконання Action (дії). Тригер може бути будь-яким станом форми (наприклад, значенням певного поля) або подією (наприклад, подія "клік" чи "введення" в конкретному полі).
  - Type: параметр, який вказує, який тип логіки ви використовуєте. Simple: проста логіка, де ви вказуєте одну умову або правило для тригера. Javascript: логіка з використовуванням JavaScript код для складніших умов та правил. Детальніше див. Змінні у JS-вставках.
  - When the form component: вказує на те, коли ця логіка або умова буде застосована. Відображається для типу Simple.
  - Has the value: вказує на конкретне значення, яке ви очікуєте від компонента форми для виконання цієї умови чи тригера. Відображається для типу Simple.
- Action: дія, яка виконується, коли відбувається тригер. Action може бути різними діями над формою.
  - Action Name: назва для ідентифікації цієї конкретної дії в межах вашої форми.
  - Type: тип дії, яку ви хочете виконати. Доступно Property (вказує на конкретну властивість компонента форми, яку ви хочете змінити.)
  - Component Property: вказує на конкретну властивість компонента форми, яку ви хочете змінити. Відображається для типу Property. Disabled: заблокований стан компонента. Можливо встановити true або false.

Дізнайтеся більше про особливості налаштування логічних умов на вкладці Logic: Реалізація логічних умов у компонентах форми

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

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

Компонент приймає данні в форматі строки

Submission

String
// Приклад: 'test@mail.com'

typescript