Кастомизация страницы

PDF
Основы

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

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

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

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

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

  1. Настройте страницу приложения.

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

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

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

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

Подробные примеры использования обработчиков запросов приведены в пункте Примеры блока по странице.

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

Действия по кастомизации полей страницы, которые позволяет выполнять Creatio 8 Atlas:

  • Настроить условие отображения поля.
  • Настроить условие блокировки поля.
  • Настроить условие заполнения поля.
  • Настроить условие обязательности поля.
  • Реализовать валидацию значения поля.
  • Реализовать конвертацию значения поля.

Настроить условие отображения поля 

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

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

      Пример добавления атрибута SomeAttributeName в схему клиентского модуля страницы Freedom UI.

      Секция viewModelConfig
    2. В секции viewConfigDiff привяжите свойство visible к соответствующему атрибуту модели. От изменения значения этого атрибута зависит отображение или скрытие поля на странице. Бизнес-логика изменения значения атрибута описывается в секции handlers. Свойство visible определяет видимость поля.

      Пример привязки свойства visible к атрибуту $SomeAttributeName представлен ниже.

      Секция viewConfigDiff
    3. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). В зависимости от значения атрибута (true или false), обработчик выполняет разную бизнес-логику.

      Пример обработчика запроса crt.HandleViewModelAttributeChangeRequest, логика выполнения которого зависит от значения атрибута SomeAttributeName, представлен ниже.

      Секция handlers

Подробный пример настройки условия отображения поля приведен в статье Настроить условие отображения поля на странице.

Настроить условие блокировки поля 

Ниже описана настройка условия блокировки поля на странице на front-end стороне приложения. Чтобы настроить условие блокировки поля на странице на back-end стороне приложение, воспользуйтесь инструкцией, которая описана в блоке статей Управление доступом.

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

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

    1. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    2. В секции viewConfigDiff привяжите свойство readonly к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля. Вместо свойства visible используйте свойство readonly, которое определяет блокировку поля для редактирования.
    3. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Реализация обработчика аналогична описанной в алгоритме настройки условия отображения поля.

Подробный пример настройки условия блокировки поля приведен в статье Настроить условие блокировки поля на странице.

Настроить условие заполнения поля 

  1. На шаге 1 алгоритма кастомизации страницы при необходимости добавьте на страницу поле, для которого планируется настроить условие заполнения.
  2. На шаге 2 алгоритма кастомизации страницы настройте условие заполнения поля на странице. Для этого в секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Реализация обработчика аналогична описанной в алгоритме настройки условия отображения поля.

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

Настроить условие обязательности поля 

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

    1. В секции viewModelConfig привяжите валидатор с типом crt.Required к атрибуту модели. Валидатор проверяет заполнение значения атрибута.

      Пример привязки валидатора с типом crt.Required к атрибуту модели приведен ниже.

      Секция viewModelConfig
    2. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). В зависимости от значения атрибута (true или false), обработчик выполняет разную бизнес-логику.

      Пример обработчика запроса crt.HandleViewModelAttributeChangeRequest, логика выполнения которого зависит от значения атрибута SomeAttributeName, представлен ниже.

      Секция handlers

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

Реализовать валидацию значения поля 

Валидаторы — функции проверки корректности значения атрибута ViewModel. Например, проверка значения поля записи на соответствие установленным условиям. Для реализации валидаторов необходимо использовать секцию validators схемы страницы Freedom UI. Создание страницы Freedom UI описано в статье Клиентский модуль.

Валидаторы применяются к атрибутам ViewModel, а не к визуальным элементам. Примеры валидаторов: MaxLengthValidator, MinLengthValidator, RequiredValidator.

Чтобы реализовать валидацию значения поля на странице:

  1. На шаге 1 алгоритма кастомизации страницы при необходимости добавьте на страницу поле, валидацию значения которого планируется выполнять.
  2. На шаге 2 алгоритма кастомизации страницы реализуйте валидацию значения поля на странице.

    1. В секции validators реализуйте пользовательский валидатор.

      Секция validators позволяет задекларировать:

      • Валидатор.
      • Функцию валидатора (function (config)).
      • Параметры валидатора ("params").
      • Асинхронность валидатора (значение флага async).

      Пример декларации пользовательского валидатора usr.SomeValidatorName приведен ниже.

      Секция validators

      message — свойство, которое позволяет задать пользовательское сообщение об ошибке.

    2. В секции viewModelConfig привяжите валидатор к атрибуту или нескольким атрибутам модели, задав разные параметры для каждого из атрибутов. Для этого в соответствующем атрибуте секции viewModelConfig укажите ключ validators, в котором задайте название валидатора и его параметры.

      Пример привязки валидатора usr.SomeValidatorName к атрибутам SomeAttributeName1 и SomeAttributeName2 модели приведен ниже.

      Секция viewModelConfig

      Приоритет параметра message конфигурационного объекта атрибута выше, чем приоритет соответствующего параметра валидатора. Т. е. для атрибутов, у которых задан параметр message, сообщение об ошибке генерируется из параметра, а не из тела валидатора.

      В случае получения ошибки, для атрибута SomeAttributeName1 выводится значение локализируемой строки SomeAttributeName1String, которая указана в атрибуте, а для атрибута SomeAttributeName2 — значение Some message., которое указано в теле валидатора.

Чтобы отключить валидатор, для свойства disabled соответствующего валидатора установите значение true (disabled: true).

Подробный пример использования валидатора приведен в статье Реализовать валидацию значения поля на странице.

Реализовать конвертацию значения поля 

Конвертеры — функции преобразования значения атрибута ViewModel, который привязан к свойству визуального компонента, в другое значение. Конвертеры, которые предоставляет Creatio 8 Atlas, являются аналогом Angular pipes. Подробнее читайте в официальной документации Angular. Для реализации конвертеров необходимо использовать секцию converters схемы страницы Freedom UI. Создание страницы Freedom UI описано в статье Клиентский модуль. Примеры конвертеров: crt.InvertBooleanValue, crt.ToBoolean.

Особенности использования конвертеров:

  • Применяются только в режиме RunTime.
  • Не применяются к константам.

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

  1. На шаге 1 алгоритма кастомизации страницы при необходимости добавьте на страницу поле, конвертацию значения которого планируется выполнять.
  2. На шаге 2 алгоритма кастомизации страницы реализуйте конвертацию значения поля на странице.

    1. В секции converters реализуйте пользовательский конвертер.

      Пример декларации конвертера usr.SomeConverterName приведен ниже.

      Секция converters
    2. В секции viewConfigDiff после имени атрибута, к которому планируется применить конвертер, поставьте вертикальную черту и укажите тип конвертера.

      Пример применения конвертера usr.SomeConverterName к атрибуту $SomeAttributeName приведен ниже.

      Секция viewConfigDiff

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

      Пример применения цепочки конвертеров (crt.ToBoolean и crt.InvertBooleanValue) к атрибуту $SomeAttributeName приведен ниже.

      Секция viewConfigDiff

      Creatio позволяет задать параметры для конвертера. Использовать один и тот же конвертер можно несколько раз, задавая разные значения параметров. Чтобы задать параметры конвертера, после типа конвертера укажите значение параметра с префиксом :. Символ двоеточия указывается перед каждым значением параметра конвертера.

      Возможные значения параметров конвертера:

      • Строка. Значение строки указывается в одинарных кавычках.
      • Число.
      • true или false.
      • Привязка к другому атрибуту.

      Пример применения конвертера exmpl.Concat с параметром SomeParameter типа строка к атрибуту SomeAttributeName приведен ниже. Обратите внимание, что конвертер exmpl.Concat приведен в качестве примера и недоступен к использованию при решении пользовательских бизнес-задач.

      Секция viewConfigDiff

Конверторы недоступны к использованию при привязке к ресурсному атрибуту.

Начиная с версии 8.0.2, Creatio предоставляет возможность использования конвертеров при привязке параметров запроса на страницах Freedom UI. Это позволяет, например, передавать в запрос преобразованные значения атрибутов без выполнения промежуточных шагов.

Пример привязки видимости к противоположному значению атрибута представлен ниже.

