Настроить деталь с полями

Сложный

Важно. При разработке детали с полями для продуктов линейки Financial Services Creatio используется схема BaseFieldsDetail пакета BaseFinance. Этот пакет присутствует только в продуктах линейки Financial Services Creatio.

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

  1. Cкачайте пакет sdkFieldsDetailPackage.
  2. Импортируйте пакет в пользовательское приложение. Для этого воспользуйтесь инструкцией, которая приведена в статье Перенести пакеты.
  3. Добавьте пакет sdkFieldsDetailPackage в зависимости пользовательского пакета.

Пример. Реализовать пользовательскую деталь Медицинские документы (Medical documents), которая содержит виртуальные поля Номер (Number) и Серия (Series). Добавить деталь на вкладку История (History) страницы физического лица. Значение, введенное в поле Номер (Number), не должно быть отрицательным. Названия полей детали отображать синим цветом.

1. Создать пользовательскую деталь 

  1. Создайте пользовательский пакет и установите его в качестве текущего. Подробнее читайте в статье Общие принципы работы с пакетами.
  2. Перейдите в дизайнер системы по кнопке .
  3. В блоке Настройка системы (System setup) перейдите по ссылке Мастер деталей (Detail wizard).

  4. Заполните свойства детали:

    • Заголовок (Title) — "Медицинские документы" ("Medical documents").

    • По какому объекту создать деталь? (How to create detail?) — выберите "Новому объекту" ("Create new object").

      Заполните свойства объекта:

      • Заголовок (Title) — "Медицинский документ" ("Medical document").
      • Код (Code) — "UsrMedDocument".

    После сохранения в конфигурации будут созданы:

    • Схема UsrMedDocument объекта детали.
    • Схема UsrSchemac6fd3fd0Detail модели представления реестра детали Медицинские документы (Medical documents).
    • Схема UsrUsrMedDocument4988cee4Page модели представления страницы записи детали Медицинские документы (Medical documents).
  5. Перейдите на вкладку Страница (Page) для настройки страницы записи детали.

  6. Настройте поля детали.

    1. Заполните свойства поля Contact типа Справочник (Lookup).

      1. Заголовок (Title) — "Физ. лицо" ("Contact").
      2. Код (Code) — "UsrContact".
      3. Установите признак Обязательное (Required).
      4. Справочник (Lookup) — выберите "Контакт" ("Contact").

    2. Заполните свойства поля Series типа Строка (String).

      1. Заголовок (Title) — "Серия" ("Series").
      2. Код (Code) — "UsrSeries".
      3. Длина строки (Text length) — выберите "Строка (50 символов)" ("Text (50 characters)").
      4. Установите признак Обязательное (Required).

    3. Заполните свойства поля Number типа Целое число (Integer).

      1. Заголовок (Title) — "Номер" ("Number").
      2. Код (Code) — "UsrNumber".
      3. Установите признак Обязательное (Required).
  7. При необходимости, измените расположение полей детали.
  8. На панели инструментов мастера деталей нажмите Сохранить (Save).

После сохранения в конфигурации будет модифицирована схема UsrUsrMedDocument4988cee4Page модели представления страницы записи детали Медицинские документы (Medical documents).

2. Настроить пользовательскую деталь 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, который был установлен в качестве текущего.
  2. Откройте схему UsrMedDocument объекта детали.

  3. В контекстном меню узла Колонки (Columns) структуры объекта удалите обязательную колонку [UsrName].

  4. На панели инструментов дизайнера объектов нажмите Опубликовать (Publish).
  5. Откройте схему UsrSchemac6fd3fd0Detail модели представления реестра детали Медицинские документы (Medical documents).

  6. На панели свойств нажмите кнопку и измените значение поля Родительский объект (Parent object) на BaseFieldsDetail. Схема BaseFieldsDetail реализует деталь с полями. По умолчанию в мастере деталей в качестве родительского объекта устанавливается базовая схема детали с реестром.

  7. В свойство methods схемы модели представления детали добавьте метод getDisplayColumns, который возвращает массив с названиями колонок, отображающихся как поля в детали.

    Исходный код схемы UsrSchemac6fd3fd0Detail представлен ниже.

    UsrSchemac6fd3fd0Detail
    define("UsrSchemac6fd3fd0Detail", [], function() {
    return {
        entitySchemaName: "UsrMedDocument",
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
        methods: {
            getDisplayColumns: function() {
                return ["UsrSeries", "UsrNumber"];
            }
        }
    };
});
  8. На панели инструментов дизайнера модуля нажмите Сохранить (Save).

