Панель администрирования мобильного банка
Руководство пользователя Версия 1.2
22.11.2023
# Руководство панели администратора
# Оглавление
-
- Устройство раздела «Процессы»
- Поиск по имени процесса
- Добавление нового процесса
- Редактирование параметров процесса
- Удаление процесса
- Сохранение внесенных изменений
- Добавление ноды (узла)
- Удаление ноды (узла)
- Переименование ноды (узла)
- Соединение узлов
- Задание имени связи узлов
- Удаление связи узлов
- Добавление ноды (узла) и привязка в одно действие
- Изменение параметров ноды (узла)
- Выбор пресета ноды (узла)
- Редактирование ноды (узла)
- Условные переходы (в разработке)
- Настройка условных переходов
- Цепочка условных переходов
- Панель инструментов
- Перемещение по рабочей области
# 1. Общие сведние о Админ-панели
Админ-панель мобильного банка отвечает за создание и редактирование шаблонов и конфигураций приложения мобильного банка.
Админ панель представляет собой фронтэнд-интерфейс, который взаимодействует по API с бекэндом мобильного банка.
# Принцип работы
Приложение мобильного банка построенно на принципе Server-driven UI [1] - это подход к разработке мобильных приложений, в котором основная логика и пользовательский интерфейс управляются с сервера. Вместо того, чтобы встроенная логика и пользовательский интерфейс были жестко закодированы в приложении на устройстве, сервер поставляет их динамически по API с помощью передачи JSON в зависимости от определенных правил и данных.
Архитектура Server-driven UI включает следующие компоненты:
Клиентское приложение: Это мобильное приложение, которое выполняет функцию отображения и взаимодействия с пользователем. Клиентское приложение получает данные и инструкции от сервера для построения пользовательского интерфейса и выполнения задач.
Сервер: Сервер является центральным компонентом архитектуры SDD и называется BPM. Он содержит бизнес-логику и пользовательский интерфейс, которые будут доставляться на устройства клиентов. Сервер также может быть ответственным за обработку запросов от клиента, аутентификацию и авторизацию пользователей, агрегацию данных и другие задачи.
Шаблоны и конфигурации: Сервер предоставляет шаблоны и конфигурационные файлы, которые определяют структуру и внешний вид пользовательского интерфейса. Эти шаблоны и конфигурации могут быть динамически изменены на сервере, что позволяет легко обновлять и модифицировать пользовательский интерфейс без необходимости выпуска новых версий приложения на устройствах клиентов.
Эта административная панель предназначена для создания и редактирования шаблонов и конфигураций для мобильного банка.
# 2. Хаб
# Принцип работы
Хаб представляет собой централизованную среду, которая предназначена для распространения по всем инстансам. Данная среда также выступает в качестве рабочего пространства для аналитиков.
# Функциональность Хаба
В Хабе централизованно управляются все процессы, ноды и правила, что обеспечивает единые стандарты работы и интеграции.
# Ресурсы Хаба
# 3. Система администрирования мобильным банком
# Вход в систему администрирования:
- Введите в адресную строку браузера адрес панели администрирования мобильного банка (https://admin.bpms.studio (opens new window)).
- Вы увидите страницу логина системы администрирования мобильного банка, как показано на рис. 1.
- Введите имя учетной записи в поле «Логин» и пароль в поле «Пароль».
- Нажмите кнопку «Войти» .
Рис. 1. Страница входа в систему администрирования мобильным банком
# Устройство панели администрирования:
Рис. 2. Панель администрирования
| Обозначение | Описание |
|---|---|
| 1 | Главное меню в свернутом виде. Используется для перехода между разделами. |
| 2 | Развернуть меню для отображения всех пунктов. |
| 3 | Название выбранного раздела меню. |
| 4 | Инструменты поиска, страницы пользователя и уведомления. |
| 5 | Рабочая область. Отображает содержимое раздела, выбранного в меню. |
# Меню панели администрирования:
Рис. 3. Меню панели администрированиям
| Обозначение | Описание |
|---|---|
| 1 | Раздел «Процессы» в меню содержит последовательность действий или процедур, необходимых для формирования мобильного приложения. |
| 2 | Раздел «Виджеты» в меню содержит информацию о компонентах пользовательского интерфейса, предоставляющих определенные функции или отображающих информацию для пользователя. |
| 3 | Раздел «Мультиязычность» в меню содержит информацию о возможностях продукта поддерживать несколько языков. В этом разделе происходит управление переводом контента, локализацию интерфейса и другие аспекты, связанные с поддержкой различных языков. |
| 4 | Раздел «Настройки» в меню содержит информацию о доступных параметрах настройки продукта или системы. |
# 4. Раздел процессы
# Устройство раздела «Процессы»
| Обозначение | Описание |
|---|---|
| 1 | Создать новый процесс. |
| 2 | Выбранный в данный момент процесс. |
| 3 | Доступные для выбора уже созданные процессы. |
| 4 | Название выбранного в данный момент процесса. |
| 5 | Редактировать параметры выбранного процесс. |
| 6 | Добавить новую ноду (узел) в выбранный процесс. |
| 7 | Рабочая область для взаимодействия с нодой (узлом) процесса. |
| 8 | Отображение параметров рабочей области, панель инструментов рабочей области. |
| 9 | Кнопка сохранить. Сохраняет внесенные изменения в процесс. |
| 10 | Поиск по процессам. Ищет по имени процесса. |
API
Для получения доступных для выбора уже созданных процессов отправляется GET запрос /api/v2/bpm/processes в ответ (сode 200) приходит JSON следующего вида:
{
"status": 1,
"message": "",
"response": {
"processes": [
{
"id": 1373,
"process_name": "test"
},
{
"id": 1372,
"process_name": "v2_first_test"
},
{
"id": 1367,
"process_name": "Показательный процесс"
},
...
// Другие объекты процессов
...
],
"offset": 0,
"total": 28,
"all": 28
}
}
status: 1 - указывает на статус выполнения запроса. Значение 1 указывает на успешное выполнение запроса.message: "" - предназначено для сообщений или дополнительной информации, связанной с запросом. В данном случае, сообщение пустое.response- содержит основную часть данных, которые были запрошены.processes- поле processes содержит массив объектов процессов. Каждый объект процесса имеет два поля:id- уникальный идентификатор процесса.process_name- имя процесса.
offset: 0 - поле offset указывает смещение (начальную позицию) полученных процессов в списке. Значение 0 означает, что получены все доступные процессы.total: 28 - поле total указывает общее количество процессов, доступных в системе. Без учета смещения.all: 28 - поле all также указывает на общее количество доступных процессов. В данном случае, значение совпадает с полем "total", что означает, что все процессы были возвращены.
# Поиск по имени процесса
Для выполнения поиска по имени процесса, следуйте указаниям ниже:
- Нажмите на кнопку Лупа (обозначение 10 на рис. 4).
- В появившемся поле справа от кнопки Лупа, введите поисковой запрос. Результаты поиска будут обновляться в реальном времени справа от поля по мере ввода текста.
# Добавление нового процесса
- Нажмите кнопку + в разделе процессы (обозначение 1 из рис. 4).
- В открывшейся форме "Создать процесс", расположенной справа на экране, заполните следующие поля:
- Название процесса: название создаваемого процесса. Обязательно для заполнения.
- Тема процесса: выберите темную или светлую тему для процесса.
- Для сохранения созданного процесса нажмите кнопку «Создать». Для отмены создания процесса нажмите кнопку «Отмена» (рис. 5).
]
Рис. 5. Добавление нового процесса»
API Добавление нового процесса
При создании процесса отправляется POST запрос /api/v2/bpm/processes c JSON имеющий следующую структуру:
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
{
"process_name": "test11132",
"process_n8n": {
"nodes": {},
"connections": {},
"options": {
"cellSize": 50,
"gridBinding": true,
"canvasTheme": "orange"
},
"availableNodes": {}
}
}
process_name: "test11132" - поле указывает имя процесса, который будет создан. В данном случае, имя процесса установлено как "test11132".process_n8n: { ... } - объект, содержащий информацию о процессе в формате n8n [2].nodes: {} - предназначен для хранения информации о узлах (nodes) процесса. В данном случае, объект пустой.connections: {} - используется для хранения информации о связях (connections) между узлами процесса. В данном случае, объект пустой.options: { ... } - это объект, содержащий некоторые опции, связанные с процессом.cellSize: 50 - указывает размер ячейки в процессе. В данном случае, размер ячейки установлен на 50.gridBinding: true - указывает, используется ли привязка к сетке. Значение true означает, что привязка к сетке включена.canvasTheme: "orange" - указывает тему холста процесса. В данном случае, тема холста установлена на "orange".availableNodes: {} - предназначен для хранения информации о доступных узлах (available nodes) для использования в процессе. В данном случае, объект пустой.
В случае успеха приходит ответ (code 200) c JSON:
{
"status": 1,
"message": "Process is successfully created",
"response": {}
}
status: 1 - указывает на успешное выполнение операции.message: "Process is successfully created" - сообщение указывает, что процесс был успешно создан.response: {} - дополнительная информация может быть предоставлена внутри этого объекта. Однако, в данном случае, он не содержит никаких дополнительных данных.
В случае ошибки приходит (code 400) JSON:
{
"error": "Ошибка..."
}
error: "Ошибка..." - текстовое описание ошибки, которое может быть дополнительно указано. В данном случае, сообщение просто указывает на наличие ошибки без дополнительной информации.
# Редактирование параметров процесса
- Нажмите кнопку три точки в разделе процессы (обозначение 5 из рис. 4).
- В открывшейся форме "Редактировать процесс", которая находится справа на экране, внесите желаемые изменения в следующие поля:
- Название процесса: введите новое название для процесса.
- Тема процесса: выберите темную или светлую тему для процесса.
- Чтобы сохранить внесенные изменения процесса, нажмите кнопку «Сохранить» (Рис. 6).
Рис. 6. Редактирование параметров процесса»
API Редактирование параметров процесса
При редактировании процесса отправляется PATCH запрос /api/v2/bpm/processes/{process_id} c JSON имеющий следующую структуру:
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
{
"process_name": "test1113221",
"process_n8n": {
"nodes": {},
"connections": {},
"options": {
"cellSize": 50,
"gridBinding": true,
"canvasTheme": "orange"
},
"availableNodes": {
"firstNode": {
"dbId": 100,
"name": "New node for tests",
"description": "THis is first node",
"input": true,
"outputs": [
"main"
],
"category": "Base Nodes"
},
{//далее список доступных нод}
},
}
}
}
process_name: "test11132" - поле указывает имя процесса, который будет создан. В данном случае, имя процесса установлено как "test11132".process_n8n: { ... } - объект, содержащий информацию о процессе в формате n8n [2:1].nodes: {} - предназачен для хранения информации о узлах (nodes) процесса. В данном случае, объект пустой.connections: {} - используется для хранения информации о связях (connections) между узлами процесса. В данном случае, объект пустой.options: { ... } - это объект, содержащий некоторые опции, связанные с процессом.cellSize: 50 - указывает размер ячейки в процессе. В данном случае, размер ячейки установлен на 50.gridBinding: true - указывает, используется ли привязка к сетке. Значение true означает, что привязка к сетке включена.canvasTheme: "orange" - указывает тему холста процесса. В данном случае, тема холста установлена на "orange".availableNodes: {} - предназначен для хранения информации о доступных узлах (available nodes) для использования в процессе.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "Schema is updated",
"response": {
"name": "test1113221"
}
}
status: 1 - указывает на успешное выполнение операции.message: "Schema is updated" - сообщение, что процесс был успешно изменен.response: {} - дополнительная информация может быть предоставлена внутри этого объекта. В данном случае, содержится имя процесса.
В случае ошибки приходит (code 404) JSON:
{
"error": "string"
}
error: "string" - текстовое описание ошибки, которое может быть дополнительно указано.
# Удаление процесса
- Нажмите кнопку три точки в разделе процессы (обозначение 5 из рис. 4).
- В открывшейся форме «Редактировать процесс», которая находится справа на экране, нажмите кнопку «Удалить» (рис. 7).
Рис. 7. Редактирование параметров процесса» - В открывшемся окне «Удаление процесса» (рис. 8):
- Для потверждения удаления процесса нажмите на кнопку «Да».
- Для отмены удаления процесса нажмите на кнопку «Отмена».
Рис. 8. Подтверждение удаление процесса»
API Удаление процесса
При удалении процесса отправляется DELETE запрос /api/v2/bpm/processes/{process_id}.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "Schema is deleted",
"response": {}
}
status: 1 - указывает на успешное выполнение операции.message: "Schema is deleted - указывает, что процесс был успешно изменен.response: {} - дополнительная информация может быть предоставлена внутри этого объекта.
В случае ошибки приходит (code 400) JSON:
{
"error": "string"
}
error: "string" - текстовое описание ошибки, которое может быть дополнительно указано.
# Сохранение внесенных изменений
Для сохранения внесенных изменений в процесс:
- Нажмите на кнопку «Дискета» пункт 9.
API Сохранение внесенных изменений
При сохранении изменений отправляется PATCH запрос /api/v2/bpm/processes/{process_id} c JSON имеющий следующую структуру:
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
{
"process_n8n": {
"nodes": {
"1686317544397:338752549702803": {
"id": "1686317544397:338752549702803",
"type": "homeScreen",
"displayName": "hello_test",
"selected": false,
"position": [
1040,
-260
],
"name": "homeScreen",
"title": "homeScreen",
"nodeType": "node",
"description": "",
"db_id": 99197,
"overwrittenNodeType": {
"outputs": [
"main9",
"main10"
],
"outputNames": [
"test_name1",
""
]
}
},
"1686317553836:24570579918344216": {
"id": "1686317553836:24570579918344216",
"type": "testNode",
"displayName": "Enter node",
"selected": false,
"position": [
1462.5,
-260
],
"name": "testNode",
"title": "Enter node",
"nodeType": "node",
"description": "",
"db_id": 99340
}
},
"connections": {
"1686317544397:338752549702803": {
"main9": [
{
"endNodeId": "1686317553836:24570579918344216",
"connections": [
{
"presetId": 99341,
"conditions": {
"condition-1": {
"id": 299,
"name": "attempt to create new user failed",
"condition": "api",
"service": {
"id": 28,
"value": "LMS-test"
},
"method": {
"id": 59,
"value": "createDraftUser"
},
"answerPrefix": "=",
"answer_id": null,
"status": "done"
},
"condition-2": {
"id": 27,
"name": "Save pan",
"condition": "api",
"service": {
"id": 28,
"value": "LMS-test"
},
"method": {
"id": 102,
"value": "savePan"
},
"answerPrefix": "=",
"answer_id": null,
"status": "done"
}
},
"conditionExpression": [
{
"expressionPart": "expression-1",
"p1": "condition-1",
"operation": "or",
"p2": "condition-2"
},
{
"expressionPart": "expression-2",
"p1": "condition-2"
}
]
}
]
}
]
}
},
"options": {
"cellSize": 50,
"gridBinding": true,
"canvasTheme": "orange"
},
"availableNodes": {}
}
}
process_n8n: { ... } - объект, содержащий информацию о процессе в формате n8n [2:2]nodes{}: - предназначен для хранения информации о узлах (nodes) процесса.id(String) - уникальный идентификатор узла.type(String) - тип узла.displayName(String) - отображаемое имя узла.selected(Boolean) - флаг, указывающий, выбран ли узел.position(Array) - координаты позиции узла на холсте.name(String) - имя узла.title(String) - заголовок узла.nodeType(String) - тип узла.description(String) - описание узла.db_id(Number) - уникальный идентификатор узла в базе данных.overwrittenNodeType(Object) - объект, содержащий информацию о перезаписанном типе узла.outputs(Array) - массив имен выходов узла.outputNames(Array) - массив имен выходов узла.
connections(Object) - объект, определяющий связи между узлами.1686317544397:338752549702803(Object) - объект, определяющий выходной порт узла и связи, исходящие из него.main9(Array) - массив объектов, определяющих связи и условия для данного порта.endNodeId(String) - идентификатор узла, к которому осуществляется связь.connections(Array) - массив объектов, определяющих дополнительные связи и условия для данной связи.presetId(Number) - идентификатор пресета.conditions(Object) - объект, содержащий информацию о условиях для связи.condition-1иcondition-2(Object) - объекты, описывающие каждое условие.id(Number) - уникальный идентификатор условия.name(String) - название условия.condition(String) - тип условия.service(Object) - объект, содержащий информацию о сервисе, связанном с условием.method(Object) - объект, содержащий информацию о методе, связанном с условием.answerPrefix(String) - префикс ответа.answer_id(null) - идентификатор ответа.status(String) - Статус условия.
conditionExpression(Array): Представляет выражение условия.<index>(Object): Представляет часть выражения.expressionPart(String): Часть выражения.p1(string): Параметр 1.operation(string): Операция.p2(string): Параметр 2.
options(Object) - содержит различные параметры для процесса.cellSize(Number) - размер ячеек на холсте.gridBinding(Boolean) - показывает, включена ли сетка.canvasTheme(String) - тема холста.
availableNodes(Object) - представляет доступные узлы в процессе.
# Добавление ноды (узла)
- Нажмите кнопку «Добавить узел» (обозначение 6 из рис. 4).
- В открывшемся меню, которое находится справа на экране, выберите раздел "Base Nodes" рис. 9.
Рис. 9. Меню добавления нод (узлов) в процесс - В списке нод (узлов) рис. 10 выберите нужную ноду (узел) и кликните по ней. Нода (узел) будет добавлена на рабочую область рис. 11.
Альтернативный метод: перетащите (Drag-and-drop)[3] нужную ноду (узел) из списка нод (узлов) в рабочую область.
Рис. 10. Список нод (узлов) для добавления
Рис. 11. Добавленная нода (узел) на рабочей области
API Добавление ноды (узла)
При добавлении ноды на рабочее поле отправляется POST запрос /api/v2/bpm/nodes c JSON имеющий следующую структуру:
{
"node_id": 16376,
"process_id": 1407
}
node_id: числовое значение - представляет идентификатор узла (ноды). Это уникальный идентификатор ноды, которую мы добавляем.
process_id: числовое значение - представляет идентификатор процесса. Это уникальный идентификатор, используемый для идентификации текущего процесса который изменяем.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "",
"response": {
"id": 93165,
"name": "loanProcessing",
"title": "Loan processing",
"nodeType": "node",
"description": "Processing a loan using a loan calculator with displayed loan conditions"
}
}
status: 1 - указывает на успешное выполнение операции.message: "" - содержащит дополнительное сообщение или информацию о статусе операции. В данном случае пустая строка указывает на отсутствие дополнительного сообщения.
response: Объект, содержащий ответ или данные операции.id: 93165 - идентификатор ноды добавленный на рабочее поле. В данном случае, 93165.name: "loanProcessing" - имя ноды (узла). В данном случае, "loanProcessing".title: "Loan processing" - представляющее заголовок или название. В данном случае, "Loan processing" - это заголовок объекта.nodeType: "node" - указывает тип узла. В данном случае, "node" - это тип узла объекта.description: "Processing a loan using a loan calculator with displayed loan conditions" - содержит описание объекта. В данном случае, "Processing a loan using a loan calculator with displayed loan conditions" - это описание объекта.
# Удаление ноды (узла)
Для удаления ноды (узла) можно воспользоваться следующими методами:
При помощи действий ноды (узла):
- Кликните левой кнопкой мыши по ноде (узлу).
- Над нодой (узлом) появится знак Корзины рис. 12. Кликните по знаку Корзины.
Рис. 12. Выделенная нода (узел) и значок корзины над ней
При помощи горячей клавиши:
- Кликните левой кнопкой мыши по ноде (узлу).
- Нажмите кнопку DELETE.
API Удаление ноды (узла)
При удалении ноды (узла) с рабочего поля выполняется DELETE запрос /api/v2/bpm/nodes/{node_id}.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "Node is deleted",
"response": {}
}
status: 1 - указывает на успешное выполнение операции.message: "Node is deleted - указывает, что нода (узел) была успешно удалена с рабочего поля.response: {} - дополнительная информация может быть предоставлена внутри этого объекта.
# Переименование ноды (узла)
- Кликните левой кнопкой мыши по ноде (узлу).
- Кликните на значок пера над нодой (узлом), которую хотите переименовать.
- Под нодой (узлом) появится поле для нового названия рис. 13. Введите желаемое название ноды (узла) в это поле и нажмите клавишу ENTER.
- Нажмите на кнопку «Дискета» пункт 9.
Рис. 13. Поле для нового имени ноды (узла)
API Переименование ноды (узла)
Происходит запрос сохранение внесенных изменений с новым displayName.
{
"displayName": "hello_test111",
displayName: "hello_test111" - отображаемое имя ноды на рабочем поле.
# Соединение нод (узлов)
- Зажмите левую кнопку мыши на значке + на правой гране ноды (узла).
- Перетащите стрелочку к другой ноде (узлу) и отпустите левую кнопку мыши. Ноды (узлы) соединены, если между ними появится стрелочка, указывающая на соединение рис. 14.
- Нажмите на кнопку «Дискета» пункт 9.
Одна нода (узел) может быть соединём с множеством других нод (узлов).
Рис. 14. Соединенные ноды (узлы)
API Соединение нод (узлов)
Происходит запрос сохранение внесенных изменений с указанием какие узлы соединены.
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
"overwrittenNodeType": {
"outputs": [
"main11",
"main12"
],
"outputNames": [
"",
""
//.....
"connections": {
"1686317544397:338752549702803": {
"main11": [
{
"endNodeId": "1686317553836:24570579918344216"
}
]
}
}
outputs - в массив выходов ноды добавляется новый свободный выход «main12».
outputNames - в массив имен связи добавляется связь без имени для свободного выхода main12.
connections - содержит информацию о связях между узлами.
1686317544397:338752549702803 - идентификатор узла.
main11 - задействованный выход main11 узла 1686317544397:338752549702803.
endNodeId - указывает с каким узлом установленное соединение. В данном случае, с "1686317553836:24570579918344216".
Это означает, что выход "main11" у узла 1686317544397:338752549702803 соединен с узлом с идентификатором 1686317553836:24570579918344216.
# Задание имени связи нод (узлов)
- Когда нода (узел) соединенена с другой нодой (узлом), то сделайте двойной клик левой кнопкой мыши по ней.
- Откроется окно редактирование ноды (узла) рис. 15.
Рис. 15. Редактирование ноды (узла) - Кликните по тексту «Введите имя» (обозначение 1 на рис. 15) и введите желаемое имя соединения.
- Кликните по кнопке «Сохранить» (обозначение 2 на рис. 15).
- На рабочей области вы увидите новое имя ноды (узла) (рис. 16).
Рис. 16. Имя для связи двух нод (узлов)
API Задание имени связи нод (узлов)
DANGER
Постоянно отдает ошибку «Невозможно задать имя выхода»
# Удаление связи нод (узлов)
- Наведите курсор мыши на стрелку, соединяющую два ноды (узла).
- Над стрелкой появится значок корзины (рис. 17).
- Нажмите на значок корзины.
Связь удалена, если стрелка соединяющая ноды (узлы) исчезла.
Рис. 17. Удаление связи нод (узлов)
API Удаление связи нод (узлов)
Происходит запрос сохранение внесенных изменений с указанием, что узлы больше не соединены.
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
Узлы соедины:
"overwrittenNodeType": {
"outputs": [
"main14",
"main15"
],
"outputNames": [
"",
""
]
}
//.............
"connections": {
"1686317544397:338752549702803": {
"main14": [
{
"endNodeId": "1686317553836:24570579918344216"
}
]
}
}
Соединение узлов удалено:
"overwrittenNodeType": {
"outputs": [
"main15"
],
"outputNames": [
""
]
}
//...............
"connections": {},
main14 - выход узла через который была связь с другим узлом удаляется.
main15 - свободный выход узла становится единственным выходом узла.
connections - информация о соединении узлов удалена из connections.
# Добавление ноды (узла) и привязка в одно действие
- Кликните мышкой на значке + на правой гране ноды (узла) (обозначение 1 на рис. 18).
Рис. 18. Нода (узел) на рабочей области - В открывшемся меню, которое находится справа на экране, выберите раздел "Base Nodes" (рис. 9).
- В списке нод (узлов) выберите нужную ноду (узел) и кликните по ней (рис. 10).
- Нода (узел) будет добавлен на рабочую область и сразу соединен с нодой (узлом) из пункта 1 (рис. 14).
API Добавление ноды (узла) и привязка в одно действие
Происходит 2 запроса: Добавление ноды (узла) и Соединение нод (узлов).
# Изменение параметров ноды (узла)
- Когда нода (узел) размещена на рабочей области, сделайте двойной клик левой кнопкой мыши по ней.
- Откроется окно редактирование ноды (узла) (рис. 19).
Рис. 19. Настройки ноды (узла)
| Обозначение | Описание |
|---|---|
| 1 | Имя настраиваемой ноды (узла). |
| 2 | Пресеты[4]: предустановленные варианты для данной ноды (узла). |
| 3 | Примерное отображение экрана на пользовательском устройстве. |
| 4 | Настройка условий для перехода на следующие ноды (узлы). |
API Изменение параметров ноды (узла)
При открытии окна редактирования ноды выполняется GET запрос /api/v2/bpm/nodes/{node_id}.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "",
"response": {
"id": 125902,
"name": "status",
"title": "Status",
"nodeType": "node",
"properties": {
"icon": "questionnaire.svg\r"
},
"screens": [
{
"id": 125912,
"name": "status.approvalAmountGreater.screen.1",
"title": "main",
"nodeType": "screen",
"properties": {},
"nodeFields": [
{
"id": 125927,
"name": "status.approvalAmountGreater.screen.1.block.1",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h1'>Woohoo! Application approved</span>"
}
},
{
"id": 125944,
"name": "status.approvalAmountGreater.screen.1.block.2",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h5'><span class='color-text-minor-first'>Your available credit balance is</span></span>"
}
},
{
"id": 125953,
"name": "status.approvalAmountGreater.screen.1.block.3",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-vernum'>₹</span>"
}
},
{
"id": 125978,
"name": "status.approvalAmountGreater.screen.1.button.main.4",
"nodeType": "button.main",
"properties": {
"visibility": "true",
"align": "center",
"backgroundColor": "",
"strokeColor": "",
"text": "<span class='font-text-btn'><span class='color-text-major-first'>See details</span></span>",
"underline": "true",
"action": ""
}
},
{
"id": 125981,
"name": "status.approvalAmountGreater.screen.1.image.5",
"nodeType": "image",
"properties": {
"visibility": "true",
"imageUrl": "media/2f/45/2f45c8a216507caf4960fdc97a145cc8.png"
}
},
{
"id": 125985,
"name": "status.approvalAmountGreater.screen.1.block.box.6",
"nodeType": "block.box",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-small'><span class='color-text-minor-first'>You can withdraw the full amount or a portion of this approved limit along with term of repayment after completing the verification process. Any remaining available balance will not bring you additional costs!</span></span>",
"imageUrl": "",
"backgroundColor": "#F5F7FB"
}
},
{
"id": 125993,
"name": "status.approvalAmountGreater.screen.1.button.main.8",
"nodeType": "button.main",
"properties": {
"visibility": "true",
"backgroundColor": "{'gradient' : { 'deg': 93.21}, 'value' : [ {'color' : '#A92DD2', 'weight' : '11.61%'}, {'color' : '#9747FF', 'weight' : '24.44%'}, {'color' : '#339C89', 'weight' : '64.47%'}, {'color' : '#43B02A', 'weight' : '92.93%'}] }",
"strokeColor": "",
"text": "<span class='font-text-h4'><span class='color-text-light-first'>Get Started</span></span>",
"action": "next"
}
},
{
"id": 125922,
"name": "topBar.centerLogo",
"title": "top bar app",
"nodeType": "widget",
"properties": {
"visibility": "True"
},
"nodeFields": [
{
"id": 125924,
"name": "topBar.centerLogo.button.image.1",
"nodeType": "button.image",
"properties": {
"visibility": "true",
"align": "right",
"text": "",
"imageUrl": "media/55/02/55025096cb35ea0453b0811dab56669c.png",
"action": "previous"
}
},
{
"id": 125951,
"name": "topBar.centerLogo.image.2",
"nodeType": "image",
"properties": {
"visibility": "true",
"imageUrl": "media/27/cd/27cd2ff0809eb7707c0aa0d67a2dc14f.png"
}
},
{
"id": 125960,
"name": "topBar.centerLogo.langSelect.3",
"nodeType": "langSelect",
"properties": {
"visibility": "true",
"imageUrl": "",
"text": "ENG",
"data": "[\"ENG\", \"हिंदी\"]"
}
},
{
"id": 125973,
"name": "topBar.centerLogo.button.image.4",
"nodeType": "button.image",
"properties": {
"visibility": "true",
"align": "right",
"text": "",
"imageUrl": "media/7a/16/7a16a4dfa67a691eab1dc8062f602c37.png",
"action": ""
}
}
]
}
]
}
],
"presets": [
{
"id": 125903,
"preset_name": "status.approvalAmountGreater",
"id_node": 125903,
"preset_description": ""
},
{
"id": 125904,
"preset_name": "status.approvalAmountEqualOrLess",
"id_node": 125904,
"preset_description": ""
},
{
"id": 125905,
"preset_name": "status.approvalAmountEqual",
"id_node": 125905,
"preset_description": ""
},
{
"id": 125906,
"preset_name": "status.contractedIsSigned",
"id_node": 125906,
"preset_description": ""
},
{
"id": 125907,
"preset_name": "status.unsuccessfully",
"id_node": 125907,
"preset_description": ""
},
{
"id": 125908,
"preset_name": "status.rejection",
"id_node": 125908,
"preset_description": ""
},
{
"id": 125909,
"preset_name": "status.finalSuccess",
"id_node": 125909,
"preset_description": ""
}
],
"presetId": 125903,
"availableTransitions": []
}
}
status(number): Статус выполнения операции. Значение 1 указывает на успешное выполнение.message(string): Сообщение об операции. В данном случае пустое.response(object): Объект ответа, содержащий информацию о узле.id(number): Идентификатор узла.name(string): Имя узла.title(string): Заголовок узла.nodeType(string): Тип узла.properties(object): Свойства узла.icon(string): Имя файла иконки в формате SVG.
screens(array): Массив экранов, связанных с узлом.id(number): Идентификатор экрана.name(string): Имя экрана.title(string): Заголовок экрана.nodeType(string): Тип экрана.properties(object): Свойства экрана.nodeFields(array): Массив полей узла, связанных с экраном.id(number): Идентификатор поля узла.name(string): Имя поля узла.nodeType(string): Тип поля узла.properties(object): Свойства поля узла.visibility(string): Видимость поля (true или false).align(string): Выравнивание поля.text(string): Текст поля.imageUrl(string): URL изображения.backgroundColor(string): Цвет фона в формате HEX.underline(string): Подчеркивание текста (true или false).action(string): Действие, связанное с кнопкой.
title(string): Заголовок поля узла.nodeFields(array): Дополнительные поля узла, связанные с полем.
presets(array): Массив предустановок узлов.id(number): Идентификатор пресета.preset_name(string): Имя пресета.id_node(number): Идентификатор узла, к которому относится пресет.preset_description(string): Описание пресета.
presetId(number): Идентификатор текущего пресета.availableTransitions(array): Массив доступных переходов.
В случае ошибки приходит (code 400) JSON:
{
"error": "string"
}
error: "string" - текстовое описание ошибки, которое может быть дополнительно указано.
API Метод получения доступных экранов (ноды, группы) (в разработке)
# Метод: GET
# Endpoint:
/api/bpm/nodes/availableScreens/{id_node}node_type
# Описание:
В зависимости от типа ноды (node_type), ответ будет содержать разный набор экранов:
- node_type = 1: Возвращаются все экраны этой ноды (часто нужно переходить не на первый экран).
- node_type = 5/7: Возвращаются экраны всех нод, определённых как первые в группе или процессе (с нашей реализацией должна быть всегда одна).
- node_type = 6: Возвращаются все экраны указанного пресета.
Если у ноды отсутствует экран или пресет, например, при переходе на ноду-функцию, ответ будет содержать только nodeId.
# Параметры запроса:
- Без тела запроса.
# Пример ответа:
{
"status": 1,
"message": "",
"response": {
"availableScreens": [
{
"nodeId": 3,
"nodeName": "identification",
"presetId": 12,
"presetName": "mobilePhone",
"screenId": 13,
"screenName": "first"
},
{
"nodeId": 3,
"nodeName": "identification",
"presetId": 12,
"presetName": "mobilePhone",
"screenId": 14,
"screenName": "second"
},
{
"nodeId": 3,
"nodeName": "identification",
"presetId": 16,
"presetName": "email",
"screenId": 17,
"screenName": "first"
}
]
}
}
# Параметры ответа:
status(number): Статус ответа. Например, "1" указывает на успешное выполнение.message(string): Описание ответа или сообщение об ошибке.response(object): Объект, содержащий информацию о доступных экранах.availableScreens(array of objects): Массив доступных экранов.nodeId(number): Идентификатор ноды.nodeName(string): Название ноды.presetId(number, optional): Идентификатор пресета. Может отсутствовать, если у ноды нет пресета.presetName(string, optional): Название пресета. Может отсутствовать, если у ноды нет пресета.screenId(number): Идентификатор экрана.screenName(string): Название экрана.
# Выбор пресета ноды (узла)
- Если в ноде (узле) есть доступные пресеты, то они будут отображены в левой колонке «Пресеты» (обозначение 1 на рис. 20).
- Кликните по нужном пресету и пресет тут же применится к ноде (узлу).
После активации пресета экран пользовательского устройства(обозначение 3 на рис. 20) изменится согласно выбранного пресета.
Активный в данный момент пресет обозначен стрелкой справа от названия пресета, (обозначение 2 на рис. 20).
Важное примечание
В пресете ноды (узла) может быть несколько экранов, и каждый из этих экранов доступен для редактирования.
Рис. 20. Выбранный пресет ноды (узла)
API Выбор пресета ноды (узла)
При выборе пресета ноды выполняется GET запрос /api/v2/bpm/nodes/{node_id}.
В случае успеха приходит (code 200) JSON:
{
"status": 1,
"message": "",
"response": {
"id": 141130,
"name": "status",
"title": "Status",
"nodeType": "node",
"properties": {},
"screens": [
{
"id": 141138,
"name": "status.contractedIsSigned.screen.1",
"title": "main",
"nodeType": "screen",
"properties": {},
"nodeFields": [
{
"id": 141162,
"name": "status.contractedIsSigned.screen.1.block.1",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h1'>Welcome on board Viva!</span>"
}
},
{
"id": 141167,
"name": "status.contractedIsSigned.screen.1.block.2",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-h5'><span class='color-text-minor-first'>Your available credit balance is</span></span>"
}
},
{
"id": 141184,
"name": "status.contractedIsSigned.screen.1.block.3",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "center",
"text": "<span class='font-text-vernum'>₹</span>"
}
},
{
"id": 141203,
"name": "status.contractedIsSigned.screen.1.button.main.4",
"nodeType": "button.main",
"properties": {
"visibility": "true",
"align": "center",
"backgroundColor": "",
"strokeColor": "",
"text": "<span class='font-text-btn'><span class='color-text-major-first'>Viva Contract</span></span>",
"action": "next"
}
},
{
"id": 141208,
"name": "status.contractedIsSigned.screen.1.image.5",
"nodeType": "image",
"properties": {
"visibility": "true",
"imageUrl": "media/2f/45/2f45c8a216507caf4960fdc97a145cc8.png"
}
},
{
"id": 141215,
"name": "status.contractedIsSigned.screen.1.block.box.6",
"nodeType": "block.box",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-small'><span class='color-text-minor-first'>Your contract has been signed\n and sent to you by e-mail and sms</span></span>",
"imageUrl": "",
"backgroundColor": "#F5F7FB"
}
},
{
"id": 141218,
"name": "status.contractedIsSigned.screen.1.block.7",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-h4'>Download your contract</span>"
}
},
{
"id": 141220,
"name": "status.contractedIsSigned.screen.1.image.8",
"nodeType": "image",
"properties": {
"visibility": "true",
"imageUrl": "media/a2/8c/a28ca4ffb21ab0bc9d62c59f7a2c6df6.png"
}
},
{
"id": 141222,
"name": "status.contractedIsSigned.screen.1.button.main.9",
"nodeType": "button.main",
"properties": {
"visibility": "true",
"backgroundColor": "{'gradient' : { 'deg': 93.21}, 'value' : [ {'color' : '#A92DD2', 'weight' : '11.61%'}, {'color' : '#9747FF', 'weight' : '24.44%'}, {'color' : '#339C89', 'weight' : '64.47%'}, {'color' : '#43B02A', 'weight' : '92.93%'}] }",
"strokeColor": "",
"text": "<span class='font-text-h4'><span class='color-text-light-first'>Start withdrawing</span></span>",
"action": "next"
}
},
{
"id": 141149,
"name": "topBar.centerLogo",
"title": "top bar app",
"nodeType": "widget",
"properties": {
"visibility": "True"
},
"nodeFields": [
{
"id": 141161,
"name": "topBar.centerLogo.button.image.1",
"nodeType": "button.image",
"properties": {
"visibility": "true",
"align": "right",
"text": "",
"imageUrl": "media/55/02/55025096cb35ea0453b0811dab56669c.png",
"action": "previous"
}
},
{
"id": 141178,
"name": "topBar.centerLogo.image.2",
"nodeType": "image",
"properties": {
"visibility": "true",
"imageUrl": "media/27/cd/27cd2ff0809eb7707c0aa0d67a2dc14f.png"
}
},
{
"id": 141191,
"name": "topBar.centerLogo.langSelect.3",
"nodeType": "langSelect",
"properties": {
"visibility": "true",
"imageUrl": "",
"text": "",
"data": "[\"ENG\", \"हिंदी\"]"
}
},
{
"id": 141194,
"name": "topBar.centerLogo.button.image.4",
"nodeType": "button.image",
"properties": {
"visibility": "true",
"align": "right",
"text": "",
"imageUrl": "media/7a/16/7a16a4dfa67a691eab1dc8062f602c37.png",
"action": ""
}
}
]
}
]
}
],
"presets": [
{
"id": 141131,
"preset_name": "status.approvalAmountGreater",
"id_node": 141131,
"preset_description": ""
},
{
"id": 141132,
"preset_name": "status.approvalAmountEqualOrLess",
"id_node": 141132,
"preset_description": ""
},
{
"id": 141133,
"preset_name": "status.approvalAmountEqual",
"id_node": 141133,
"preset_description": ""
},
{
"id": 141134,
"preset_name": "status.contractedIsSigned",
"id_node": 141134,
"preset_description": ""
},
{
"id": 141135,
"preset_name": "status.unsuccessfully",
"id_node": 141135,
"preset_description": ""
},
{
"id": 141136,
"preset_name": "status.rejection",
"id_node": 141136,
"preset_description": ""
},
{
"id": 141137,
"preset_name": "status.finalSuccess",
"id_node": 141137,
"preset_description": ""
}
],
"availableTransitions": []
}
}
status(Integer): Статус выполнения операции. Значение 1 указывает на успешное выполнение.message(String): Сообщение об операции. В данном случае пустое.response(Object): Объект, содержащий ответные данные.id(Integer): Уникальный идентификатор узла.name(String): Название узла.title(String): Заголовок узла.nodeType(String): Тип узла.properties(Object): Свойства узла (здесь пусто).screens(Array): Массив экранов, связанных с узлом.id(Integer): Уникальный идентификатор экрана.name(String): Название экрана.title(String): Заголовок экрана.nodeType(String): Тип узла.properties(Object): Свойства узла (здесь пусто).nodeFields(Array): Массив полей узла, каждый содержит следующие поля:id(Integer): Уникальный идентификатор поля.name(String): Название поля.nodeType(String): Тип узла.properties(Object): Свойства, связанные с узлом или полем узла.visibility(String): Видимость элемента (например, "true" или "false").align(String): Выравнивание элемента (например, "center", "left", "right").text(String): Текстовое содержимое элемента, может включать в себя HTML-разметку.backgroundColor(String): Цвет фона элемента.strokeColor(String): Цвет обводки элемента.imageUrl(String): URL-адрес изображения для элементов, таких как "image" или "button.image".action(String): Действие, связанное с элементом, например, "next", "previous".data(String): Данные элемента, обычно в формате JSON-строки. Как правило, используется для элементов выбора языка.
presets(Array): Массив пресетов, связанных с узлом.id(Integer): Уникальный идентификатор пресета.preset_name(String): Название пресета.id_node(Integer): Идентификатор узла содержащий ноду.preset_description(String): Описание пресета.
availableTransitions(Array): Доступные переходы (здесь пусто).
В случае ошибки приходит (code 400) JSON:
{
"error": "Такой вариант пресета не найден."
}
error: "string" - текстовое описание ошибки, которое может быть дополнительно указано.
# Редактирование ноды (узла)
- Войдите в «Изменение параметров ноды (узла)».
- Наведите мышь на раздел "Экраны", чтобы появился значок "Карандаш" (обозначение 1 на рис. 21).
Рис. 21. Значок карандаш для входа в редактирование данных ноды (узла) - Нажмите на значок «Карандаш» (обозначение 1 на рис. 21).
- Вы попадаете в режим редактирование данных ноды (узла) (рис. 22). Слева на экране будет отображен вид ноды (узла) на пользовательском устройстве (обозначение 1 на рис. 22). Справа будут доступны данные ноды (узла) для редактирования (обозначение 2 на рис. 22).
Рис. 22. Редактирование данных ноды (узла) - Кликните на желаемом блоке для редактирования. Место редактирования будет подсвечено на экране слева (обозначение 5 на рис. 24).
# Actions (в разработке)
Раздел "Actions" в системе предназначен для определения и управления действиями, которые должны быть выполнены в ответ на определенные события или условия в приложении. Он позволяет администратору настроить и контролировать поведение системы, создавая специфические действия, такие как переход на другой экран, и связывая их с определенными событиями или условиями. Эта функциональность делает систему более гибкой и адаптируемой к различным потребностям и сценариям использования.
Активные в данный момент Actions расположены ниже кнопки Actions (обозначение 12 на рис. 24). Каждый из них можно отредактировать или удалить. Для редактирования нажмите на кнопку Карандаш, расположенную рядом с нужным Action, а для удаления - на кнопку Корзина. Процесс редактирования Action аналогичен процессу создания нового, описание которого вы найдете далее в этой инструкции.
На любой элемент экрана можно повесить неограниченное количество наборов action-event.
Вы можете добавить что должно произойти при взаимодействии пользователя с этим блоком. Для этого:
Нажмите на кнопку Actions (обозначение 11 на рис. 24)
Откроется модальное окно в котором будут представлены следующие возможности:
Action (Действие) (обозначение 2 на рис. 23)
- Определение: Action указывает на действие, которое должно быть выполнено при срабатывании определенного Event (события).
- Пример: Если пользователь нажимает кнопку (Event), система может перенаправить его на другой экран (Action).
Event (Событие) (обозначение 4 на рис. 23)
- Определение: Event обозначает действие пользователя, которое вызывает определенное Action (действие) в системе.
- Пример: Нажатие пользователем на кнопку является Event, которое может вызвать переход на другой экран (Action).
Go to (Перейти к) (обозначение 5 на рис. 23)
- Определение: Опция "Go to" применяется только для Action, связанных с переходом на другой экран.
- Как Использовать: Выберите экран, на который хотите перейти. В выпадающем списке будут доступны все пресеты всех нод, в которые есть переходы из данной ноды, и все экраны текущей ноды (есть возможность настроить переходы внутри ноды, что добавляет гибкости в навигацию).
Order (Порядок) (обозначение 6 на рис. 23)
- Определение: Order обозначает порядок обработки Action в системе. Это позволяет контролировать последовательность действий и гарантирует их правильное выполнение.
- Как Использовать: Укажите порядок выполнения действий в соответствии с логикой вашей системы.
Conditions (Условия) (обозначение 7 на рис. 23)
- Условные переходы и цепочка условных переходов используется для последовательной проверки нескольких условий и выбора следующей ноды (узла) в зависимости от результата каждого условия.
Условные переходы описаны в разделе «Настройка условных переходов», цепочка условных переходов описана в разделе «Цепочка условных переходов».
- Условные переходы и цепочка условных переходов используется для последовательной проверки нескольких условий и выбора следующей ноды (узла) в зависимости от результата каждого условия.
Сбросить (обозначение 8 на рис. 23)
- Определение: Кнопка "Сбросить" позволяет отменить все текущие изменения и вернуть настройку Actions к предыдущему или исходному состоянию.
- Как Использовать: Если вы сделали изменения и хотите отменить их, просто нажмите эту кнопку, и все вернется к состоянию до внесения изменений.
Сохранить (обозначение 9 на рис. 23)
- Определение: Кнопка "Сохранить" применяется для сохранения всех внесенных изменений. Это обеспечивает, что все настройки и конфигурации остаются такими, как вы их установили.
- Как Использовать: После внесения всех необходимых изменений, просто нажмите эту кнопку, чтобы сохранить их. Все текущие настройки будут применены.
Actions + (обозначение 1 на рис. 23)
- Определение: Функция "Actions +" позволяет создать собственный Action (действие).
- Как Использовать: Нажмите кнопку "Actions +", чтобы открыть новое модальное окно. Затем введите необходимые параметры и настройки для создания вашего собственного Action. После завершения настройки, нажмите "Сохранить" в модальном окне.
- Важно: Добавление новых Actions требует согласования с командой мобильного банка, чтобы они могли внести необходимые изменения в клиентскую часть.
Event + (обозначение 3 на рис. 23)
- Определение: Функция "Event+" предоставляет возможность создать собственный кастомный Event (событие).
- Как Использовать: Нажмите кнопку "Event+", чтобы открыть новое модальное окно. Здесь вы можете ввести параметры и настройки для вашего кастомного Event. После завершения настройки, нажмите "Сохранить" в модальном окне.
- Важно: Добавление новых Events также требует согласования с командой мобильного банка, чтобы они могли реализовать соответствующие изменения в клиентской части.
Рис. 23. Редактирование выбранного блока ноды (узла)
API Возвращает список actions_process c фильтрами по id_node, id_node_to, id_node_from (в разработке)
# Метод: GET
# Endpoint:
/actionsProcess?processId=&elementId=&nodeFromId=&nodeToId=
# Описание
При работе с интерфейсом ноды важно иметь информацию о взаимодействиях между экранами. Этот запрос предоставляет данные о соединениях между экранами ноды с учетом выбранного пресета и фильтров.
При открытии ноды пользователю предоставляется интерфейс, в котором необходимо увидеть взаимодействия между экранами этой ноды. Этот запрос позволяет:
- Получить обзор входящих и выходящих соединений для каждого экрана.
- Узнать количество входящих связей для каждого пресета ноды.
- Отличить внутренние соединения, где оба узла (или один из них) принадлежат текущей ноде, от внешних, где один из узлов принадлежит другой ноде. При этом, соединения, ведущие в текущую ноду из других нод, не отображаются в интерфейсе.
- Фильтровать соединения по выбранному пресету на панели слева.
Таким образом, данный API позволяет получать точную и актуальную информацию о соединениях между экранами ноды, что существенно упрощает работу с нодой и позволяет эффективно управлять ее экранами и связями.
# Параметры запроса:
processId(number, required): Идентификатор процесса.elementId(number, optional): Идентификатор элемента.nodeFromId(number, optional): Идентификатор отправной ноды или экрана.nodeToId(number, optional): Идентификатор приемной ноды или экрана.
# Пример ответа:
{
"status": 1,
"message": "",
"response": {
"processId": 12,
"actions": [
{
"eventId": 1,
"actionId": 3,
"nodeFromId": 123,
"nodeToId": 124,
"elementId": 1555,
"order": 1,
"logId": 3,
"condition": {
"rules": [
{
"ruleId": 12,
"ruleName": "rule2",
"methodId": 0,
"resultApiField": "result.abc",
"fieldName": "{{field.1234}}",
"operator": "!=",
"answerId": null,
"answer": "first status",
"isRequired": true
},
{
"ruleId": 13,
"ruleName": "rule3",
"methodId": 0,
"resultApiField": "result.abc",
"fieldName": "{{field.1234}}",
"operator": "!=",
"answerId": 0,
"answer": "second status",
"isRequired": true
}
],
"expression": "rule.12 & rule.13"
}
},
{
"eventId": 3,
"actionId": 3,
"nodeFromId": 125,
"nodeToId": 124,
"elementId": null,
"order": 0,
"logId": null,
"condition": {
"rules": [
{
"ruleId": 14,
"ruleName": "rule45",
"methodId": 0,
"resultApiField": "result.abc",
"fieldName": "{{field.1234}}",
"operator": "!=",
"answerId": null,
"answer": "first status",
"isRequired": true
},
{
"ruleId": 15,
"ruleName": "rule98",
"methodId": 0,
"resultApiField": "result.abc",
"fieldName": "{{field.1234}}",
"operator": "!=",
"answerId": 0,
"answer": "second status",
"isRequired": true
},
{
"ruleId": 16,
"ruleName": "rule100",
"methodId": 0,
"resultApiField": "result.abc",
"fieldName": "{{field.1234}}",
"operator": "!=",
"answerId": 0,
"answer": "second status",
"isRequired": true
}
],
"expression": "rule.14 & rule.15 | rule.16 "
}
}
]
}
}
# Параметры ответа:
status(number): Статус выполнения операции. Значение 1 указывает на успешное выполнение.message(string): Сообщение о выполнении.response(object):processId(number): Идентификатор процесса.actions(array of objects): Массив действий.eventId(number): Идентификатор события.actionId(number): Идентификатор действия.nodeFromId(number): Идентификатор отправной ноды.nodeToId(number): Идентификатор приемной ноды.elementId(number, nullable): Идентификатор элемента.order(number): Порядок выполнения.logId(number, nullable): Идентификатор лога.condition(object): Условие выполнения действия.rules(array of objects): Массив правил.ruleId(number): Идентификатор правила.ruleName(string): Название правила.methodId(number): Идентификатор метода.resultApiField(string): Поле результата API.fieldName(string): Название поля.operator(string): Оператор сравнения.answerId(number, nullable): Идентификатор ответа.answer(string): Текстовый ответ.isRequired(boolean): Обязательность правила.
expression(string): Выражение, объединяющее правила.
API Методы `POST` и `PATCH` предназначены для создания и обновления данных `actions_process` (в разработке)
# Метод: Post/Patch
# Endpoint:
/actionsProcess
# Описание
Методы POST и PATCH предназначены для создания и обновления данных actions_process. Оба метода поддерживают прием списков правил (rules), что позволяет гибко управлять условиями обработки действий в рамках процесса.
Метод POST создает новую запись в actions_process. Метод PATCH обновляет существующую запись в actionsProcess.
Важно: Для выполнения запроса PATCH должна удовлетворять только одна строка.
Примечания:
- При работе с методом
PATCHнеобходимо убедиться, что запрос обновляет только одну запись. Если запрос может затронуть несколько записей, операция может завершиться неудачей или привести к непредвиденным результатам. - Список правил (
rules) работает в текущем формате и пока может оставаться без изменений.
# Пример запроса:
{
"processId": 12,
"eventId": 0,
"actionId": 0,
"nodeFromId": 0,
"nodeToId": 0,
"elementId": 0,
"order": 0,
"logId": 0,
"condition": {
"expression": "rule.12 & rule.13"
}
}
# Параметры запроса:
processId(number, required): Идентификатор процесса.eventId(number, required): Идентификатор события.actionId(number, required): Идентификатор действия.nodeFromId(number, required): Идентификатор отправной ноды.nodeToId(number, required): Идентификатор приемной ноды.elementId(number, optional): Идентификатор элемента.order(number, required): Порядок выполнения действия.logId(number, optional): Идентификатор лога.condition(object, required): Условие для выполнения действия.expression(string, required): Выражение на основе правил, определяющее условие выполнения действия.
# Пример ответа:
{
"status": 1,
"message": "",
"response": {}
}
# Параметры ответа:
status(number): Статус выполнения операции. Значение 1 указывает на успешное выполнение.message(string): Сообщение о выполнении.response(object): Дополнительные данные ответа.
API Метод DELETE для actions_process (в разработке)
# Метод: DELETE
# Endpoint:
/actionsProcess
# Описание
Метод DELETE предназначен для удаления записей из actions_process. В зависимости от предоставленных параметров запроса могут быть удалены одна или несколько записей.
# Пример запроса:
{
"processId": 0, //required
"eventId": 0, //optional
"actionId": 0, //optional
"nodeFromId": 0, //optional (screenId | nodeId)
"nodeToId": 0, //optional (screenId | nodeId)
"elementId": 0, //optional; id_node
"order": 0, //optional
"logId": 0, //optional
}
# Параметры запроса:
processId(number, required): Идентификатор процесса.eventId(number, optional): Идентификатор события.actionId(number, optional): Идентификатор действия.nodeFromId(number, optional): Идентификатор отправной ноды (может быть либо идентификатором экрана, либо идентификатором ноды).nodeToId(number, optional): Идентификатор приемной ноды (может быть либо идентификатором экрана, либо идентификатором ноды).elementId(number, optional): Идентификатор элемента (в контексте ноды).order(number, optional): Порядок выполнения действия.logId(number, optional): Идентификатор лога.
# Пример ответа:
{
"status": 1,
"message": "",
"response": {}
}
# Параметры ответа:
status(number): Статус выполнения операции. Значение 1 указывает на успешное выполнение.message(string): Сообщение о выполнении.response(object): Дополнительные данные ответа.
# Данные блока
Для разных блоков свои доступные данные для изменения. На примере блока на скриншоте:
- Блок форматирования текста в режиме WYSIWYG[5] (обозначение 1 на рис. 24): выделение жирным, курсив, подчеркивание, указать ссылку, выбор цвета.
- Текст для редактирования (обозначение 2 на рис. 24).
- Стиль текста (обозначение 3 на рис. 24).
- Настройки выравнивания текста (обозначение 4 на рис. 24).
- Внесенные изменения отобразятся в режиме реального времени на экране слева (обозначение 5 на рис. 24).
- Чтобы сохранить внесенные изменения, нажмите кнопку «Сохранить» (обозначение 10 на рис. 24).
Чтобы сбросить экран к стандартным значениям, нажмите кнопку «Сбросить» (обозначение 9 на рис. 24) и потдверите свой выбор.
Чтобы свернуть блок редактирования, нажмите кнопку ^ (обозначение 6 на рис. 24) или кликните по заголовку блока (обозначение 7 на рис. 24).
Рис. 24. Редактирование выбранного блока ноды (узла)
API Редактирование данных ноды (узла)
При попадании в режим редактирования редактирование данных ноды (узла) (4 пункт) происходит запрос и ответ как в изменение параметров ноды (узла).
При сохранении внесенных изменений выполняется PATCH запрос /api/v2/bpm/nodes/{node_id}.
{
"id": 533290,
"name": "tariffs.setLoan.screen.1",
"title": "main",
"nodeType": "screen",
"properties": {},
"nodeFields": [
{
"id": 533294,
"name": "tariffs.setLoan.screen.1.block.1",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-h2'>Charges_test</span>"
}
},
{
"id": 533297,
"name": "tariffs.setLoan.screen.1.block.2",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-small'><span class='color-text-minor-first'>Processing fee (on the approved credit limit)</span></span>"
}
},
{
"id": 533298,
"name": "tariffs.setLoan.screen.1.block.3",
"nodeType": "block",
"properties": {
"visibility": "true",
"align": "left",
"text": "<span class='font-text-body'></span>"
}
},
...
]
}
]
}
В случае успеха приходит (code 200) JSON:
{
"status":1,
"message":"Node 533290 is successfully updated",
"response":{}
}
# Условные переходы (в разработке)
На экране с условными переходами вы увидите следующие элементы и разделы (рис. 25):
Internal transitions: Эта секция показывает внутренние переходы, которые происходят в пределах текущей ноды, между её разными экранами.
From: Здесь указывается начальный экран, с которого осуществляется переход и элемент, которые инициирует переход. Он представлен в формате:
Название ноды (id) → Название пресета (id) → Название экрана (id) → Название элемента (id)
To: Показывает экран назначения, на который будет выполнен переход.
Название ноды (id) → Название пресета (id) → Название экрана (id)
Conditions: Здесь представлены условия, при которых будет произведен переход.
External transitions: Секция для внешних переходов, которые ведут на экраны другой ноды. Структура и наполнение данного раздела идентичны разделу внутренних переходов.
рис. 25. Экран со списком условных переходов
# Настройка условных переходов
Если нода (узел) соединена с другой нодой (узлом), то вы можете настроить условные переходы[6] для этой ноды (узла) (обозначение 1 на рис. 26).
Рис. 26. Условные переходы при редактировании ноды (узла)
Для добавления условного перехода выполните следующие шаги:
- Выберите ноду от которой будет происходить условный переход и перейдите в изменение папраметров ноды.
- Нажмите на выпадающий список «Выберите условие» (обозначение 1 на на Рис. 26).
- В выпадающем списке выберите нужное условие.
Для просмотра правила условного перехода нажмите на иконку «Очки» (обозначение 1 на рис. 27).
Для удаления условного перехода нажмите на икноку «Крест» (обозначение 2 на рис. 27) и подтвердите удаление во всплывающем окне.
Для создания цепочки условных переходов используются кнопки (обозначение 3 и 4 на рис. 27). См. раздел Цепочка условных переходов
Рис. 27. Выбран условный переход
API Настройка условных переходов
При изменении условных переходов выполняется PATCH запрос /api/v2/bpm/processes/{process_id}
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
{
"process_n8n": {
"nodes": {
"1691729916756:23986925897477664": {
"id": "1691729916756:23986925897477664",
"type": "tariffs",
"displayName": "Tariffs",
"selected": true,
"position": [
227.5,
195
],
"name": "tariffs",
"title": "Tariffs",
"nodeType": "node",
"description": "The tariffs of the credit product for the client",
"db_id": 533288,
"overwrittenNodeType": {
"outputs": [
"main",
"main1"
],
"outputNames": [
"",
""
]
}
},
"1691730742643:5689240453617508": {
"id": "1691730742643:5689240453617508",
"type": "requirements",
"displayName": "Requirements",
"selected": false,
"position": [
552.5,
162.5
],
"name": "requirements",
"title": "Requirements",
"nodeType": "node",
"description": "Displaying the minimum requirements for a client to approve a loan",
"db_id": 533315
}
},
"connections": {
"1691729916756:23986925897477664": {
"main": [
{
"endNodeId": "1691730742643:5689240453617508",
"connections": [
{
"conditions": {
"condition-1": {
"id": 239,
"name": "Rene Silvio",
"condition": "api",
"service": {
"id": 3,
"value": "CRM Chat"
},
"method": {
"id": 3,
"value": null
},
"answerPrefix": "=",
"answer_id": 3
}
},
"conditionExpression": [
{
"expressionPart": "expression-1",
"p1": "condition-1"
}
]
}
]
}
]
}
},
"options": {
"cellSize": 50,
"gridBinding": true,
"canvasTheme": "orange"
},
"enterNode": {},
"availableNodes": {}
}
}
В случае успеха приходит (code 200) JSON:
{
"status":1,
"message":"Schema is updated",
"response":{"name":null}
}
# Цепочка условных переходов
Цепочка условных переходов[7] используется для последовательной проверки нескольких условий и выбора следующей ноды (узла) в зависимости от результата каждого условия.
Чтобы создать цепочку условных переходов, следуйте инструкции «Настройка условных переходов» для добавления первого условного перехода. Чтобы добавить дополнительное условие, выполните следующие шаги:
Рис. 28. Цепочка условных переходов
Вы можете изменять операторы «AND» и «OR» между условными переходами. Для этого просто нажмите на кнопку, которая расположена между условиями (обозначение 1 на рис. 29) , и выберите другой оператор связи для условий.
Рис. 29. Изменение оператора условных переходов
API Цепочка условных переходов
При изменении условных переходов выполняется PATCH запрос /api/v2/bpm/processes/{process_id}
В разработке: Из JSON процесса пропадет внутренний раздел connections, который ранее хранил условия переходов
{
"process_n8n": {
"nodes": {
"1691729916756:23986925897477664": {
"id": "1691729916756:23986925897477664",
"type": "tariffs",
"displayName": "Tariffs",
"selected": false,
"position": [
715,
195
],
"name": "tariffs",
"title": "Tariffs",
"nodeType": "node",
"description": "The tariffs of the credit product for the client",
"db_id": 533288,
"overwrittenNodeType": {
"outputs": [
"main1"
],
"outputNames": [
""
]
}
},
"1691730742643:5689240453617508": {
"id": "1691730742643:5689240453617508",
"type": "requirements",
"displayName": "Requirements",
"selected": true,
"position": [
357.5,
195
],
"name": "requirements",
"title": "Requirements",
"nodeType": "node",
"description": "Displaying the minimum requirements for a client to approve a loan",
"db_id": 533315,
"overwrittenNodeType": {
"outputs": [
"main",
"main1"
],
"outputNames": [
"",
""
]
}
}
},
"connections": {
"1691730742643:5689240453617508": {
"main": [
{
"endNodeId": "1691729916756:23986925897477664",
"connections": [
{
"presetId": 533289,
"conditions": {
"condition-1": {
"id": 243,
"name": "Ada Warren",
"condition": "api",
"service": {
"id": 3,
"value": "CRM Chat"
},
"method": {
"id": 3,
"value": null
},
"answerPrefix": "<",
"answer_id": 3,
"status": "done"
},
"condition-2": {
"id": 257,
"name": "Alexandra Miceli",
"condition": "api",
"service": {
"id": 3,
"value": "CRM Chat"
},
"method": {
"id": 3,
"value": null
},
"answerPrefix": "=",
"answer_id": 4
}
},
"conditionExpression": [
{
"expressionPart": "expression-1",
"p1": "condition-1",
"operation": "and",
"p2": "condition-2"
},
{
"expressionPart": "expression-2",
"p1": "condition-2"
}
]
}
]
}
]
}
},
"options": {
"cellSize": 50,
"gridBinding": true,
"canvasTheme": "orange"
},
"enterNode": {},
"availableNodes": {}
}
}
В случае успеха приходит (code 200) JSON:
{
"status":1,
"message":"Schema is updated",
"response":{"name":null}
}
# Панель инструментов
Панель инструментов расположена в левом нижнемм углу (обозначение 8 из рис. 4).
Рис. 30. Панель инструментов рабочей области
| Обозначение | Описание | Горячая главиша |
|---|---|---|
| 1 | Текущий масштаб рабочей области. | |
| 2 | Текущее положение рабочей области по горизонтали. | |
| 3 | Текущее положение рабочей области по вертикали. | |
| 4 | Количество узлов на рабочей области. | |
| 5 | Увеличить масштаб рабочей области. | + |
| 6 | Уменьшить масштаб рабочей области. | - |
| 7 | Включить/отключить привязки к сетке рабочей области. | B |
| 8 | Переместить фокус рабочей области к ноды (узла)м. | F |
| 9 | Открыть справку панели инструментов. | I |
| 10 | Отменить последнее действие. | CTRL + Z |
| 11 | Копировать выделенное. | CTRL + C |
| 12 | Вырезать выделенное. | CTRL + X |
| 13 | Вставить скопированное/вырезанное. | CTRL + V |
# Перемещение по рабочей области
- При помощи клавиатуры:
- Используйте стрелочные клавиши для перемещения по рабочей области. Нажмите соответствующую стрелку, чтобы сместить рабочую область в указанном направлении.
- При помощи колесика мышки:
- Для перемещения по рабочей области с помощью колесика мыши прокрутите его в любом направлении. Чтобы переместиться вдоль другой оси, удерживайте клавишу Shift во время вращения колесика.
- При помощи зажатия колесика мышки:
- Удерживайте нажатым колесико мыши и перемещайте мышь в любом направлении для перемещения по рабочей области.
# 5. Глосcарий
Server-driven UI - это подход к разработке мобильных приложений, в котором основная логика и пользовательский интерфейс управляются с сервера. ↩︎
«n8n» (кратко от "nodemation") - это инструмент автоматизации бизнес-процессов с открытым исходным кодом, который предоставляет визуальную среду для создания, запуска и управления рабочими процессами. Он позволяет пользователю создавать рабочие процессы с помощью визуального редактора, где блоки действий (узлы) связываются между собой, чтобы создать автоматизированные процессы. ↩︎ ↩︎ ↩︎
Drag-and-drop - это интерактивный способ перемещения объектов на компьютерном экране. Он позволяет пользователю выбирать объект и перетаскивать его курсором мыши в другое место на экране или взаимодействовать с другими элементами интерфейса. ↩︎
Пресеты - представляют собой заранее настроенные параметры, которые можно выбрать для быстрого применения к узлу. ↩︎
WYSIWYG - это технология или редактор, который позволяет вам видеть результат своей работы таким, каким он будет выглядеть в конечном виде. ↩︎
Условный переход - позволяет настроить выбор следующей связанной ноды (узла) в зависимости от заданных условий. ↩︎
Цепочка условных переходов - это последовательность проверок условий, где каждая проверка зависит от результата предыдущей. Когда программа сталкивается с цепочкой условных переходов, она проверяет каждое условие по порядку и выполняет определенные действия в зависимости от результата каждой проверки. ↩︎
«AND - оператор «И». Осуществляет переход на следующую ноду (узел), когда оба условия, которые объединены оператором "and", являются истинными. Если хотя бы одно из условий является ложным, то переход на следующую ноду (узел) не происходит. ↩︎
«OR - оператор «ИЛИ». Осуществляет переход на следующую ноду (узел), если хотя бы одно из условий, которые объединены "OR", является истинным. Только если все условия ложные, то переход на следующую ноду (узел) не происходит. ↩︎