Пример использования конвертера при привязке параметров запроса
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        ...,
        "values": {
            ...,
            {
                "request": "usr.SetVisibility",
                "params": {
                    "visible": "$IsHidden | crt.InvertBooleanValue"
                }
            },
            ...
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Подробный пример использования конвертера приведен в статье Реализовать конвертацию значения поля на странице.

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

Для работы с системными переменными в Creatio 8 Atlas используется сервис sdk.SysValuesService.

В Creatio 8 Atlas изменилось обращение к системным переменным. Теперь имя системной переменной записывается в нижнем регистре без использования разделителей _ и префикса CURRENT (например, maintainer, primaryLanguage и т. д.).

Чтобы отобразить значение системной переменной на странице:

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

    1. Подключите сервис системных переменных sdk.SysValuesService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

      Пример добавления зависимости в AMD-модуль UsrAppClientSchemaName приведен ниже.

      Зависимости AMD-модуля
    2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    3. В секции viewConfigDiff привяжите свойство caption к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля. Вместо свойства visible используйте свойство caption, которое отвечает за текст отображаемый в элементе.
    4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели. В зависимости от значения атрибута (true или false), обработчик выполняет разную бизнес-логику.

      1. Создайте экземпляр сервиса системных значений из @creatio/sdk.
      2. Загрузите системные значения.
      3. При необходимости выполните расчет значения и запишите результат расчета в соответствующий атрибут.

      Пример обработчика запроса crt.HandleViewModelInitRequest с результатом расчета someVariable, который записан в атрибут SomeAttributeName, представлен ниже.

      Секция handlers

Подробный пример настройки отображения значения системной переменной приведен в статье Отобразить на странице значения системных переменных.

Управлять значением системной настройки 

Для работы с системными настройками в Creatio 8 Atlas используется сервис sdk.SysSettingsService.

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

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

    1. Подключите сервис системных настроек sdk.SysSettingsService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

      Пример добавления зависимости в AMD-модуль UsrAppClientSchemaName приведен ниже.

      Зависимости AMD-модуля
    2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    3. В секции viewConfigDiff привяжите свойство caption к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля. Вместо свойства visible используйте свойство caption, которое отвечает за текст отображаемый в элементе.
    4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

      1. Создайте экземпляр сервиса системных значений из @creatio/sdk.
      2. Загрузите значение системной настройки и запишите его в соответствующий атрибут.
      3. Реализуйте логику изменения значения системной настройки и обновите значение соответствующего атрибута.

      Пример обработчика запроса crt.HandleViewModelInitRequest с результатом расчета someVariable, который записан в атрибут SomeAttributeName, представлен ниже.

      Секция handlers

Подробный пример настройки управления значением системной настройки приведен в статье Управлять значениями системных настроек на странице.

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

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

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

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

    1. Подключите сервис отправки HTTP-запросов sdk.HttpClientService. Подключение сервиса аналогично описанному в алгоритме отображения значения системных переменных.
    2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    3. В секции viewConfigDiff привяжите свойство caption к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля. Вместо свойства visible используйте свойство caption, которое отвечает за текст отображаемый в элементе.
    4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

      1. Создайте экземпляр http-клиента из @creatio/sdk.
      2. Укажите URL для получение необходимой информации. Если запрос отправляется к веб-сервису не по абсолютному пути (без префиксов https:// или http://), то это запрос к внутреннему веб-сервису Creatio. В этом случае в ссылку автоматически добавляется адрес текущего приложения Creatio.
      3. Отправьте GET-запрос.
      4. Получите из тела ответа необходимые значения и запишите их в соответствующие атрибуты.

      Пример обработчика запроса crt.HandlerViewModelInitRequest, который отправляет запрос к веб-сервису https://SomeUrlValue, из тела ответа получает параметр someValue и записывает его в атрибут SomeAttributeName, представлен ниже.

      Секция handlers

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

Скрыть функциональность на странице 

Действия по скрытию функциональности на странице, которые позволяет выполнять Creatio 8 Atlas:

  • Скрыть функциональность на этапе разработки.
  • Скрыть функциональность без права доступа.

Скрыть функциональность на этапе разработки 

Для проверки состояний функциональности в Creatio 8 Atlas используется сервис sdk.FeatureService.

Чтобы скрыть на странице функциональность на этапе разработки:

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

    1. Подключите сервис проверки состояний функциональности sdk.FeatureService. Подключение сервиса аналогично описанному в алгоритме отображения значения системных переменных.
    2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    3. В секции viewConfigDiff привяжите свойство visible к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля.
    4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

      1. Создайте экземпляр сервиса проверки состояния функциональности из @creatio/sdk.
      2. Получите состояние функциональности по ее коду и запишите его в соответствующий атрибут.

      Пример обработчика запроса crt.HandlerViewModelInitRequest, который получает состояние функциональности с кодом SomeFeatureCode и записывает его в атрибут SomeAttributeName, представлен ниже.

      Секция handlers

Подробный пример настройки скрытия функциональности на этапе разработки приведен в статье Скрыть на странице функциональность на этапе разработки.

Скрыть функциональность без права доступа 

Для проверки прав доступа в Creatio 8 Atlas используется сервис sdk.RightsService.

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

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

    1. Подключите сервис проверки прав доступа sdk.RightsService. Подключение сервиса аналогично описанному в алгоритме отображения значения системных переменных.
    2. В секцию viewModelConfig добавьте атрибут, который хранит информацию. Добавление атрибута аналогично описанному в алгоритме настройки условия отображения поля.
    3. В секции viewConfigDiff привяжите свойство visible к соответствующему атрибуту модели. Привязка свойства аналогична описанной в алгоритме настройки условия отображения поля.
    4. В секцию handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

      1. Создайте экземпляр сервиса проверки прав доступа из @creatio/sdk.
      2. Получите информацию о наличии прав доступа пользователя на выполнение соответствующего действия.
      3. Запишите результат проверки в соответствующий атрибут.

      Пример обработчика запроса crt.HandlerViewModelInitRequest, который проверяет наличие прав доступа на выполнение системной операции с кодом SomeOperationCode и записывает результат проверки в атрибут SomeAttributeName, представлен ниже.

      Секция handlers

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

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

Для открытия страниц в Creatio 8 Atlas используется сервис sdk.HandlerChainService. В приложении Creatio версии 7.Х и Creatio 8 Atlas используется одинаковый способ открытия страницы записи. При создании записи можно передать необходимые значения колонок по умолчанию.

Действия по открытию страницы из пользовательского обработчика, которые позволяет выполнять Creatio 8 Atlas:

  • Открыть страницу записи из пользовательского обработчика.
  • Открыть Freedom UI страницу из пользовательского обработчика.

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

  1. На шаге 1 алгоритма кастомизации страницы при необходимости добавьте на страницу кнопку, по нажатию на которую планируется открывать страницу записи.
  2. На шаге 2 алгоритма кастомизации страницы настройте открытие страницы записи из пользовательского обработчика.

    1. Подключите сервис открытия страниц sdk.HandlerChainService. Подключение сервиса аналогично описанному в алгоритме отображения значения системных переменных.
    2. В секции viewConfigDiff привяжите свойство clicked к соответствующему запросу. Бизнес-логика открытия страницы описывается в секции handlers. Свойство clicked отвечает за действие, которое выполняется при нажатии на кнопку.

      Пример привязки свойства clicked к пользовательскому запросу usr.SomeRequest представлен ниже.

      Секция viewConfigDiff
    3. В секцию handlers добавьте реализацию пользовательского запроса.

      Чтобы открыть страницу:

      1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
      2. Отправьте системный запрос crt.UpdateRecordRequest, который выполняет открытие страницы по указанному идентификатору.

      Пример обработчика запроса usr.SomeRequest, который отправляет системный запрос crt.UpdateRecordRequest, представлен ниже. Запрос crt.UpdateRecordRequest открывает страницу записи SomeSchemaName с идентификатором SomeRecordId.

      Секция handlers

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

      1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
      2. Отправьте системный запрос crt.CreateRecordRequest, который выполняет создание страницы с заполнением полей указанными значениями.

      Пример обработчика запроса usr.SomeRequest, который отправляет системный запрос crt.CreateRecordRequest, представлен ниже. Запрос crt.CreateRecordRequest открывает страницу записи SomeSchemaName и заполняет поле SomeField значением "SomeRecordId".

      Секция handlers

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

Открыть Freedom UI страницу из пользовательского обработчика 

  1. Выполните шаги 1-2 алгоритма открытия страницу записи из пользовательского обработчика.
  2. На шаге 2 алгоритма открытия страницу записи из пользовательского обработчика настройте открытие Freedom UI страницы из пользовательского обработчика. Для этого в секцию handlers добавьте реализацию пользовательского запроса.

    1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
    2. Отправьте системный запрос crt.OpenPageRequest, который выполняет открытие Freedom UI страницы по указанному имени.

    Пример обработчика запроса usr.SomeRequest, который отправляет системный запрос crt.OpenPageRequest, представлен ниже. Запрос crt.OpenPageRequest открывает страницу SomePageName.

    Секция handlers

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

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

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

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

Секция handlers

Реализовать пользовательский веб-компонент 

Creatio предоставляет возможность расширения предустановленного набора компонентов, которые используются для кастомизации страницы Freedom UI. Начиная с версии 8.0.2, Creatio позволяет реализовать пользовательский веб-компонент на основе компонента 7.Х.

Чтобы реализовать пользовательский веб-компонент:

  1. Создайте пользовательский веб-компонент.

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

      1. Добавьте в AMD-модуль зависимость @creatio/sdk.

        Пример добавления зависимости в AMD-модуль UsrAppClientSchemaName
      2. Объявите класс веб-компонента.

        Пример объявления класса UsrAppClientSchemaName
      3. На странице зарегистрируйте веб-компонент.

        Пример регистрации веб-компонента UsrAppClientSchemaName
      4. Зарегистрируйте веб-компонент в качестве визуального элемента.

        Пример регистрации веб-компонента usr-custom-view-element
  2. Добавьте пользовательский веб-компонент на страницу Freedom UI.

    1. В объявлении AMD-модуля в качестве зависимости добавьте модуль пользовательского веб-компонента.

      Пример добавления зависимости UsrAppClientSchemaName
    2. В секцию viewConfigDiff добавьте конфигурационный объект модуля с пользовательским компонентом.

      Пример конфигурационного объекта модуля с пользовательским веб-компонентом UsrCustomViewElement представлен ниже.

      Секция viewConfigDiff

На заметку. Creatio не предоставляет возможности добавления пользовательского веб-компонента в библиотеку элементов Freedom UI дизайнера. Вместо пользовательского веб-компонента на холсте страницы Freedom UI в дизайнере отображается заглушка.

Подробный пример реализации пользовательского веб-компонента приведен в статье Реализовать пользовательский веб-компонент с использованием компонента 7.Х.

Реализовать валидацию значения поля на странице
Средний

Пример. На страницу записи пользовательского раздела Validators добавить валидатор, который проверяет, что в поле Название (Name) установлено любое значение за исключением значения test.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Validators. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Validators откройте страницу Страница записи Validators (Validators form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Validators (Validators form page).

  3. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить валидацию значения поля 

Бизнес-логика настраивается в дизайнере клиентского модуля. В этом примере настроим валидацию значения поля. Валидатор добавляем к полю Название (Name) страницы Страница записи Validators (Validators form page).

  1. В секции validators реализуйте пользовательский валидатор usr.MyValidator.

    Секция validators
    validators: /**SCHEMA_VALIDATORS*/{
        /* Тип валидатора обязательно должен иметь вендорный префикс.
        Тип валидатора необходимо указывать в стиле PascalCase. */
        "usr.MyValidator": {
            "validator": function (config) {
                return function (control) {
                    return control.value !== config.invalidName ? null: {
                        "usr.MyValidator": { message: config.message }
                    };
                };
            },
            "params": [
                {
                    "name": "invalidName"
                },
                {
                    "name": "message"
                }
            ],
            "async": false
        }
    }/**SCHEMA_VALIDATORS*/
    
  2. В секции viewModelConfig привяжите валидатор MyValidator к атрибуту UsrName модели. В свойстве invalidName укажите значение "test". При вводе этого значения отображается сообщение об ошибке, которое указано в свойстве message.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            "UsrName": {
                ...,
                "validators": {
                    /* Привязывает пользовательский валидатор к атрибуту. */
                    "MyValidator": {
                        "type": "usr.MyValidator",
                        "params": {
                            "invalidName": "test",
                            "message": "Invalid name"
                        }
                    }
                }
            },
            ...
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
    Полный исходный код схемы страницы
  3. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Validators и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Validators нажмите Добавить (New).
  3. В поле Название (Name) введите значение "test".
  4. На панели инструментов страницы валидатора нажмите Сохранить (Save).

В результате выполнения примера запись test не сохраняется и приложение выдает всплывающее уведомление об ошибке.

Сохранение другой записи (например, с именем Validator's name) выполняется корректно. Запись отображается в реестре раздела Validators.

Реализовать конвертацию значения поля на странице
Средний

Пример. На страницу записи пользовательского раздела Converters добавить конвертер, который конвертирует значение поля Название (Name) в верхний регистр. Значение поля Название (Name) остается неизменным, а конвертированное значение отображается в компоненте типа Надпись (Label).

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Converters. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Converters откройте страницу Страница записи Converters (Converters form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Converters (Converters form page).

  3. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
  4. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить конвертацию значения поля 

Бизнес-логика настраивается в дизайнере клиентского модуля. В этом примере настроим конвертацию значения поля. Конвертируем значение поля Название (Name) страницы Страница записи Converters (Converters form page).

  1. В секции converters реализуйте пользовательский конвертер usr.ToUpperCase.

    Секция converters
    converters: /**SCHEMA_CONVERTERS*/{
        /* Пользовательский конвертер. Конвертирует значение в верхний регистр. */
        "usr.ToUpperCase": function(value) {
            return value?.toUpperCase() ?? '';
        }
    }/**SCHEMA_CONVERTERS*/,
    
  2. В секции viewConfigDiff привяжите свойство caption элемента Label к атрибуту $UsrName модели. $UsrName — значение поля Название (Name). К атрибуту $UsrName добавьте конвертер usr.ToUpperCase.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "Label",
        "values": {
            ...,
            /* Привязывает конвертер usr.ToUpperCase к атрибуту $UsrName. */
            "caption": "$UsrName | usr.ToUpperCase",
            ...
        },
        ...
    }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
    Полный исходный код схемы страницы
  3. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Converters и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Converters нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Converters's name".

В результате выполнения примера на странице конвертера при заполнении поля Название (Name) его значение конвертируется в верхний регистр и отображается в компоненте типа Надпись (Label). При этом значение поля Название (Name) не меняется.

Настроить условие отображения поля на странице
Средний

Пример. Настроить условие отображения поля Количество доступных дней (Sick leave, days left) на странице записи пользовательского раздела Requests. Поле отображается для заявки, которую инициировал сотрудник (т. e. в поле Тип инициатора (Originator type) заявки выбрано значение "Сотрудник" ("Employee")).

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит тип инициатора заявки.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Тип инициатора" ("Originator type").
      • Код (на английском) (Code) — "UsrOriginatorType".
      • Выбор объекта (Lookup) — выберите "Тип контакта" ("Contact type").
  4. Добавьте поле, которое содержит количество доступных дней.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Число (Number).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Количество доступных дней" ("Sick leave, days left").
      • Код (на английском) (Code) — "UsrSickDaysLeft".
  5. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить условие отображения поля 

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

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

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит тип инициатора заявки. */
            "IsRequestFromEmployee": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  2. В секции viewConfigDiff привяжите свойство visible элемента UsrSickDaysLeft к атрибуту IsRequestFromEmployee модели. Если заявка инициирована контактом типа Сотрудник (Employee), то отображается поле Количество доступных дней (Sick leave, days left). Для другого типа контакта поле скрыто.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "UsrSickDaysLeft",
            "values": {
                ...,
                /* Свойство, которое определяет видимость поля. Привязано к значению атрибута IsRequestFromEmployee. */
                "visible": "$IsRequestFromEmployee"
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  3. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). Обработчик проверяет значение атрибута UsrOriginatorType. Если новое значение атрибута ссылается на значение "Сотрудник" ("Employee") справочника Тип контакта (Contact type), то для атрибута IsRequestFromEmployee устанавливается значение true, в другом случае — false. Уникальный идентификатор контакта типа Сотрудник (Employee), который установлен в качестве значения константы employeeOriginatorTypeId, содержится в соответствующей строке записи справочника Тип контакта (Contact type). В нашем примере идентификатор контакта типа Сотрудник (Employee) — "60733efc-f36b-1410-a883-16d83cab0980".

    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Проверяет тип инициатора заявки. */
                if (request.attributeName === 'UsrOriginatorType') {
                    const employeeOriginatorTypeId = '60733efc-f36b-1410-a883-16d83cab0980';
                    const selectedOriginatorType = await request.$context.UsrOriginatorType;
                    const selectedOriginatorTypeId = selectedOriginatorType?.value;
                    /* Если инициатор заявки — сотрудник, то атрибуту IsRequestFromEmployee присваивается значение true. */
                    request.$context.IsRequestFromEmployee = selectedOriginatorTypeId === employeeOriginatorTypeId;
                }
                /* Вызываем следующий обработчик, если такой есть, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Sick leave".
  4. В поле Тип инициатора (Originator type) выберите "Сотрудник" ("Employee").

В результате выполнения примера поле Количество доступных дней (Sick leave, days left) отображается на странице заявки для контакта типа Сотрудник (Employee).

Поле Количество доступных дней (Sick leave, days left) не отображается для другого типа контакта (например, Клиент (Customer)).

Настроить условие блокировки поля на странице
Средний

Пример реализован на front-end стороне приложения. Реализация на back-end стороне описана в блоке статей Управление доступом.

Пример. Настроить условие блокировки поля Заявитель (Applicant) на странице записи пользовательского раздела Requests. Поле заблокировано для выполненной заявки (т. е. в поле Состояние (Status) выбрано значение "Выполнена" ("Completed")).

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит заявителя.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Заявитель" ("Applicant").
      • Код (на английском) (Code) — "UsrApplicant".
      • Выбор объекта (Lookup) — выберите "Контакт" ("Contact").
  4. Добавьте поле, которое содержит состояние заявки.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Состояние" ("Status").
      • Код (на английском) (Code) — "UsrStatus".
      • Выбор объекта (Lookup) — нажмите на кнопку и заполните свойства справочника:

        • Заголовок (Title) — "Состояние заявки" ("Request status").
        • Код (на английском) (Code) — "UsrRequestStatusLookup".

        Для добавления справочника нажмите Сохранить (Save).

    3. На панели инструментов Freedom UI дизайнера нажмите на кнопку Сохранить (Save).
  5. Заполните справочник Состояние заявки (Request status).

    1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
    2. Перейдите в дизайнер системы по кнопке . В блоке Настройка системы (System setup) перейдите по ссылке Справочники (Lookups).
    3. Для Creatio версии 8.0.0 зарегистрируйте справочник. Начиная с версии 8.0.1 справочник регистрируется автоматически.

      1. На панели инструментов раздела Справочники (Lookups) нажмите Добавить справочник (New lookup) и заполните свойства справочника:

        • Название (Name) — "Состояние заявки" ("Request status").
        • Объект (Object) — выберите "Состояние заявки" ("Request status").
      2. На панели инструментов страницы настройки справочника нажмите Сохранить (Save) для сохранения справочника.
    4. Откройте справочник Состояние заявки (Request status).
    5. На панели инструментов страницы настройки справочника нажмите Добавить (New) и заполните значения справочника:

      • "Новая" ("New").
      • "Оценивается" ("Under evaluation").
      • "Выполняется" ("In progress").
      • "Отменена" ("Canceled").
      • "Выполнена" ("Completed").
  6. Перейдите на страницу Страница записи Requests (Requests form page) и на панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить условие блокировки поля 

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

  1. В секцию viewModelConfig добавьте атрибут IsApplicantReadonly, который хранит информацию о разрешении контакта на редактирование поля Заявитель (Applicant).

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который регулирует доступность поля [Заявитель] для редактирования. */
            "IsApplicantReadonly": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  2. В секции viewConfigDiff привяжите свойство readonly элемента UsrApplicant к атрибуту IsApplicantReadonly модели. Если заявка выполнена, то заблокировано поле Заявитель (Applicant). Для другого статуса заявки поле доступно для изменения.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "UsrApplicant",
            "values": {
                ...,
                /* Свойство, которое определяет блокировку поля для редактирования. Привязано к значению атрибута IsApplicantReadonly. */
                "readonly": "$IsApplicantReadonly"
            },
            ...
        },
        ...
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  3. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). Обработчик проверяет значение атрибута UsrStatus. Если новое значение атрибута ссылается на значение "Выполнена" ("Completed") справочника Состояние заявки (Request status), то для атрибута IsApplicantReadonly устанавливается значение true, в другом случае — false. Уникальный идентификатор статуса выполненной заявки, который установлен в качестве значения константы completedStatusId, содержится в соответствующей колонке строки записи справочника Состояние заявки (Request status). Чтобы отобразить колонку Id в реестре справочника Состояние заявки (Request status), воспользуйтесь инструкцией, которая описана в статье Реестр раздела. В нашем примере идентификатор статуса выполненной заявки — "6d76b4e0-6507-4c34-902b-90e18df84153".

    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Проверяет статус заявки. */
                if (request.attributeName === 'UsrStatus') {
                    const completedStatusId = '6d76b4e0-6507-4c34-902b-90e18df84153';
                    const selectedStatus = await request.$context.UsrStatus;
                    const selectedStatusId = selectedStatus?.value;
                    const isRequestCompleted = selectedStatusId === completedStatusId;
                    /* Если статус заявки [Выполнена], то в атрибут IsApplicantReadonly записывается значение true и поле [Заявитель] блокируется для редактирования. */
                    request.$context.IsApplicantReadonly = isRequestCompleted;
                }
                /* Вызываем следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Request's name".
  4. В поле Заявитель (Applicant) выберите "Bruce Clayton".
  5. В поле Состояние (Status) выберите "Выполнена" ("Completed").

В результате выполнения примера поле Заявитель (Applicant) заблокировано для выполненной заявки.

Поле Заявитель (Applicant) доступно для изменения для другого состояния заявки (например, "Новая" ("New")).

Настроить условие заполнения поля на странице
Средний

Пример. Настроить условие заполнения поля Описание (Description) на странице записи пользовательского раздела Requests. Если совпадают значения полей Название (Name) и Описание (Description), то поле Описание (Description) заполняется новым значением поля Название (Name). В другом случае значение поля Описание (Description) не меняется.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит описание заявки.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Текст (Text).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Описание" ("Description").
      • Код (на английском) (Code) — "UsrDescription".
  4. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить условие заполнения поля 

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

  1. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). Обработчик проверяет значение атрибута UsrName. Если старое значение атрибута совпадает со значением атрибута UsrDescription, то для атрибута UsrDescription устанавливаем такое же значение, как и новое значение атрибута UsrName.

    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Если изменяется поле UsrName, то выполняются следующие шаги.*/
                if (request.attributeName === 'UsrName') {
                    /* Проверяет равно ли старое значение поля UsrName значению поля UsrDescription. */
                    const isFieldsShouldBeSynchronized = request.oldValue ===   await request.$context.UsrDescription;
                    if (isFieldsShouldBeSynchronized) {
                        /* Присваивает новое значение поля UsrName полю UsrDescription. */
                        request.$context.UsrDescription = await request.$context.UsrName;
                    }
                }
                /* Вызываем следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  2. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

Чтобы посмотреть результат выполнения примера для одинаковых значений полей Название (Name) и Описание (Description:

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Request's name".
  4. В поле Описание (Description) введите значение "Request's name".
  5. Измените значение поля Название (Name) на "Test".

В результате выполнения примера в поле Описание (Description) установлено значение "Test", как и в поле Название (Name).

Чтобы посмотреть результат выполнения примера для разных значений полей Название (Name) и Описание (Description:

  1. Измените значение поля Описание (Description) на "Request's description".
  2. В поле Название (Name) введите значение "Test".

В результате выполнения примера значение поля Описание (Description) остается без изменений.

Настроить условие обязательности поля на странице
Средний

Пример. Настроить обязательность заполнения поля Описание (Description) на странице записи пользовательского раздела Requests. Поле обязательно для новой заявки (т. е. в поле Состояние (Status) выбрано значение "Новая" ("New")).

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит состояние заявки.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Состояние" ("Status").
      • Код (на английском) (Code) — "UsrStatus".
      • Выбор объекта (Lookup) — нажмите на кнопку и заполните свойства справочника:

        • Заголовок (Title) — "Состояние заявки" ("Request status").
        • Код (на английском) (Code) — "UsrRequestStatusLookup".

        Для добавления справочника нажмите Сохранить (Save).

    3. На панели инструментов Freedom UI дизайнера нажмите на кнопку Сохранить (Save).
  4. Заполните справочник Состояние заявки (Request status).

    1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
    2. Перейдите в дизайнер системы по кнопке . В блоке Настройка системы (System setup) перейдите по ссылке Справочники (Lookups).
    3. Для Creatio версии 8.0.0 зарегистрируйте справочник. Начиная с версии 8.0.1 справочник регистрируется автоматически.

      1. На панели инструментов раздела Справочники (Lookups) нажмите Добавить справочник (New lookup) и заполните свойства справочника:

        • Название (Name) — "Состояние заявки" ("Request status").
        • Объект (Object) — выберите "Состояние заявки" ("Request status").
      2. На панели инструментов страницы настройки справочника нажмите Сохранить (Save) для сохранения справочника.
    4. Откройте справочник Состояние заявки (Request status).
    5. На панели инструментов страницы настройки справочника нажмите Добавить (New) и заполните значения справочника:

      • "Новая" ("New").
      • "Оценивается" ("Under evaluation").
      • "Выполняется" ("In progress").
      • "Отменена" ("Canceled").
      • "Выполнена" ("Completed").
  5. Добавьте поле, которое содержит описание заявки.

    1. Перейдите на страницу Страница записи Requests (Requests form page) и в рабочую область Freedom UI дизайнера добавьте новое поле типа Текст (Text).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Описание" ("Description").
      • Код (на английском) (Code) — "UsrDescription".
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

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

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

  1. В секции viewModelConfig привяжите валидатор с типом crt.Required к атрибуту UsrDescription модели. Валидатор проверяет значение атрибута.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...
            "UsrDescription": {
                ...,
                /* Свойство, которое подключает валидаторы к атрибуту. */
                "validators": {
                    /* Указывает на обязательность заполнения поля. */
                    "required": {
                        "type": "crt.Required"
                    }
                }
            },
            ...
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  2. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandleViewModelAttributeChangeRequest. Обработчик выполняется при изменении значения любого атрибута (в т. ч. при загрузке значений атрибутов из источника данных). Обработчик проверяет значение атрибута UsrStatus. Если новое значение атрибута ссылается на значение "Новая" ("New") справочника Состояние заявки (Request status), то валидатор применяется, в другом случае — нет. Уникальный идентификатор статуса новой заявки, который установлен в качестве значения константы newStatusId, содержится в соответствующей колонке строки записи справочника Состояние заявки (Request status). Чтобы отобразить колонку Id в реестре справочника Состояние заявки (Request status), воспользуйтесь инструкцией, которая описана в статье Реестр раздела. В нашем примере идентификатор статуса новой заявки — "3be636fa-12b4-40eb-a050-91b1d774a75f".

    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                if (request.attributeName === 'UsrStatus') {
                    const newStatusId = '3be636fa-12b4-40eb-a050-91b1d774a75f';
                    const selectedStatus = await request.$context.UsrStatus;
                    const selectedStatusId = selectedStatus?.value;
                    const isNewRequest = selectedStatusId === newStatusId;
                    /* Проверяет статус заявки. */
                    if (isNewRequest) {
                        /* Если заявка новая, то применяет валидатор required к атрибуту UsrDescription. */
                        request.$context.enableAttributeValidator('UsrDescription', 'required');
                    } else {
                        /* Для других заявок (кроме новых) отключает применение валидатора required к атрибуту UsrDescription. */
                        request.$context.disableAttributeValidator('UsrDescription', 'required');
                    }
                    /* Вызываем следующий обработчик, если он присутствует, и возвращаем его результат. */
                    return next?.handle(request);
                }
            }
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  3. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Request's name".
  4. В поле Состояние (Status) выберите "Новая" ("New").

