Отправить запрос к веб-сервису и обработать результат его выполнения

Основы

Для отправки запроса к веб-сервисам в Creatio 8 Atlas используется сервис sdk.HttpClientService.

Чтобы отправить запрос к веб-сервису и обработать на странице результат его выполнения:

На шаге 1 алгоритма кастомизации страницы Freedom UI при необходимости добавьте на страницу надпись, в которой планируется отобразить результат обработки запроса к веб-сервису.
На шаге 2 алгоритма кастомизации страницы Freedom UI настройте отправку запроса к веб-сервису и обработку на странице результата его выполнения.
1. Подключите сервис отправки HTTP-запросов sdk.HttpClientService. Подключение сервиса аналогично описанному в алгоритме отображения значения системных переменных.
2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
3. В секции viewConfigDiff привяжите свойство caption к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля. Вместо свойства visible используйте свойство caption, которое отвечает за текст отображаемый в элементе.
4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.
  1. Создайте экземпляр http-клиента из @creatio-devkit/common.
  2. Укажите URL для получение необходимой информации. Если запрос отправляется к веб-сервису не по абсолютному пути (без префиксов https:// или http://), то это запрос к внутреннему веб-сервису Creatio. В этом случае в ссылку автоматически добавляется адрес текущего приложения Creatio.
  3. Отправьте GET-запрос.
  4. Получите из тела ответа необходимые значения и запишите их в соответствующие атрибуты.
  Пример обработчика запроса crt.HandlerViewModelInitRequest, который отправляет запрос к веб-сервису https://SomeUrlValue, из тела ответа получает параметр someValue и записывает его в атрибут SomeAttributeName, представлен ниже.
  Секция handlers
  Секция handlers
  
  handlers: /**SCHEMA_HANDLERS*/[ { request: "crt.HandlerViewModelInitRequest", /* Пользовательская реализация обработчика системного запроса. */ handler: async (request, next) => { /* Создает экземпляр http-клиента из @creatio-devkit/common. */ const httpClientService = new sdk.HttpClientService(); /* Указывает URL для получение необходимой информации. */ const endpoint = "https://SomeUrlValue"; /* Отправляет GET-запрос. HTTP-клиент автоматически преобразовывает тело ответа из формата JSON в JS-объект. */ const response = await httpClientService.get(endpoint); /* Получает из тела ответа параметр someValue и записывает его в атрибут SomeAttributeName. */ request.$context.SomeAttributeName = response.body.someValue; /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */ return next?.handle(request); } } ]/**SCHEMA_HANDLERS*/,

Подробный пример настройки отправки запроса к веб-сервису и обработки результат его выполнения приведен в статье Отправить запрос к внешнему веб-сервису и обработать на странице результат его выполнения.

Кастомизировать поля страницы Freedom UI

Отобразить значение системной переменной

Отправить запрос к внешнему веб-сервису и обработать на странице результат его выполнения

Средний

Пример. На странице записи пользовательского раздела Http Client Service вызвать внешний веб-сервис coindesk.com. Отобразить текущий курс BTC к USD.

1. Настроить интерфейс страницы

Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Http Client Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
В рабочей области страницы приложения Http Client Service откройте страницу Страница записи Http Client Service (Http Client Service form page).
Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Http Client Service (Http Client Service form page).
Добавьте надпись курса BTC к USD.
1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:
  - Заголовок (Title) — "Курс BTC к USD" ("BTC to USD exchange rate").
  - Стиль (Style) — выберите "Описание" ("Caption").
  - Цвет текста (Text color) — выберите серый цвет.
Добавьте надпись, которая содержит значение курса BTC к USD.
1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:
  - Заголовок (Title) — "Курс BTC к USD (значение)" ("BTC to USD exchange rate (value)").
  - Стиль (Style) — выберите "Обычный текст" ("Body text").
На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить отправку запроса к веб-сервису и обработать результат его выполнения

Бизнес-логика настраивается в дизайнере клиентского модуля. В этом примере настроим отправку запроса к внешнему веб-сервису и обработаем результат его выполнения.

Подключите сервис отправки HTTP-запросов sdk.HttpClientService. Для этого добавьте в AMD-модуль зависимость @creatio-devkit/common.
Зависимости AMD-модуля
```
/* Объявление AMD-модуля. */
define("UsrAppHttpClientServ_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        ...
    };
});
```

В секцию viewModelConfig добавьте атрибут BtcToUsd, который хранит информацию о курсе биткоина к доллару.

Секция viewModelConfig

viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* Атрибут, который хранит курс биткоина к доллару. */
        "BtcToUsd": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

В секции viewConfigDiff привяжите свойство caption элемента BtcToUsdExchangeRateValue к атрибуту $BtcToUsd модели. Свойство caption отвечает за текст, который содержит элемент.

Секция viewConfigDiff

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "BtcToUsdExchangeRateValue",
        "values": {
            ...,
            /* Привязка атрибута BtcToUsd к свойству caption. */
            "caption": "$BtcToUsd",
            ...
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

Создайте экземпляр http-клиента из @creatio-devkit/common.
Укажите URL для получение текущего курса. Используйте внешний веб-сервис coindesk.com.
Отправьте GET-запрос.
Получите из тела ответа курс и запишите его в атрибут BtcToUsd.

Секция handlers

handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandlerViewModelInitRequest",
        /* Пользовательская реализация обработчика системного запроса. */
        handler: async (request, next) => {
            /* Создает экземпляр http-клиента из @creatio-devkit/common. */
            const httpClientService = new sdk.HttpClientService();
            /* Указывает URL для получение текущего курса. Используется внешний сервис coindesk.com. */
            const endpoint = "https://api.coindesk.com/v1/bpi/currentprice/USD.json";
            /* Отправляет GET-запрос. HTTP-клиент автоматически преобразовывает тело ответа из формата JSON в JS-объект. */
            const response = await httpClientService.get(endpoint);
            /* Получает из тела ответа курс и записывает его в атрибут BtcToUsd. */
            request.$context.BtcToUsd = response.body.bpi.USD.rate;
            /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
            return next?.handle(request);
        },
    },
] /**SCHEMA_HANDLERS*/,

