Моделювання компонента Textfield для вводу номера телефону (Україна)

1. Загальний опис

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

Тепер користувачам реєстрів доступні такі функції:

  • Референтний приклад із маскою для телефонів: Тепер моделювальники регламенту можуть використовувати референтний приклад для створення полів введення з готовою маскою номера телефону, що відповідає українському формату: +380(00)123-4567.

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

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

Також ми розробили спеціалізований приклад для моделювання форм з полями вводу номерів телефонів у форматі, що використовується в Україні. Це забезпечує швидше та зручніше створення користувацьких інтерфейсів. Також ми впровадили функціонал, який дозволяє розробникам обирати формат відображення та відправлення введених номерів з UI-форми до Фабрики даних.

2. Налаштування форми з маскою номера телефону та форматом відправлення даних

  1. Увійдіть до Кабінету адміністратора регламентів.

  2. Відрийте розділ UI-форми та створіть нову або відредагуйте наявну форму.

  3. У налаштуваннях форми відкрийте вкладку Конструктор та знайдіть Оновлені компоненти.

  4. Перетягніть до панелі моделювання та налаштуйте компонент Text Field.

    Детальніше про налаштування компонента Text Field ви можете знайти на сторінці Компонент Text Field.

    text field trim spaces 1

  5. На вкладці Display налаштуйте наступні параметри:

    1. У полі Label введіть назву поля користувацької форми — Номер телефону.

    2. У полі Placeholder встановіть плейсхолдер для поля Номер телефону. Цей плейсхолдер буде показаний, коли поле порожнє.

    3. У полі Input Mask введіть маску вводу для номера телефону. Наприклад:

      +380(99)999-9999

      • +380() — незмінна частина маски вводу.

      • Решта символів будуть заповнюватися користувачами при введенні номера.

        Що таке Input mask?

        Input mask (українською — "маска вводу") — це функціональність, яка допомагає користувачам при введенні даних, забезпечуючи дотримання попередньо визначеного формату. Це особливо корисно при введенні даних, які вимагають строгої структури, таких як дати, числові значення, номери телефонів та інше. Маска вводу спрощує процес заповнення форм, оскільки користувачі можуть бачити візуальні підказки щодо очікуваного формату даних, що зменшує ймовірність помилок та покращує загальний досвід користувача.

        enter phone number 01

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

        enter phone number 02

  6. Перевірте, як виглядатиме поле перед відправленням до БД.

    1. Користувачі бачитимуть поле вводу наступним чином:

      enter phone number 03

    2. При заповненні значення і підтвердженні форми, значення номера телефону буде передано Фабриці даних у наступному вигляді:

      enter phone number 04

      Запит з UI-форми до Фабрики даних. Передача номера у форматі зі спецсимволами
      {
  "phoneNumber": "+380(50)123-4578",
  "submit": true
}

  7. Для видалення спецсимволів з номера перед відправленням, перейдіть на вкладку Data й активуйте параметр Phone Input.

    За замовчуванням параметр Phone Input вимкнений.

    enter phone number 05

    Активувавши чек-бокс, після введення даних і підтвердження відправлення форми, значення номера телефону буде передано Фабриці даних у наступному вигляді:

    Запит з UI-форми до Фабрики даних. Передача номера у форматі без спецсимволів
    {
  "phoneNumber": "380501234578",
  "submit": true
}
    Це налаштування необхідно використовувати, якщо дані, внесені на формі, надалі будуть опрацьовувати інші бізнес-процеси або зовнішні системи.

3. Референтний бізнес-процес

Де можна знайти приклад референтного бізнес-процесу?

Адміністратор Платформи може розгорнути для вас демо-реєстр — еталонний реєстр, що містить референтні та інші приклади файлів для створення цифрового регламенту. Він містить різноманітні елементи для розробки моделі даних, бізнес-процесів, UI-форм, аналітичної звітності, витягів, сповіщень, зовнішніх інтеграцій та багато іншого.

Детальну інструкцію щодо розгортання демо-реєстру та отримання референтних прикладів моделювання ви знайдете на сторінці Розгортання демо-реєстру із референтними прикладами.

Приклад BPMN-схеми процесу буде доступний у регламенті демо-реєстру за пошуком по ключовим словам — reference-ua-phone-number. Назви форм ви можете знайти всередині відповідних користувацьких задач (User Task) бізнес-процесу у полі Form key.

enter phone number 1
Зображення 1. Загальний вигляд референтного процесу у Кабінеті адміністратора регламентів

Розгляньмо референтний приклад бізнес-процесу для внесення та перегляду номерів телефону за визначеною маскою. Ми не будемо детально зупинятися на моделюванні, адже процес є доволі простим, натомість пропонуємо розглянути, як працює змодельована функціональність з погляду кінцевих користувачів. Для цього:

  1. Увійдіть до Кабінету користувача.

  2. Відкрийте Доступні послуги > Бізнес-процеси зі стилізованими компонентами для України > Моделювання номера телефону для України.

    enter phone number 2

  3. Запустіть бізнес-процес.

    Ви побачите форму для внесення двох номерів телефону в заданому форматі. Для кожного з полів в Input Mask встановлено український формат номера, але чек-бокс Phone Input активовано лише для першого поля.

  4. Внесіть довільні дані натисніть Далі. Наприклад:

    +380(50)114-4777
+380(67)114-4255

  5. У результаті формується наступний POST-запит на ресурс:

    Приклад 1. Запит (Request) форми із введеними номерами
    Хост (Host)
    test.domain.com
    URL запита
    POST /officer/api/user-task-management/task/15eac83c-ceea-467b-87e3-06962787e1a0/complete

    • 15eac83c-ceea-467b-87e3-06962787e1a0 — ID користувацької задачі у бізнес-процесі.

    Тіло запита (Request body)
    {
  "data": {
    "phoneNumber": "380501144777",
    "additionalPhoneNumber": "+380(67)114-4255",
    "submit": true
  }
}
    Приклад 2. Відповідь (Response)
    Status
    200 OK
    Тіло відповіді (Response body)
    {
  "id": "15eac83c-ceea-467b-87e3-06962787e1a0",
  "processInstanceId": "861fa6bc-8eb5-11ee-8566-06962787e1a0",
  "rootProcessInstanceId": "861fa6bc-8eb5-11ee-06962787e1a0",
  "rootProcessInstanceEnded": false,
  "variables": {}
}

    enter phone number 3

    Зіставимо значення, введені на формі, із параметрами запита до Фабрики даних. Бачимо, що для першого номера з форми відправляються лише цифри, для другого — цифри зі спецсимволами.

  6. На наступній формі підпишіть введені дані КЕП.

  7. Далі бізнес-процес зберігає дані до БД за допомогою делегата Create entity in data factory.

    enter phone number 4

  8. На наступній формі ви отримаєте значення номерів, збережене до Фабрики даних із попередньої форми. Для першого поля, з якого в запиті відправлялись лише цифри, налаштовано маску та активовано чек-бокс Phone Input. Тому тепер на формі бачимо, що обидва значення, збережені у різному вигляді, відображаються в українському форматі номера телефону.

    enter phone number 5

4. Пов’язані сторінки