В результате выполнения примера поле Описание (Description) обязательно для новой заявки.

Поле Описание (Description) необязательно для другого состояния заявки (например, "Выполнена" ("Completed")).

Отобразить на странице значения системных переменных
Средний

Пример. На странице записи пользовательского раздела System variables отобразить:

  • Имя текущего пользователя.
  • Значение разницы во времени (в часах) между временем в часовом поясе текущего контакта и универсальным временем (UTC).

В качестве значений используются значения соответствующих системных переменных.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение System variables. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения System variables откройте страницу Страница записи System variables (System variables form page).
  3. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи System variables (System variables form page).
  4. Добавьте надпись текущего контакта.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Текущий пользователь" ("Current user").
      • Стиль (Style) — выберите "Описание" ("Caption").
      • Цвет текста (Text color) — выберите серый цвет.
  5. Аналогично добавьте надписи:

    • Значения имени текущего контакта из системной переменной.
    • Разницы во времени с UTC.
    • Значения разницы во времени с UTC из системной переменной.

    Свойства надписей, которые необходимо добавить, приведены в таблице ниже.

    Значения свойств надписей
    Элемент
    Свойство
    Значение свойства
    Надпись, которая содержит значение имени текущего контакта из системной переменной
    Заголовок (Title)
    "Текущий пользователь (значение)" ("Current user (value)")
    Стиль (Style)
    Выберите "Обычный текст" ("Body text")
    Надпись разницы во времени с UTC
    Заголовок (Title)
    "Разница во времени с UTC" ("Contact time offset")
    Стиль (Style)
    Выберите "Описание" ("Caption")
    Цвет текста (Text color)
    Выберите серый цвет
    Надпись, которая содержит значение разницы во времени с UTC из системной переменной
    Заголовок (Title)
    "Разница во времени с UTC (значение)" ("Contact time offset (value)")
    Стиль (Style)
    Выберите "Обычный текст" ("Body text")
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить получение значений системных переменных 

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

  1. Подключите сервис системных переменных sdk.SysValuesService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppSystemvariable_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибуты:

    • CurrentUser — атрибут, который хранит имя текущего контакта.
    • ContactTimezone — атрибут, который хранит разницу во времени (в часах) между временем в часовом поясе текущего контакта и UTC.
    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит имя текущего контакта. */
            "CurrentUser": {},
            /* Атрибут, который хранит разницу во времени (в часах) между временем в часовом поясе текущего контакта и универсальным временем (UTC). */
            "ContactTimezone": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff измените значение свойства caption:

    • $CurrentUser — для элемента CurrentUserValue.
    • $ContactTimezone — для элемента ContactTimeOffsetValue.

    Свойство caption отвечает за текст, который содержит элемент.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "CurrentUserValue",
            "values": {
                ...,
                /* Привязка атрибута CurrentUser к свойству caption. */
                "caption": "$CurrentUser",
                ...
            },
            ...
        },
        ...,
        {
            "operation": "insert",
            "name": "ContactTimeOffsetValue",
            "values": {
                ...,
                /* Привязка атрибута ContactTimezone к свойству caption. */
                "caption": "$ContactTimezone",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр сервиса системных значений из @creatio/sdk.
    2. Загрузите системные значения.
    3. Установите имя контакта текущего пользователя в атрибут CurrentUser.
    4. Переведите значение разницы в часовых поясах с минут в часы и запишите ее в атрибут ContactTimezone.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Создает экземпляр сервиса системных значений из @creatio/sdk. */
                const sysValuesService = new sdk.SysValuesService();
                /* Загружает системные значения. */
                const sysValues = await sysValuesService.loadSysValues();
                /* Устанавливает имя контакта текущего пользователя в атрибут CurrentUser. */
                request.$context.CurrentUser = sysValues.userContact.displayValue;
                /* Переводит разницу в часовых поясах с минут в часы и записываем ее в атрибут ContactTimezone. */
                const offset = sysValues.userTimezoneOffset;
                const offsetDisplayValue = (offset > 0 ? '+' : '') + (offset / 60) + 'h';
                request.$context.ContactTimezone = offsetDisplayValue;
                /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

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

В результате выполнения примера на странице записи пользовательского раздела System variables отображаются имя текущего пользователя и значение разницы во времени (в часах) между временем в часовом поясе текущего контакта и UTC. При этом используются значения соответствующих системных переменных.

Управлять значениями системных настроек на странице
Средний

Пример. На странице записи пользовательского раздела Requests отобразить:

  • Город пользователя.
  • Номер последней созданной записи в разделе Requests, который увеличен на 1. Значение номера увеличивается при создании новой или копировании существующей заявки.

В качестве значений используются значения пользовательских системных настроек.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. Добавьте системную настройку, которая хранит номер заявки.

    1. На странице приложения Requests нажмите Запустить приложение (Run app).
    2. Перейдите в дизайнер системы по кнопке . В блоке Настройка системы (System setup) перейдите по ссылке Системные настройки (System settings).
    3. На панели инструментов раздела нажмите Добавить настройку (Add setting).
    4. Заполните свойства системной настройки:

      • Название (Name) — "Номер заявки" ("Request number").
      • Код (Code) — "UsrRequestLastNumber".
      • Тип (Type) — выберите "Целое число" ("Integer").
      • Значение по умолчанию (Default value) — введите "0".
  3. Добавьте системную настройку, которая хранит название города.

    1. На панели инструментов раздела нажмите Добавить настройку (Add setting).
    2. Заполните свойства системной настройки:

      • Название (Name) — "Город" ("City").
      • Код (Code) — "UsrDefaultCity".
      • Тип (Type) — выберите "Справочник" ("Lookup").
      • Справочник (Lookup) — выберите "Город" ("City").
      • Значение по умолчанию (Default value) — выберите "New York" ("Нью-Йорк").
  4. Перейдите на страницу приложения Requests и в рабочей области откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  5. Добавьте надпись номера заявки.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Текст (Text) — "Номер заявки" ("Request number").
      • Стиль (Style) — выберите "Описание" ("Caption").
      • Цвет текста (Text color) — выберите серый цвет.
  6. Аналогично добавьте надписи:

    • Значения системной настройки номера заявки.
    • Города.
    • Значения системной настройки города.

    Свойства надписей, которые необходимо добавить, приведены в таблице ниже.

    Значения свойств надписей
    Элемент
    Свойство
    Значение свойства
    Надпись, которая содержит значение системной настройки номера заявки
    Текст (Text)
    "Номер заявки (значение)" ("Request number (value)")
    Стиль (Style)
    Выберите "Обычный текст" ("Body text")
    Надпись города
    Текст (Text)
    "Город" ("City")
    Стиль (Style)
    Выберите "Описание" ("Caption")
    Цвет текста (Text color)
    Выберите серый цвет
    Надпись, которая содержит значение системной настройки города
    Текст (Text)
    "Город (значение)" ("City (value)")
    Стиль (Style)
    Выберите "Обычный текст" ("Body text")
  7. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Управлять значениями системных настроек 

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

  1. Подключите сервис системных настроек sdk.SysSettingsService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибуты:

    • UsrDefaultCity — хранит информацию о значении системной настройки UsrDefaultCity.
    • UsrRequestLastNumber — хранит информацию о значении системной настройки UsrRequestLastNumber.
    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит значение системной настройки UsrDefaultCity. */
            "UsrDefaultCity": {},
            /* Атрибут, который хранит значение системной настройки UsrRequestLastNumber. */
            "UsrRequestLastNumber": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff измените значения свойств:

    • caption — для элемента RequestNumberValue. Привяжите свойство к значению атрибута $UsrRequestLastNumber. Свойство caption отвечает за текст, который содержит элемент.
    • caption — для элемента CityValue. Привяжите свойство к значению атрибута $UsrDefaultCity.
    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "RequestNumberValue",
            "values": {
                ...,
                /* Свойство, которое отвечает за текст, который содержит элемент. Привязано к значению атрибута UsrRequestLastNumber. */
                "caption": "$UsrRequestLastNumber",
                ...
            },
            ...
        },
        ...,
        {
            "operation": "insert",
            "name": "CityValue",
            "values": {
                ...,
                /* Свойство, которое отвечает за текст, который содержит элемент. Привязано к значению атрибута UsrDefaultCity. */
                "caption": "$UsrDefaultCity",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр сервиса системных значений из @creatio/sdk.
    2. Получите значение системной настройки UsrDefaultCity и запишите его в атрибут UsrDefaultCity.
    3. Получите состояние страницы.
    4. Получите значение системной настройки UsrRequestLastNumber.
    5. При создании новой или копировании существующей записи отправьте запрос на обновление значения системной настройки UsrRequestLastNumber (увеличьте ее на 1).
    6. Обновите значение атрибута UsrRequestLastNumber.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Ожидает окончание отработки остальных обработчиков инициализации. */
                await next?.handle(request);
                /* Создает экземпляр сервиса системных значений из @creatio/sdk. */
                const sysSettingsService = new sdk.SysSettingsService();
                /* Получает значение системной настройки UsrDefaultCity и записывает его в атрибут UsrDefaultCity. */
                const defaultCity = await sysSettingsService.getByCode('UsrDefaultCity');
                request.$context.UsrDefaultCity = defaultCity.displayValue;
                /* Получает состояние страницы. */
                const cardState = await request.$context.CardState;
                /* При создании новой или копировании существующей записи увеличиваем значение системной настройки UsrRequestLastNumber. */
                if (cardState === 'add' || cardState === 'copy') {
                    /* Получает значение системной настройки UsrRequestLastNumber и записывает его в атрибут UsrRequestLastNumber. */
                    const requestLastNumber = await sysSettingsService.getByCode('UsrRequestLastNumber');
                    /* Отправляем запрос на обновления значения системной настройки UsrRequestLastNumber. */
                    await sysSettingsService.update({
                        code: 'UsrRequestLastNumber',
                        /* Новое значение на 1 больше предыдущего. */
                        value: ++requestLastNumber.value
                    });
                    /* Обновляет значение атрибута UsrRequestLastNumber. */
                    request.$context.UsrRequestLastNumber = requestLastNumber.value;
                }
            },
        }
    ]/**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

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

В результате выполнения примера на странице записи пользовательского раздела Requests отображаются:

  • Город пользователя. В качестве значения используется значение по умолчанию системной настройки Город (City, код UsrDefaultCity).
  • Номер последней созданной записи в разделе Requests, который увеличен на 1. В качестве значения используется значение системной настройки Номер заявки (Request number, код UsrRequestLastNumber), которое увеличивается на 1 при создании новой заявки.

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

  1. Предварительно добавьте заявку Request's name.
  2. В строке заявки Request's name в реестре раздела нажмите —> Копировать (Copy).

В результате выполнения примера на странице скопированной записи пользовательского раздела Requests отображаются:

  • Город пользователя. В качестве значения используется значение по умолчанию системной настройки Город (City, код UsrDefaultCity).
  • Номер последней созданной записи в разделе Requests, который увеличен на 1. В качестве значения используется значение системной настройки Номер заявки (Request number, код UsrRequestLastNumber), которое увеличивается на 1 при копировании существующей заявки.
Скрыть на странице функциональность на этапе разработки
Средний

Пример. На странице записи пользовательского раздела Feature Service скрыть пользовательскую кнопку Функциональность (Feature). Кнопка содержит функциональность на этапе разработки.

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

  1. Добавьте разрабатываемую функциональность, которую планируется скрыть.

    1. Перейдите на страницу Функциональность (Feature) и заполните свойства функциональности:

      • Код функциональности (Feature code) — "UsrShowMyButton".
      • Имя функциональности (Feature name) — "Show My Button".
    2. Нажмите кнопку Добавить функциональность (Create feature).
  2. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Feature Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  3. В рабочей области страницы приложения Feature Service откройте страницу Страница записи Feature Service (Feature Service form page).
  4. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Feature Service (Feature Service form page).
  5. Добавьте кнопку, которая содержит функциональность на этапе разработки.

    1. На панель инструментов Freedom UI дизайнера добавьте компонент типа Кнопка (Button).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства кнопки:

      • Заголовок (Title) — "Функциональность" ("Feature").
      • Стиль (Style) — выберите "Основной" ("Primary").
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить скрытие функциональности на этапе разработки 

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

  1. Подключите сервис проверки состояния функциональности sdk.FeatureService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppFeatureService_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибут ShowMyButton, который хранит информацию о состоянии функциональности.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит состояние функциональности. */
            "ShowMyButton": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff привяжите свойство visible элемента FeatureButton к атрибуту ShowMyButton модели.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        {
            "operation": "insert",
            "name": "FeatureButton",
            "values": {
                ...,
                /* Свойство, которое определяет видимость поля. Привязано к значению атрибута ShowMyButton. */
                "visible": "$ShowMyButton"
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр сервиса проверки состояния функциональности из @creatio/sdk.
    2. Получите состояние функциональности с кодом UsrShowMyButton и запишите его в атрибут ShowMyButton.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Создает экземпляр сервиса проверки состояния функциональности из @creatio/sdk. */
                const featureService = new sdk.FeatureService();
                /* Получает состояние функциональности UsrShowMyButton и записывает его в атрибут ShowMyButton. */
                request.$context.ShowMyButton = await featureService.getFeatureState('UsrShowMyButton');
                /* Вызывает следующий обработчик, если такой есть, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

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

В результате выполнения примера на странице приложения Feature Service скрыта кнопка Функциональность (Feature), которая содержит функциональность на этапе разработки.

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

  1. Включите функциональность с кодом UsrShowMyButton.

    1. Перейдите на страницу Функциональность (Feature).
    2. В реестре страницы подключите функциональность Show My Button.
    3. Нажмите кнопку Сохранить изменения (Save changes) и обновите страницу.
  2. Обновите страницу приложения Feature Service.
  3. На панели инструментов приложения Feature Service нажмите Добавить (New).

В результате выполнения примера на странице приложения Feature Service отображается кнопка Функциональность (Feature), которая содержит разработанную функциональность.

Скрыть на странице функциональность без права доступа
Средний

Пример. На странице записи пользовательского раздела Rights Service скрыть кнопку Импорт данных из Excel (Excel data import), если пользователь не имеет прав на импорт данных из Excel.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Rights Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Rights Service откройте страницу Страница записи Rights Service (Rights Service form page).
  3. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Rights Service (Rights Service form page).
  4. Добавьте кнопку, которая запускает импорт данных из Excel.

    1. На панель инструментов Freedom UI дизайнера добавьте компонент типа Кнопка (Button).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства кнопки:

      • Заголовок (Title) — "Импорт данных из Excel" ("Excel data import").
      • Стиль (Style) — выберите "Основной" ("Primary").
  5. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить скрытие функциональности без права доступа 

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

  1. Подключите сервис проверки прав доступа sdk.RightsService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppRightsService_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибут CanImportFromExcel, который хранит информацию о правах доступа пользователя.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит информацию о правах доступа пользователя. */
            "CanImportFromExcel": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff привяжите свойство visible элемента ExcelDataImportButton к атрибуту CanImportFromExcel модели. Свойство visible определяет видимость кнопки.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        {
            "operation": "insert",
            "name": "ExcelDataImportButton",
            "values": {
                ...,
                /* Свойство, которое определяет видимость кнопки. Привязано к значению атрибута CanImportFromExcel. */
                "visible": "$CanImportFromExcel"
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр сервиса проверки прав доступа из @creatio/sdk.
    2. Получите информацию о наличии прав доступа на системную операцию CanImportFromExcel для пользователя.
    3. Запишите результат в атрибут CanImportFromExcel.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Создает экземпляр сервиса проверки прав доступа из @creatio/sdk. */
                const rightService = new sdk.RightsService();
                /* Получает информацию о наличии прав доступа на системную операцию CanImportFromExcel для пользователя. */
                const canImportFromExcel = await rightService.getCanExecuteOperation('CanImportFromExcel');
                /* Записывает результат в атрибут CanImportFromExcel. */
                request.$context.CanImportFromExcel = canImportFromExcel;
                /* Вызывает следующий обработчик, если такой есть, и возвращаем его результат. */
                return next?.handle(request);
            },
        }
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Войдите в приложение под пользователем, у которого нет прав на импорт данных из Excel, например, добавив нового или отобрав права у существующего пользователя. Для добавления пользователя воспользуйтесь инструкцией, которая приведена в статье Добавить пользователей. Для настройки прав доступа воспользуйтесь инструкцией, которая приведена в статье Настроить права доступа на системные операции. За импорт данных из Excel отвечает системная операция Импорт из Excel (Excel import, код CanImportFromExcel).
  2. Перейдите на страницу приложения Rights Service и нажмите Запустить приложение (Run app).
  3. На панели инструментов приложения Rights Service нажмите Добавить (New).

В результате выполнения примера на странице приложения Rights Service скрыта кнопка Импорт данных из Excel (Excel data import), которая запускает импорт данных из Excel.

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

  1. Обновите страницу приложения Rights Service.
  2. На панели инструментов приложения Rights Service нажмите Добавить (New).

В результате выполнения примера на странице приложения Rights Service отображается кнопка Импорт данных из Excel (Excel data import), которая запускает импорт данных из Excel.

Открыть страницу записи из пользовательского обработчика
Средний

Пример. На странице записи пользовательского раздела Handler Chain Service добавить кнопки:

  • Изменить контакт (Edit contact). Кнопка открывает страницу контакта с указанным идентификатором.
  • Создать заявку (Create request). Кнопка открывает страницу новой заявки пользовательского раздела Requests. Поле Название (Name) заявки заполняется значением "New request".

В приложении Creatio версий 7.Х и 8.Х используется одинаковый способ открытия страницы записи. При создании записи можно передать необходимые значения по умолчанию для колонок.

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

  1. Настройте интерфейс страницы пользовательского раздела Requests. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  2. Настройте интерфейс страницы пользовательского раздела Handler Chain Service.

    1. На странице приложения Requests нажмите на кнопку .
    2. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Handler Chain Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
    3. В рабочей области страницы приложения Handler Chain Service откройте страницу Страница записи Handler Chain Service (Handler Chain Service form page).
    4. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Handler Chain Service (Handler Chain Service form page).
    5. Добавьте кнопку, которая открывает страницу контакта с указанным идентификатором.

      1. На панель инструментов Freedom UI дизайнера добавьте компонент типа Кнопка (Button).
      2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойство кнопки Заголовок (Title) — "Изменить контакт" ("Edit contact").

    6. Добавьте кнопку, которая открывает страницу новой заявки пользовательского раздела Requests.

      1. На панель инструментов Freedom UI дизайнера добавьте компонент типа Кнопка (Button).
      2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства кнопки:

        • Заголовок (Title) — "Создать заявку" ("Create request").
        • Стиль (Style) — выберите "Основной" ("Primary").
    7. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить открытие страниц записи 

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

  1. Подключите сервис открытия страниц sdk.HandlerChainService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секции viewConfigDiff измените значение свойства clicked:

    • usr.EditContactRequest — для элемента EditContactButton.
    • usr.CreateUsrRequestRequest — для элемента CreateRequestButton.

    Свойство clicked отвечает за действие, которое выполняется при нажатии на кнопку.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        {
            "operation": "insert",
            "name": "EditContactButton",
            "values": {
                ...,
                "clicked": {
                    /* Привязывает к событию кнопки clicked отправку кастомного запроса usr.EditContactRequest. */
                    "request": "usr.EditContactRequest"
                }
            },
            ...
        },
        {
            "operation": "insert",
            "name": "CreateRequestButton",
            "values": {
                ...,
                "clicked": {
                    /* Привязывает к событию кнопки clicked отправку кастомного запроса usr.CreateUsrRequestRequest. */
                    "request": "usr.CreateUsrRequestRequest"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  3. В секции handlers добавьте реализации обработчиков пользовательских запросов:

    • usr.EditContactRequest.

      1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
      2. Отправьте системный запрос crt.UpdateRecordRequest, который выполняет открытие страницы контакта с указанным идентификатором. Посмотреть идентификатор контакта, страницу которого планируется открыть, можно в строке браузера. В нашем примере откроем страницу контакта Alexander Wilson идентификатор которого "98dae6f4-70ae-4f4b-9db5-e4fcb659ef19".
    • usr.CreateUsrRequestRequest.

      1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
      2. Отправьте системный запрос crt.CreateRecordRequest, который выполняет открытие страницы новой заявки. Поле Название (Name) заполняется значением "New request".
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "usr.EditContactRequest",
            /* Реализация обработчика пользовательского запроса. */
            handler: async (request, next) => {
                /* Получает экземпляр singleton-сервиса открытия страниц. */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Отправляет системный запрос crt.UpdateRecordRequest, который выполняет открытие страницы контакта с указанным Id. */
                await handlerChain.process({
                    type: 'crt.UpdateRecordRequest',
                    entityName: 'Contact',
                    recordId: '98dae6f4-70ae-4f4b-9db5-e4fcb659ef19'
                });
                /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        },
        {
            request: "usr.CreateUsrRequestRequest",
            /* Реализация обработчика пользовательского запроса. */
            handler: async (request, next) => {
                /* Получает экземпляр singleton-сервиса открытия страниц. */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Отправляет системный запрос crt.CreateRecordRequest, который выполняет открытие страницы новой заявки. Поле [Name] заполняется указанным значением. */
                await handlerChain.process({
                    type: 'crt.CreateRecordRequest',
                    entityName: 'UsrAppRequests',
                            defaultValues: [{
                                attributeName: 'UsrName',
                                value: 'New request'
                    }]
                });
                /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Handler Chain Service и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Handler Chain Service нажмите Добавить (New).
  3. На странице записи пользовательского раздела Handler Chain Service нажмите Изменить контакт (Edit contact).

В результате выполнения примера открывается страница контакта Alexander Wilson идентификатор которого "98dae6f4-70ae-4f4b-9db5-e4fcb659ef19".

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

  1. Обновите страницу приложения Handler Chain Service.
  2. На панели инструментов приложения Handler Chain Service нажмите Добавить (New).
  3. На странице записи пользовательского раздела Handler Chain Service нажмите Создать заявку (Create request).

В результате выполнения примера открывается страница новой заявки пользовательского раздела Requests. Поле Название (Name) заявки заполняется значением "New request".

Открыть Freedom UI страницу из пользовательского обработчика
Средний

Пример. На странице записи пользовательского раздела Handler Chain Service добавить кнопку Открыть страницу (Open page). Кнопка открывает Freedom UI страницу StudioHomePage.

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Handler Chain Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Handler Chain Service откройте страницу Страница записи Handler Chain Service (Handler Chain Service form page).
  3. Добавьте кнопку, которая открывает страницу StudioHomePage.

    1. На панель инструментов Freedom UI дизайнера добавьте компонент типа Кнопка (Button).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойство кнопки Заголовок (Title) — "Открыть страницу" ("Open page").

  4. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить открытие Freedom UI страницы 

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

  1. Подключите сервис открытия страниц sdk.HandlerChainService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секции viewConfigDiff измените значение свойства clicked для элемента OpenPageButton на usr.OpenUsrTestPageRequest. Свойство clicked отвечает за действие, которое выполняется при нажатии на кнопку.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        {
            "operation": "insert",
            "name": "OpenPageButton",
            "values": {
                ...,
                "clicked": {
                    /* Привязывает к событию кнопки clicked отправку кастомного запроса usr.OpenUsrTestPageRequest. */
                    "request": "usr.OpenUsrTestPageRequest"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  3. В секции handlers добавьте реализацию обработчика пользовательского запроса usr.OpenUsrTestPageRequest.

    1. Получите экземпляр singleton-сервиса открытия страниц sdk.HandlerChainService.
    2. Отправьте системный запрос crt.OpenPageRequest, который выполняет открытие страницы StudioHomePage.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "usr.OpenUsrTestPageRequest",
            /* Реализация обработчика пользовательского запроса. */
            handler: async (request, next) => {
                /* Получает экземпляр singleton-сервиса открытия страниц. */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Отправляет системный запрос crt.OpenPageRequest, который выполняет открытие указанной Freedom UI страницы. */
                await handlerChain.process({
                    type: 'crt.OpenPageRequest',
                    schemaName: 'StudioHomePage'
                });
                /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            }
        }
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Handler Chain Service и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Handler Chain Service нажмите Добавить (New).
  3. На странице записи пользовательского раздела Handler Chain Service нажмите Открыть страницу (Open page).

В результате выполнения примера открывается Freedom UI страница StudioHomePage.

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

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

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. Добавьте системную настройку, которая хранит номер заявки.

    1. Перейдите в дизайнер системы по кнопке . В блоке Настройка системы (System setup) перейдите по ссылке Системные настройки (System settings).
    2. На панели инструментов раздела нажмите на Добавить настройку (Add setting).
    3. Заполните свойства системной настройки:

      • Название (Name) — "Номер заявки" ("Request number").
      • Код (Code) — "UsrRequestLastNumber".
      • Тип (Type) — выберите "Целое число" ("Integer").
      • Значение по умолчанию (Default value) — "1".
  3. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  4. В рабочую область Freedom UI дизайнера добавьте компонент типа 2 колонки (2 columns).
  5. Добавьте надпись номера заявки.

    1. В первую колонку компонента типа 2 колонки (2 columns) Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Номер заявки" ("Request number").
      • Стиль (Style) — выберите "Описание" ("Caption").
      • Цвет текста (Text color) — выберите серый цвет.
  6. Добавьте надпись, которая содержит значение системной настройки номера заявки.

    1. Во вторую колонку компонента типа 2 колонки (2 columns) Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Номер заявки (значение)" ("Request number (value)").
      • Стиль (Style) — выберите "Обычный текст" ("Body text").
  7. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

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

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

  1. Подключите сервис системных переменных sdk.SysSettingsService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        };
    });
    
  2. В секции viewModelConfig добавьте атрибут UsrRequestLastNumber, который хранит информацию о значении системной настройки UsrRequestLastNumber.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит значение системной настройки UsrRequestLastNumber. */
            "UsrRequestLastNumber": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff привяжите свойство caption элемента RequestNumberValue к атрибуту $UsrRequestLastNumber модели. Свойство caption отвечает за текст, который содержит элемент.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "RequestNumberValue",
            "values": {
                ...,
                /* Свойство, которое отвечает за текст, который содержит элемент. Привязано к значению атрибута UsrRequestLastNumber. */
                "caption": "$UsrRequestLastNumber",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.SaveRecordRequest. Обработчик выполняется при нажатии на кнопку Сохранить (Save) на панели инструментов страницы заявки.

    • Реализуйте ожидание выполнения следующего обработчика. В нашем примере это обработчик, который выполняет сохранение записи.
    • После сохранения записи создайте экземпляр сервиса системных значений из @creatio/sdk.
    • Получите значение системной настройки UsrRequestLastNumber.
    • Отправьте запрос на обновление значения системной настройки UsrRequestLastNumber (увеличьте ее на 1).
    • Обновите значение атрибута UsrRequestLastNumber.
    • Верните результат сохранения.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.SaveRecordRequest",
            /* Реализация обработчика пользовательского запроса. */
            handler: async (request, next) => {
                /* Ждет выполнения следующего обработчика (в данном случае, обработчика, который выполняет сохранение записи). */
                const saveResult = await next.handle(request);
                /* После сохранения записи создает экземпляр сервиса системных значений из @creatio/sdk. */
                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*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

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

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

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

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

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

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Http Client Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Http Client Service откройте страницу Страница записи Http Client Service (Http Client Service form page).
  3. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Http Client Service (Http Client Service form page).
  4. Добавьте надпись курса BTC к USD.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Курс BTC к USD" ("BTC to USD exchange rate").
      • Стиль (Style) — выберите "Описание" ("Caption").
      • Цвет текста (Text color) — выберите серый цвет.
  5. Добавьте надпись, которая содержит значение курса BTC к USD.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Курс BTC к USD (значение)" ("BTC to USD exchange rate (value)").
      • Стиль (Style) — выберите "Обычный текст" ("Body text").
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

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

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

  1. Подключите сервис отправки HTTP-запросов sdk.HttpClientService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppHttpClientServ_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибут BtcToUsd, который хранит информацию о курсе биткоина к доллару.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит курс биткоина к доллару. */
            "BtcToUsd": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff привяжите свойство caption элемента BtcToUsdExchangeRateValue к атрибуту $BtcToUsd модели. Свойство caption отвечает за текст, который содержит элемент.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "BtcToUsdExchangeRateValue",
            "values": {
                ...,
                /* Привязка атрибута BtcToUsd к свойству caption. */
                "caption": "$BtcToUsd",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр http-клиента из @creatio/sdk.
    2. Укажите URL для получение текущего курса. Используйте внешний веб-сервис coindesk.com.
    3. Отправьте GET-запрос.
    4. Получите из тела ответа курс и запишите его в атрибут BtcToUsd.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandlerViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Создает экземпляр http-клиента из @creatio/sdk. */
                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*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

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

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

Реализовать пользовательский веб-компонент на основе элемента классической страницы Creatio
Средний

Пример реализован для приложения версии 8.0.2 и выше.

Пример. На вкладке Хронология контрагента (Account timeline) страницы записи пользовательского раздела Requests отображать историю работы выбранного контрагента. Вкладка является веб-компонентом. Веб-компонент реализовать на основе 7.Х вкладки Хронология (Timeline), которая отображается на странице контакта.

1. Создать приложение 

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Requests. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Requests откройте страницу Страница записи Requests (Requests form page).

    Поле Название (Name) по умолчанию добавлено на страницу Страница записи Requests (Requests form page).

  3. Добавьте поле, которое содержит контрагента.

    1. В рабочую область Freedom UI дизайнера добавьте новое поле типа Выпадающий список (Dropdown).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства поля:

      • Заголовок (Title) — "Контрагент" ("Account").
      • Код (на английском) (Code) — "UsrAccount".
      • Выбор объекта (Lookup) — выберите "Контрагент" ("Account").
      • Уберите признак Разрешить добавление новых значений (Enable adding new values).
  4. Добавьте вкладку, которая содержит историю работы выбранного контрагента.

    1. В рабочую область Freedom UI дизайнера добавьте новый элемент разметки Вкладки (Tabs).
    2. Удалите вкладку Вкладка 2 (Tab 2), которая по умолчанию добавлена на страницу Страница записи Requests (Requests form page).
    3. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойство вкладки Заголовок (Title) — "Хронология контрагента" ("Account timeline").

  5. На панели действий Freedom UI дизайнера нажмите Сохранить (Save).

2. Создать пользовательский веб-компонент 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.
  2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

  3. В дизайнере модуля заполните свойства схемы.

    • Код (Code) — "UsrTimelineModule".
    • Заголовок (Title) — "Модуль хронологии" ("Timeline module").
  4. Реализуйте пользовательский веб-компонент.

    1. В объявлении AMD-модуля в качестве зависимостей добавьте модули @creatio/sdk, Base7xViewElement и ckeditor-base.

      Зависимости AMD-модуля UsrTimelineModule
      /* Объявление AMD-модуля. */
      define("UsrTimelineModule", ["@creatio/sdk", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
          ...
      });
      
    2. Объявите класс UsrTimelineModule веб-компонента.

      Объявление класса UsrTimelineModule
      /* Объявление AMD-модуля. */
      define("UsrTimelineModule", ["@creatio/sdk", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
          /* Объявление класса. */
          class UsrTimelineModule extends Base7xViewElement {
              set primaryColumnValue(value) {
                  this._primaryColumnValue = value;
                  this._init();
              }
      
              get primaryColumnValue() {
                  return this._primaryColumnValue;
              }
      
              set entitySchemaName(value) {
                  this._entitySchemaName = value;
                  this._init();
              }
      
              get entitySchemaName() {
                  return this._entitySchemaName;
              }
      
              set cardSchemaName(value) {
                  this._cardSchemaName = value;
                  this._init();
              }
      
              get cardSchemaName() {
                  return this._entitySchemaName;
              }
      
              constructor() {
                  super("Timeline");
              }
      
              _init() {
                  if (this._primaryColumnValue && this._cardSchemaName && this._entitySchemaName) {
                      this.initContext(() => {
                          this._moduleId = this.sandbox.id + "_UsrTimelineModule";
                          this.sandbox.subscribe("GetColumnsValues", (attributeNames) => this._getColumnValues(attributeNames), null, [this._moduleId]);
                          this.sandbox.subscribe("GetEntityInfo", () => this._getEntityInfo(), null, [this._moduleId]);
                          this._loadTimelineSchemaModule();
                      });
                  }
              }
      
              _loadTimelineSchemaModule() {
                  this._moduleId = this.sandbox.loadModule("BaseSchemaModuleV2", {
                      id: this._moduleId,
                      renderTo: this._renderTo,
                      instanceConfig: {
                          schemaName: "TimelineSchema",
                          isSchemaConfigInitialized: true,
                          useHistoryState: false,
                          showMask: true,
                          parameters: {
                              viewModelConfig: {
                                  "CardSchemaName": this._cardSchemaName,
                                  "ReferenceSchemaName": this._entitySchemaName,
                                  "InitialConfig": {
                                      "entities": []
                                  }
                              },
                          },
                      }
                  });
              }
      
              _getColumnValues(attributeNames) {
                  const values = {};
                  attributeNames?.forEach((attributeName) => {
                      switch (attributeName) {
                          case "Id":
                              values[attributeName] = this._primaryColumnValue?.value;
                              break;
                          case "Name":
                              values[attributeName] = this._primaryColumnValue?.displayValue;
                              break;
                          default: break;
                      }
                  });
                  return values;
              }
      
              _getEntityInfo() {
                  return {
                      entitySchemaName: this._entitySchemaName,
                      primaryColumnValue: this._primaryColumnValue?.value,
                      primaryDisplayColumnValue: this._primaryColumnValue?.displayValue
                  };
              }
      
              getMessages() {
                  const messages = super.getMessages();
                  return Object.assign(messages, {
                      "GetColumnsValues": {
                          mode: Terrasoft.MessageMode.PTP,
                          direction: Terrasoft.MessageDirectionType.SUBSCRIBE
                      },
                      "GetEntityInfo": {
                          mode: Terrasoft.MessageMode.PTP,
                          direction: Terrasoft.MessageDirectionType.SUBSCRIBE
                      }
                  });
              }
      
              disconnectedCallback() {
                  this.sandbox.unloadModule(this._moduleId, this._renderTo);
              }
          }
          ...
      });
      
    3. На странице зарегистрируйте веб-компонент UsrTimelineModule.

      Регистрация веб-компонента UsrTimelineModule
      /* Объявление AMD-модуля. */
      define("UsrTimelineModule", ["@creatio/sdk", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
          ...
          /* Регистрация веб-компонента. */
          customElements.define('usr-timeline', UsrTimelineModule);
          ...
      });
      
    4. Зарегистрируйте веб-компонент usr-timeline в качестве визуального элемента.

      Регистрация веб-компонента usr-timeline
      /* Объявление AMD-модуля. */
      define("UsrTimelineModule", ["@creatio/sdk", "Base7xViewElement", "ckeditor-base"], function (sdk, Base7xViewElement) {
          ...
          /* Регистрация веб-компонента в качестве визуального элемента. */
          sdk.registerViewElement({
              type: 'usr.Timeline',
              selector: 'usr-timeline',
              inputs: {
                  primaryColumnValue: {},
                  cardSchemaName: {},
                  entitySchemaName: {}
              }
          });
      });
      
    Полный исходный код схемы модуля
  5. На панели инструментов дизайнера модуля нажмите Сохранить (Save).

3. Добавить пользовательский веб-компонент на страницу Freedom UI 

  1. В разделе Конфигурация (Configuration) откройте схему UsrRequests_FormPage страницы Freedom UI Страница записи Requests (Requests form page).
  2. На панели действий Freedom UI дизайнера нажмите на кнопку . Открывается исходный код страницы Freedom UI.
  3. Добавьте пользовательский веб-компонент.

    1. В объявлении AMD-модуля в качестве зависимости добавьте модуль UsrTimelineModule пользовательского веб-компонента.

      Зависимости AMD-модуля UsrRequests_FormPage
      /* Объявление AMD-модуля. */
      define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["UsrTimelineModule"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
          ...
      });
      
    2. В секцию viewConfigDiff добавьте конфигурационный объект модуля UsrTimelineModule с пользовательским веб-компонентом.

      Секция viewConfigDiff
      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
          ...,
          {
              "operation": "insert",
              "name": "Timeline_qwerty",
              "values": {
                  "type": "usr.Timeline",
                  "layoutConfig": {
                      "column": 1,
                      "row": 1,
                      "colSpan": 12,
                      "rowSpan": 8
                  },
                  "primaryColumnValue": "$UsrAccount",
                  "cardSchemaName": "AccountPageV2",
                  "entitySchemaName": "Account"
              },
              "parentName": "GridContainer_qaocexw",
              "propertyName": "items",
              "index": 0
          },
          ...
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
      
      Полный исходный код схемы страницы
  4. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

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

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

  1. Перейдите на страницу приложения Requests и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Requests нажмите Добавить (New).
  3. В поле Название (Name) введите значение "Request's name".
  4. В поле Контрагент (Account) выберите контрагента (например, "Accom").

В результате выполнения примера на странице заявки отображается вкладка Хронология контрагента (Account timeline) выбранного контрагента "Accom".

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