Общие принципы кастомизации страницы Freedom UI

Основы

Бизнес-логика настраивается в секциях validators, converters, handlers клиентских схем страниц Freedom UI. Для настройки бизнес-логики рекомендуется использовать no-code инструменты, которые описаны в статье Freedom UI дизайнер. Если кастомизацию невозможно выполнить с помощью no-code инструментов, рекомендуется выполнять настройку бизнес-логики в исходном коде схемы страницы Freedom UI. Создание страницы Freedom UI описано в статье Клиентский модуль.

Примеры бизнес-логики, которую можно реализовать с помощью страницы Freedom UI:

Видимость элементов.
Блокировка элементов.
Обязательность элементов.
Фильтрация элементов.
Заполнение полей.
Обращение к данным Creatio.
Отправка http-запросов.
Переход по страницам.

Описание страницы содержится в статье Страница Freedom UI.

Алгоритм кастомизации страницы Freedom UI

Настройте страницу приложения.
1. Создайте пользовательское приложение. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
2. Добавьте элемент или элементы, для которых планируется настроить бизнес-логику. Для этого воспользуйтесь инструкцией, которая приведена в статье Настроить интерфейс приложения.
Настройте бизнес-логику элемента страницы.

Бизнес-логика настраивается в клиентской схеме страницы Freedom UI. Чтобы открыть схему клиентского модуля, на панели действий Freedom UI дизайнера соответствующей страницы нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI. Для настройки используйте соответствующие секции клиентской схемы страницы Freedom UI. Подробнее о секциях читайте в статье Клиентская схема.

Большая часть кастомизации выполняется с помощью использования обработчиков запросов. Обработчики запросов — элементы механизма HandlerChain, который позволяет описывать бизнес-логику в формате запроса на действие и цепочки обработчиков запроса. Использование секции handlers позволяет взаимодействовать с источниками данных. Примеры запросов: готовность страницы, загрузка и сохранение данных, запуск бизнес-процесса.

Creatio 8 Atlas предоставляет возможность выстраивать обработчики запросов в цепочки выполнения, например, чтобы по запросу сохранения записи сначала отработал базовый обработчик сохранения, а потом выполнялась пользовательская логика страницы.

Закрыть WebSocket при уничтожении View модели

Чтобы закрыть WebSocket при уничтожении View модели, в секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelDestroyRequest. Обработчик выполняется при уничтожении View модели (например, при переходе на другую страницу). Предназначен для уничтожения ресурсов. В обработчике не рекомендуется писать асинхронный код (обращение к серверу, таймауты и т. д.), кроме вычитки значения атрибутов.

Пример обработчика запроса crt.HandleViewModelDestroyRequest, который закрывает пользовательский WebSocket SomeWebSocket, представлен ниже.

Секция handlers

Смотрите также

Freedom UI дизайнер

Клиентский модуль

Страница Freedom UI

Создать пользовательское приложение

Настроить интерфейс приложения

Клиентская схема

Изменить место вызова обработчика запроса на странице

Средний

Пример. На странице записи пользовательского раздела Requests отобразить номер последней созданной записи раздела. В качестве значения номера используется значение пользовательской системной настройки. Значение номера увеличивается на 1 после сохранения страницы заявки.

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

Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
Добавьте системную настройку, которая хранит номер заявки.
1. Перейдите в дизайнер системы по кнопке . В блоке Настройка системы (System setup) перейдите по ссылке Системные настройки (System settings).
2. На панели инструментов раздела нажмите на Добавить настройку (Add setting).
3. Заполните свойства системной настройки:
  - Название (Name) — "Номер заявки" ("Request number").
  - Код (Code) — "UsrRequestLastNumber".
  - Тип (Type) — выберите "Целое число" ("Integer").
  - Значение по умолчанию (Default value) — "1".
В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).
В рабочую область Freedom UI дизайнера добавьте компонент типа 2 колонки (2 columns).
Добавьте надпись номера заявки.
1. В первую колонку компонента типа 2 колонки (2 columns) Freedom UI дизайнера добавьте компонент типа Надпись (Label).
2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:
  - Заголовок (Title) — "Номер заявки" ("Request number").
  - Стиль (Style) — выберите "Описание" ("Caption").
  - Цвет текста (Text color) — выберите серый цвет.
Добавьте надпись, которая содержит значение системной настройки номера заявки.
1. Во вторую колонку компонента типа 2 колонки (2 columns) Freedom UI дизайнера добавьте компонент типа Надпись (Label).
2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:
  - Заголовок (Title) — "Номер заявки (значение)" ("Request number (value)").
  - Стиль (Style) — выберите "Обычный текст" ("Body text").
