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

Средний
PDF

Пример реализован на 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")).