...
| Info |
|---|
This article is in English HBW widget integration manual |
Общая схема
- При открытии страницы приложения с виджетом, приложение-хост, используя public_url из конфига, запросит фронт виджета. Для аутентификации используются логин и токен из конфига
- Когда загрузится фронт виджета, он будет посылать запросы с url вида '/widget/...' в ЛК, запросы такого вида принимаются прокси-контроллером (hbw_controller.rb) и перенаправляются в бекэнд виджета.
Конфигурируемые параметры
...
| Code Block | ||
|---|---|---|
| ||
def request_widget_backend(path, method = :get, parameters = {})
request_params = {
method: method,
url: build_bpm_widget_path(path),
user: bpm_config.hbw_login,
password: bpm_config.passwordhbw_token
}
if method == :get
request_params.merge!({headers: {params: parameters.merge(bpm_parameters)}})
else
request_params.merge!({payload: parameters.merge(bpm_parameters)})
end
RestClient::Request.execute(request_params)
end
private
def bpm_parameters
{
user_identifier: user_identifierbpm_config[:hbw_login],
entity_type: params[:entity_type],
entity_code: params[:entity_code],
entity_class: params[:entity_class]
}
end
def build_bpm_widget_path(path = '')
URI.join(bpm_config.url, '/widget/', path).to_s
end
def bpm_config
YourApplication::Config.widgets.bpm
end |
...
| Code Block | ||
|---|---|---|
| ||
# ANY match 'widget/*path'
def proxy
method = request.method.downcase.to_sym
result = request_bpm_backend(params[:path], method, permitted_params)
if method == :put
if result
head :no_content
else
head :bad_request
end
else
render json: result
end
end
private
def permitted_params
params.symbolize_keys.except(*service_params)
end
def service_params
%i[controller action path format]
end |
Встраивание JS
Ниже приведен пример встраивания виджета в веб-страницу. После загрузки JS и CSS из HydraOMS выполняется инициализация виджета данными приложения и сущности, после чего вызывается функция render().
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html>
<head>
<title>HydraOMS Widget</title>
<script type="text/javascript" src="${hbw_public_url}/assets/hbw.js"></script>
<link rel="stylesheet" type="text/css" href="${hbw_public_url}/assets/hbw.css">
</head>
<body>
<div class="hbw-styles">
<div id='hbw-container'>
</div>
</div>
<script type="text/javascript">
var config = {
widgetURL: 'https://homs.some.domain', // hbw_public_url, необходим для установки WebSocket соединения
entity_class: 'crm_account',
entity_type: 'customer',
container_id: 'hbw-container', // Совпадает с идентификатором <div> контейнера
userIdentifier: 'user@example.com', // e-mail пользователя, которой использует виджет
locale: {
code: 'en', // locale code
dateTimeFormat: 'DD/MM/YYYY HH:mm' // формат, используемый date-fns, документация https://date-fns.org/v1.30.1/docs/format
}
};
var entityId = ...; // Здесь должен быть указан уникальный идентификатор сущности, например customerId
window.hbw_widget = new (modulejs.require('HBW'))({ // new (window.HBW)({ с версии 2.9+
userIdentifier: config.userIdentifier,
widgetContainer: `#${config.container_id}`,
widgetURL: config.widgetURL,
widgetPath: '/widget',
entity_class: config.entity_class,
entity_type: config.entity_type,
entity_code: `${entityId}`,
locale: config.locale,
payload: {
variables: {
someInitialVariable: { // Также возможно установить дополнительные параметры, которые будут переданы при старте процесса
value: 'initialValue',
type: 'string'
}
}
}
});
window.hbw_widget.render();
// Если виджет встраивается в SPA (Single Page Appllication), необходимо вызвать следующую функцию перед закрытием текущей страницы.
// window.hbw_widget.unmountWidget();
</script>
</body>
</html>
|
...