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

ЗМІСТ

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

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

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 для підтягнення даних з ендпоінту

Увійдіть до Кабінету адміністратора регламентів та створіть форму.
Перейдіть на вкладку Компоненти та додайте компонент Select.
Відкрийте меню налаштувань для компонента (кнопка налаштувань із шестернею).
На вкладці Display, у полі Label, зазначте назву компонента.
Перейдіть на вкладку API та у полі Property Name введіть назву компонента для API-ендпоінту (наприклад, значення selectProcessInstanceId).
Перейдіть на вкладку Data → далі в полі Data Source Type введіть значення URL.

Вкажіть значення для endpoint URL у полі Data Source URL. Наприклад:

https://<service-name>-<namespace>.<dns-wildcard>/api/process-instance

<service-name> — назва сервісу. Наприклад, test-service.
<namespace> — Openshift namespace/проєкт. Наприклад, test-project.
<dns-wildcard> вказує на доменні та піддоменні імена для інстансу Платформи. Наприклад, example.com.
/api/process-instance — конкретний API-ендпоінт сервісу.

Фінальний URL виглядатиме так:

https://test-service-test-project.example.com/api/process-instance

bp select form io 5

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

processDefinitionName та id беруться із відповіді ендпоінту та відображатимуться в select).
Приклад 1. HTML-шаблон
{{ item.processDefinitionName }} {{ item.id}}
Приклад 2. Запит та відповідь у Swagger UI (сервіс registry-rest-api реєстру)
Збережіть зміни до компонента, натиснувши кнопку Save.

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

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

Відкрийте форму із компонентом, дані якого потрібно фільтрувати.
Перейдіть на вкладку Компоненти та додайте компонент Select.
Відкрийте меню налаштувань для компонента (кнопка налаштувань із шестернею).
На вкладці Display, у полі Label, зазначте назву компонента.
Перейдіть на вкладку API та у полі Property Name введіть назву компонента для API-ендпоінту FormIO (наприклад, значення selectRelatedTasks).
Перейдіть на вкладку Data → далі в полі Data Source Type введіть значення URL.

Вкажіть значення для endpoint URL у полі Data Source URL. Наприклад:

https://<service-name>-<namespace>.<dns-wildcard>/api/task

<service-name> — назва сервісу. Наприклад, test-service.
<namespace> — Openshift namespace/проєкт. Наприклад, test-project.
<dns-wildcard> вказує на доменні та піддоменні імена для інстансу Платформи. Наприклад, example.com.
/api/process-instance — конкретний API-ендпоінт сервісу.

Фінальний URL виглядатиме так:

https://test-service-test-project.example.com/api/task

bp select form io 9

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

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

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

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

name та id беруться із відповіді ендпоінту та відображатимуться в селекті).
Приклад 3. HTML-шаблон
{{ item.name}} {{ item.id}}
Встановіть Refresh On — компонент, на який повинен орієнтуватися поточний компонент під час фільтрації.
Встановіть прапорець для Clear Value On Refresh Options

Приклад 4. Запита у Swagger UI (сервіс registry-rest-api реєстру)
Збережіть зміни до компонента, натиснувши Save.

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