Налаштування компонента Select для отримання та фільтрації даних від API-ресурсів

API Endpoint (Кінцева точка інтеграційної взаємодії, ендпоінт) — це точка входу у сервісі для отримання даних при взаємодії двох систем.

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

Поточна інструкція описує налаштування компонента Select для показу даних з ендпоінту та фільтрації даних з іншого компонента Select.

Ви можете налаштувати компонент Select для отримання даних за посиланням як до внутрішніх, так і до зовнішніх ресурсів (ендпоінтів).

Зовнішні ресурси доступні за абсолютними посиланнями, мають бути публічними API, не вимагати автентифікації та повертати дані у форматі JSON як масив об’єктів:

[{},{},{}]

Ось приклад абсолютної URL-адреси, яка надає дані у форматі JSON за допомогою методу /get і повертає список об’єктів:

https://jsonplaceholder.typicode.com/comments

Ця URL-адреса вказує на загальнодоступний API із назвою JSONPlaceholder, який надає несправжні дані для тестування та прототипування. У цьому випадку ендпоінтом є /comments, який повертає список коментарів. Ось приклад даних, які ви можете отримати:

[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo..."
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis..."
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati..."
  }
]

1. Налаштування компонента Select для підтягнення даних з ендпоінту

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

  2. Перейдіть на вкладку Компоненти та додайте компонент Select.

  3. Відкрийте меню налаштувань для компонента (кнопка налаштувань із шестернею).

    bp select form io 1

  4. На вкладці Display, у полі Label, зазначте назву компонента.

    bp select form io 2

  5. Перейдіть на вкладку API та у полі Property Name введіть назву компонента для API-ендпоінту (наприклад, значення selectProcessInstanceId).

    bp select form io 3

  6. Перейдіть на вкладку Data → далі в полі Data Source Type введіть значення URL.

  7. Вкажіть значення для endpoint URL у полі Data Source URL (наприклад, https://user-proc-mng-lowcode-pipe-qa.apps.cicd.mdtu-ddm.projects.epam.com/api/process-instance).

    bp select form io 5

  8. Зазначте Value Property у відповідному полі — назва властивості із JSON-відповіді ендпоінту, яка зберігатиметься як значення після select (наприклад, id).

  9. Встановіть Item Template — HTML-шаблон для відображення значень у селекті, як показано на прикладі нижче.

    processDefinitionName та id беруться із відповіді ендпоінту та відображатимуться в селекті).
    Приклад 1. HTML-шаблон
    <span>{{ item.processDefinitionName }}</span>
<span>{{ item.id}}</span>

    bp select form io 6

    Приклад 2. Запит та відповідь у Swagger UI (сервіс registry-rest-api реєстру)

    bp select form io 4

  10. Збережіть зміни до компонента, натиснувши кнопку Save.

    bp select form io 7

В результаті у випадному списку підтягнеться назва та ідентифікатор (id) усіх послуг, ініційованих посадовою особою.

2. Налаштування залежного компонента Select для фільтрації даних з іншого компонента

  1. Відкрийте форму із компонентом, дані якого потрібно фільтрувати.

  2. Перейдіть на вкладку Компоненти та додайте компонент Select.

  3. Відкрийте меню налаштувань для компонента (кнопка налаштувань із шестернею).

    bp select form io 1

  4. На вкладці Display, у полі Label, зазначте назву компонента.

    bp select form io 2

  5. Перейдіть на вкладку API та у полі Property Name введіть назву компонента для API-ендпоінту FormIO (наприклад, значення selectRelatedTasks).

    bp select form io 8

  6. Перейдіть на вкладку Data → далі в полі Data Source Type введіть значення URL.

  7. Вкажіть значення для endpoint URL у полі Data Source URL (наприклад, https://user-task-mng-lowcode-pipe-qa.apps.cicd.mdtu-ddm.projects.epam.com/api/task).

    bp select form io 9

  8. Визначте Value Property у відповідному полі — назва властивості із JSON-відповіді ендпоінту, яка зберігатиметься як значення після селекту (наприклад, formKey).

  9. Вкажіть Filter Query у відповідному полі — запит параметрів, який додаватиметься до ендпоінту та фільтруватиме його відповідь (наприклад, processInstanceId={{data.selectProcessInstanceId}})

    data.selectProcessInstanceId — назва Property Name (вкладка API) компонента, дані якого необхідно фільтрувати, і який зберігається в об’єкті data.

  10. Встановіть Item Template — HTML-шаблон для відображення значень у селекті, як показано на прикладі нижче.

    name та id беруться із відповіді ендпоінту та відображатимуться в селекті).
    Приклад 3. HTML-шаблон
    <span>{{ item.name}}</span>

<span>{{ item.id}}</span>

  11. Встановіть Refresh On — компонент, на який повинен орієнтуватися поточний компонент під час фільтрації.

  12. Встановіть прапорець для Clear Value On Refresh Options

    bp select form io 11

    Приклад 4. Запита у Swagger UI (сервіс registry-rest-api реєстру)

    bp select form io 10

  13. Збережіть зміни до компонента, натиснувши Save.

    bp select form io 12

В результаті у випадному списку підтягнеться назва та ідентифікатор (id) усіх задач, які належать до послуги, обраної в іншому Select-компоненті.