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

Средний
PDF

Пример. Настроить условие отображения поля Количество доступных дней (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)).