3. Добавить деталь на страницу записи раздела 

  1. Перейдите в раздел Физ. лица (Contacts) и откройте страницу физического лица.
  2. На панели инструментов кликните Вид —> Открыть мастер раздела (View —> Open section wizard).
  3. В рабочей области мастера разделов перейдите на вкладку История (History) и нажмите кнопку Добавить деталь (New detail).

  4. Заполните настройки детали.

    • Деталь (Detail) — выберите "Медицинские документы" ("Medical documents"). Поля Заголовок (Title) и Код (на английском) (Code) заполнятся автоматически.

    • У которых колонка детали (Where detail column) — выберите "Физ. лицо" ("Contact").

      Значения остальных колонок оставьте без изменений.

  5. Нажмите Сохранить —> Мастер раздела —> Сохранить (Save —> Section wizard —> Save).

В результате деталь Медицинские документы (Medical documents) будет добавлена на вкладку История (History) страницы физического лица.

4. Добавить пользовательские стили детали 

Поскольку в схеме модели представления страницы детали невозможно задать стили для отображения, необходимо:

  1. Создать схему модуля, в которой определить стили.
  2. Добавить модуль со стилями в зависимости модуля детали.

1. Создать схему модуля 

  1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, который был установлен в качестве текущего.

  2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

  3. Заполните свойства схемы:

    • Код (Code) — "UsrMedDocumentRowViewModel".
    • Заголовок (Title) — "MedDocumentRowViewModel".

    Для применения заданных свойств нажмите Применить (Apply).

  4. В дизайнере схем добавьте исходный код. В исходном коде схемы создайте описание модуля и определите в нем класс Terrasoft.configuration.UsrMedDocumentRowViewModel, унаследованный от класса Terrasoft.BaseFieldRowViewModel.

    UsrMedDocumentRowViewModel
    define("UsrMedDocumentRowViewModel", ["BaseFieldRowViewModel"], function() {
    Ext.define("Terrasoft.configuration.UsrMedDocumentRowViewModel", {
        extend: "Terrasoft.BaseFieldRowViewModel",
        alternateClassName: "Terrasoft.UsrMedDocumentRowViewModel"
    });
    return Terrasoft.UsrMedDocumentRowViewModel;
});

  5. Перейдите в узел LESS структуры объекта и задайте необходимые стили отображения детали.

    Настройка стилей отображения детали
    .med-document-left-row-container {
    .t-label {
        color: blue;
    }
}
.field-detail-row {
    width: 100;
    display: inline-flex;
    margin-bottom: 10px;

    .field-detail-row-left {
        display: flex;
        flex-wrap: wrap;
        
        .control-width-15 {
            min-width: 300px;
            width: 50;
            margin-bottom: 5px;
        }
    }
    .field-detail-row-left.singlecolumn {
        width: 50%;
    }
}
  6. На панели инструментов дизайнера нажмите Сохранить (Save).

2. Модифицировать схему модели представления детали 

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

  1. Откройте схему UsrSchemac6fd3fd0Detail модели представления реестра детали Медицинские документы (Medical documents).
  2. В зависимости схемы UsrSchemac6fd3fd0Detail добавьте модуль UsrMedDocumentRowViewModel.

  3. В определение модуля схемы детали добавьте методы переопределения базовых CSS-классов стилей:

    • getRowViewModelClassName() — метод, который возвращает имя класса модели представления записи на детали.
    • getLeftRowContainerWrapClass() — метод, который возвращает массив строк с названиями CSS-классов, используемых для генерации представления контейнеров, содержащих подписи полей записей.

    Исходный код модифицированной схемы представлен ниже.

    UsrSchemac6fd3fd0Detail
    define("UsrSchemac6fd3fd0Detail", ["UsrMedDocumentRowViewModel", "css!UsrMedDocumentRowViewModel"], function() {
    return {
        entitySchemaName: "UsrMedDocument",
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        diff: /**SCHEMA_DIFF*/ [], /**SCHEMA_DIFF*/
        methods: {
            getDisplayColumns: function() {
                return ["UsrSeries", "UsrNumber"];
            },
            getRowViewModelClassName: function() {
                return "Terrasoft.UsrMedDocumentRowViewModel";
            },
            getLeftRowContainerWrapClass: function() {
                return ["med-document-left-row-container", "field-detail-row"];
            }
        }
    };
});
  4. На панели инструментов дизайнера нажмите Сохранить (Save).

