Добавить поле с изображением на страницу записи

Сложный

Пример. Добавить поле с изображением на страницу статьи базы знаний. Использовать изображение, которое приведено ниже.

1. Создать схему замещающего объекта 

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

  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающий объект (Add —> Replacing object).

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

    • Код (Code) — "KnowledgeBase".
    • Заголовок (Title) — "Статья базы знаний" ("Knowledge base article").
    • Родительский объект (Parent object) — выберите "KnowledgeBase".

  4. В схему добавьте колонку.

    1. В контекстном меню узла Колонки (Columns) структуры объекта нажмите add_button.

    2. В выпадающем меню нажмите Другие —> Ссылка на изображение (Other —> Image Link).

    3. Заполните свойства добавляемой колонки.

      • Код (Code) — "UsrLogo".
      • Заголовок (Title) — "Логотип статьи базы знаний" ("Knowledge base article logo").
  5. На панели инструментов дизайнера объектов нажмите Сохранить (Save), а затем Опубликовать (Publish).

2. Создать схему замещающей модели представления страницы статьи базы знаний 

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

  2. На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).

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

    • Код (Code) — "KnowledgeBasePageV2".
    • Заголовок (Title) — "Knowledge base edit page".
    • Родительский объект (Parent object) — выберите "KnowledgeBasePageV2".

  4. Добавьте изображение.

    1. В контекстном меню узла Изображения (Images) нажмите кнопку scr_add_button.png.

    2. Заполните свойства изображения.

      • Код (Code) — "DefaultLogo".
      • Изображение (Image) — выберите файл с изображением.
    3. Для добавления изображения нажмите Добавить (Add).
  5. В объявлении класса модели представления в качестве зависимостей добавьте модули KnowledgeBasePageV2Resources и ConfigurationConstants.

  6. Настройте расположение поля с изображением.

    Поле с изображением планируется разместить в верхней части страницы статьи базы знаний. Добавление поля с изображением может нарушить расположение полей базовой страницы. Чтобы этого избежать, кроме размещения поля с изображением, необходимо дополнительно изменить расположение существующих полей, которые находятся в верхней части страницы. Это поля Название (Name), Тип (Type), Изменил (Modified By).

    1. В свойстве methods реализуйте методы:

      • getPhotoSrcMethod() — получает изображение по ссылке.
      • beforePhotoFileSelected() — вызывается перед открытием диалогового окна выбора изображения.
      • onPhotoChange() — вызывается при изменении изображения.
      • onPhotoUploaded() — сохраняет ссылку на измененное изображение в колонке объекта.
    2. В массив модификаций diff добавьте конфигурационный объект с настройками расположения поля с изображением и существующих полей на странице. Поле с изображением добавляется на страницу с использованием вспомогательного контейнера-обертки PhotoContainer с классом "image-edit-container".

    Исходный код схемы замещающей модели представления страницы статьи базы знаний представлен ниже.

    KnowledgeBasePageV2
    define("KnowledgeBasePageV2", ["KnowledgeBasePageV2Resources", "ConfigurationConstants"], function(resources, ConfigurationConstants) {
    return {
        /* Название схемы объекта страницы записи. */
        entitySchemaName: "KnowledgeBase",
        /* Методы модели представления страницы раздела. */
        methods: {
            /* Вызывается перед открытием диалогового окна выбора изображения. */
            beforePhotoFileSelected: function() {
                return true;
            },
            /* Получает изображение по ссылке. */
            getPhotoSrcMethod: function() {
                /* Получает ссылку на изображение из колонки объекта. */
                var imageColumnValue = this.get("UsrLogo");
                /* Если ссылка установлена, то метод возвращает url файла с изображением. */
                if (imageColumnValue) {
                    return this.getSchemaImageUrl(imageColumnValue);
                }
                /* Если ссылка не установлена, то возвращает изображение по умолчанию. */
                return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DefaultLogo"));
            },
            /* Обрабатывает изменение изображения.
            photo — файл с изображением. */
            onPhotoChange: function(photo) {
                if (!photo) {
                    this.set("UsrLogo", null);
                    return;
                }
                /* Выполняет загрузку файла в базу данных. По окончании загрузки вызывается onPhotoUploaded. */
                this.Terrasoft.ImageApi.upload({
                    file: photo,
                    onComplete: this.onPhotoUploaded,
                    onError: this.Terrasoft.emptyFn,
                    scope: this
                });
            },
            /* Сохраняет ссылку на измененное изображение.
            imageId — Id сохраненного файла из базы данных. */
            onPhotoUploaded: function(imageId) {
                var imageData = {
                    value: imageId,
                    displayValue: "Image"
                };
                /* Колонке изображения присваивается ссылка на изображение. */
                this.set("UsrLogo", imageData);
            }
        },
        /* Отображение поля на странице раздела. */
        diff: /**SCHEMA_DIFF*/[
            /* Метаданные для добавления на страницу записи пользовательского поля с изображением. */
            {
                /* Выполняется операция добавления элемента на страницу. */
                "operation": "insert",
                /* Мета-имя родительского контейнера, в который добавляется поле. */
                "parentName": "Header",
                /* Изображение добавляется в коллекцию элементов родительского элемента. */
                "propertyName": "items",
                /* Мета-имя добавляемого изображения. */
                "name": "PhotoContainer",
                /* Свойства, передаваемые в конструктор элемента. */
                "values": {
                    /* Тип добавляемого элемента — контейнер. */
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    /* Имя CSS класса. */
                    "wrapClass": ["image-edit-container"],
                    /* Настройка расположения изображения. */
                    "layout": { 
                        /* Номер столбца. */
                        "column": 0, 
                        /* Номер строки. */
                        "row": 0, 
                        /* Диапазон занимаемых строк. */
                        "rowSpan": 3, 
                        /* Диапазон занимаемых столбцов. */
                        "colSpan": 3 
                    },
                    /* Массив дочерних элементов. */
                    "items": []
                }
            },
            /* Поле [UsrLogo] — поле с логотипом контрагента. */
            {
                "operation": "insert",
                "parentName": "PhotoContainer",
                "propertyName": "items",
                "name": "UsrLogo",
                "values": {
                    /* Метод, который получает изображение по ссылке. */
                    "getSrcMethod": "getPhotoSrcMethod",
                    /* Метод, который вызывается при изменении изображения. */
                    "onPhotoChange": "onPhotoChange",
                    /* Метод, который вызывается перед вызовом диалогового окна выбора изображения. */
                    "beforeFileSelected": "beforePhotoFileSelected",
                    /* Свойство, которое определяет возможность редактирования изображения. */
                    "readonly": false,
                    /* View-генератор элемента управления. */
                    "generator": "ImageCustomGeneratorV2.generateCustomImageControl"
                }
            },
            /* Изменение расположения поля [Name]. */
            {
                /* Выполняется операция изменения существующего элемента. */
                "operation": "merge",
                "name": "Name",
                "parentName": "Header",
                "propertyName": "items",
                "values": {
                    "bindTo": "Name",
                    "layout": {
                        "column": 3,
                        "row": 0,
                        "colSpan": 20
                    }
                }
            },
            /* Изменение расположения поля [ModifiedBy]. */
            {
                "operation": "merge",
                "name": "ModifiedBy",
                "parentName": "Header",
                "propertyName": "items",
                "values": {
                    "bindTo": "ModifiedBy",
                    "layout": {
                        "column": 3,
                        "row": 2,
                        "colSpan": 20
                    }
                }
            },
            /* Изменение расположения поля [Type]. */
            {
                "operation": "merge",
                "name": "Type",
                "parentName": "Header",
                "propertyName": "items",
                "values": {
                    "bindTo": "Type",
                    "layout": {
                        "column": 3,
                        "row": 1,
                        "colSpan": 20
                    },
                    "contentType": Terrasoft.ContentType.ENUM
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});
  7. На панели инструментов дизайнера нажмите Сохранить (Save).

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

Чтобы посмотреть результат выполнения примера, обновите страницу раздела База знаний (Knowledge base).

В результате выполнения примера на страницу статьи базы знаний добавлено поле с изображением. Изображение можно изменить или удалить.

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