На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Изменить место вызова обработчика запроса

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

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

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

Секция viewModelConfig

viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* Атрибут, который хранит значение системной настройки UsrRequestLastNumber. */
        "UsrRequestLastNumber": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

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

Секция viewConfigDiff

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "RequestNumberValue",
        "values": {
            ...,
            /* Свойство, которое отвечает за текст, который содержит элемент. Привязано к значению атрибута UsrRequestLastNumber. */
            "caption": "$UsrRequestLastNumber",
            ...
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.SaveRecordRequest. Обработчик выполняется при нажатии на кнопку Сохранить (Save) на панели инструментов страницы заявки.

Реализуйте ожидание выполнения следующего обработчика. В нашем примере это обработчик, который выполняет сохранение записи.
После сохранения записи создайте экземпляр сервиса системных значений из @creatio-devkit/common.
Получите значение системной настройки UsrRequestLastNumber.
Отправьте запрос на обновление значения системной настройки UsrRequestLastNumber (увеличьте ее на 1).
Обновите значение атрибута UsrRequestLastNumber.
Верните результат сохранения.

Секция handlers

handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.SaveRecordRequest",
        /* Реализация обработчика пользовательского запроса. */
        handler: async (request, next) => {
            /* Ждет выполнения следующего обработчика (в данном случае, обработчика, который выполняет сохранение записи). */
            const saveResult = await next.handle(request);
            /* После сохранения записи создает экземпляр сервиса системных значений из @creatio-devkit/common. */
            const sysSettingsService = new sdk.SysSettingsService();
            /* Получает значение системной настройки UsrRequestLastNumber. */
            const requestLastNumber = await sysSettingsService.getByCode('UsrRequestLastNumber');
            /* Отправляет запрос на обновление значения системной настройки UsrRequestLastNumber. */
            await sysSettingsService.update({
                code: 'UsrRequestLastNumber',
                /* Новое значение на 1 больше предыдущего. */
                value: ++requestLastNumber.value
            });
            /* Обновляет значение атрибута UsrRequestLastNumber. */
            request.$context.UsrRequestLastNumber = requestLastNumber.value;
            /* Возвращает результат сохранения. */
            return saveResult;
        }
    }
] /**SCHEMA_HANDLERS*/,

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

UsrAppRequests_FormPage

/* Объявление AMD-модуля. */
define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "GridContainer_zaj7g34",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.GridContainer",
                    "columns": [
                        "minmax(32px, 1fr)",
                        "minmax(32px, 1fr)"
                    ],
                    "rows": "minmax(max-content, 32px)",
                    "gap": {
                        "columnGap": "large"
                    },
                    "items": []
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            },
            {
                "operation": "insert",
                "name": "RequestNumber",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(RequestNumber_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "RequestNumberValue",
                "values": {
                    "layoutConfig": {
                        "column": 2,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* Свойство, которое отвечает за текст, который содержит элемент. Привязано к значению атрибута UsrRequestLastNumber. */
                    "caption": "$UsrRequestLastNumber",
                    "labelType": "body-1",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfig": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                /* Атрибут, который хранит значение системной настройки UsrRequestLastNumber. */
                "UsrRequestLastNumber": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.SaveRecordRequest",
                /* Реализация обработчика пользовательского запроса. */
                handler: async (request, next) => {
                    /* Ждет выполнения следующего обработчика (в данном случае, обработчика, который выполняет сохранение записи). */
                    const saveResult = await next.handle(request);
                    /* После сохранения записи создает экземпляр сервиса системных значений из @creatio-devkit/common. */
                    const sysSettingsService = new sdk.SysSettingsService();
                    /* Получает значение системной настройки UsrRequestLastNumber. */
                    const requestLastNumber = await sysSettingsService.getByCode('UsrRequestLastNumber');
                    /* Отправляет запрос на обновление значения системной настройки UsrRequestLastNumber. */
                    await sysSettingsService.update({
                        code: 'UsrRequestLastNumber',
                        /* Новое значение на 1 больше предыдущего. */
                        value: ++requestLastNumber.value
                    });
                    /* Обновляет значение атрибута UsrRequestLastNumber. */
                    request.$context.UsrRequestLastNumber = requestLastNumber.value;
                    /* Возвращает результат сохранения. */
                    return saveResult;
                }
            }
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

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

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

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

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

В результате выполнения примера при нажатии на кнопку Сохранить (Save) панели инструментов страницы заявки отображается номер последней созданной записи в разделе Requests, который увеличен на 1. В качестве значения используется значение системной настройки Номер заявки (Request number, код UsrRequestLastNumber).

Ресурсы

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