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

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

Пример. Настроить обязательность заполнения поля [ Описание ] ([ 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")).

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