Полный исходный код схемы страницы

UsrAppHttpClientServ_FormPage

/* Объявление AMD-модуля. */
define("UsrAppHttpClientServ_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "BtcToUsdExchangeRate",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(BtcToUsdExchangeRate_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "BtcToUsdExchangeRateValue",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* Привязка атрибута BtcToUsd к свойству caption. */
                    "caption": "$BtcToUsd",
                    "labelType": "body-1",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                /* Атрибут, который хранит курс биткоина к доллару. */
                "BtcToUsd": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppHttpClientServ"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandlerViewModelInitRequest",
                /* Пользовательская реализация обработчика системного запроса. */
                handler: async (request, next) => {
                    /* Создает экземпляр http-клиента из @creatio-devkit/common. */
                    const httpClientService = new sdk.HttpClientService();
                    /* Указывает URL для получение текущего курса. Используется внешний сервис coindesk.com. */
                    const endpoint = "https://api.coindesk.com/v1/bpi/currentprice/USD.json";
                    /* Отправляет GET-запрос. HTTP-клиент автоматически преобразовывает тело ответа из формата JSON в JS-объект. */
                    const response = await httpClientService.get(endpoint);
                    /* Получает из тела ответа курс и записывает его в атрибут BtcToUsd. */
                    request.$context.BtcToUsd = response.body.bpi.USD.rate;
                    /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                    return next?.handle(request);
                },
            },
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

Результат выполнения примера

Чтобы посмотреть результат выполнения примера:

Перейдите на страницу приложения Http Client Service и нажмите Запустить приложение (Run app).
На панели инструментов приложения Http Client Service нажмите Добавить (New).

В результате выполнения примера на странице записи пользовательского раздела Http Client Service отображается текущий курс BTC к USD. Значение получено из внешнего веб-сервиса coindesk.com.

Ресурсы

Пакет с реализацией примера