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

Сложный
PDF

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

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).

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