В результате названия полей детали Медицинские документы (Medical documents), которая была добавлена на вкладку История (History) страницы физического лица, отображаются синим цветом.

5. Добавить валидацию к полю детали 

  1. Откройте схему UsrMedDocumentRowViewModel модуля.

  2. Добавьте локализуемую строку с сообщением о неверном значении поля Номер (Number).

    1. В контекстном меню узла Локализуемые строки (Localizable strings) нажмите кнопку .

    2. Заполните свойства локализуемой строки:

      • Код (Code) — "NumberMustBeGreaterThenZeroMessage".
      • Значение (Value) — "Number must be greater thаn zero" ("Введите номер больше нуля").
    3. Для добавления локализуемой строки нажмите Добавить (Add).
    4. В зависимости модуля UsrMedDocumentRowViewModel добавьте модуль ресурсов UsrMedDocumentRowViewModelResources. Это необходимо, чтобы значение локализуемой строки отобразилось во front-end части приложения.

  3. Добавьте логику работы валидации значения поля Номер (Number). Для этого реализуйте методы:

    • validateNumberMoreThenZero() — метод, который содержит логику валидации значения поля.
    • setValidationConfig() — метод, который связывает колонку [Number] и метод-валидатор validateNumberMoreThenZero().
    • init() — переопределенный базовый метод, в котором выполняется вызов базовой логики и метода setValidationConfig().

    Исходный код модифицированной схемы представлен ниже.

    UsrMedDocumentFieldsDetail
    define("UsrMedDocumentRowViewModel", ["BaseFieldRowViewModel", "UsrMedDocumentRowViewModelResources"],
function(resources) {
    Ext.define("Terrasoft.configuration.UsrMedDocumentRowViewModel", {
        extend: "Terrasoft.BaseFieldRowViewModel",
        alternateClassName: "Terrasoft.UsrMedDocumentRowViewModel",
        validateNumberMoreThenZero: function(columnValue) {
            var invalidMessage ="";
            if (columnValue < 0) {
                invalidMessage = resources.localizableStrings.NumberMustBeGreaterThenZeroMessage;
            }
            return {
                fullInvalidMessage: invalidMessage,
                invalidMessage: invalidMessage
            };
        },
        setValidationConfig: function() {
            this.addColumnValidator("UsrNumber", this.validateNumberMoreThenZero);
        },
        init: function() {
            this.callParent(arguments);
            this.setValidationConfig();
        }
    });
    return Terrasoft.UsrMedDocumentRowViewModel;
});
  4. На панели инструментов дизайнера нажмите Сохранить (Save).

В результате при вводе отрицательного значения в поле Номер (Number) отображается соответствующее предупреждение.

6. Сделать виртуальными поля детали 

  1. Откройте схему UsrSchemac6fd3fd0Detail модели представления реестра детали Медицинские документы (Medical documents).

  2. Добавьте реализацию метода useVirtualRecord().

    Исходный код модифицированной схемы представлен ниже.

    UsrSchemac6fd3fd0Detail
    define("UsrSchemac6fd3fd0Detail", ["UsrMedDocumentRowViewModel", "css!UsrMedDocumentRowViewModel"], function() {
    return {
        entitySchemaName: "UsrMedDocument",
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        diff: /**SCHEMA_DIFF*/ [], /**SCHEMA_DIFF*/
        methods: {
            getDisplayColumns: function() {
                return ["UsrSeries", "UsrNumber"];
            },
            getRowViewModelClassName: function() {
                return "Terrasoft.UsrMedDocumentRowViewModel";
            },
            getLeftRowContainerWrapClass: function() {
                return ["med-document-left-row-container", "field-detail-row"];
            },
            useVirtualRecord: function() {
                return true;
            }
        }
    };
});
  3. На панели инструментов дизайнера нажмите Сохранить (Save).

В результате при открытии вкладки История (History), которая содержит деталь Медицинские документы (Medical documents), отображается виртуальная запись.

Ресурсы
Пакет с реализацией примера для продуктов линейки Financial Services Creatio
Пакет с реализацией примера для CRM продуктов Creatio