Creatio development guide

Добавление поля с изображением

Glossary Item Box

Общие сведения

Добавление на страницу редактирования поля с изображением (фото контакта, фото товара, логотип контрагента и т.д.) имеет определенные особенности:

  1. Колонка объекта, которая будет использоваться для поля с изображением должна иметь тип — "Ссылка на изображение". При этом ее обязательно необходимо указать в качестве системной колонки [Изображение] объекта.
  2. В коллекцию изображений схемы страницы редактирования необходимо добавить изображение по умолчанию.
  3. В массив diff схемы страницы редактирования поле с изображением добавляется с использованием вспомогательного контейнера-обертки с CSS-классом image-edit-container.
  4. Конфигурационный объект с настройками поля с изображением в свойстве values должен содержать свойства:
    • getSrcMethod — наименование метода, который получает изображение по ссылке;
    • onPhotoChange — наименование метода, который вызывается при изменении изображения;
    • readonly — свойство, которое определяет возможность редактирования (изменения, удаления) изображения;
    • generator — генератор элемента управления. Для поля с изображением необходимо указать ImageCustomGeneratorV2.generateCustomImageControl;
    • beforeFileSelected — метод, который вызывается перед вызовом диалогового окна выбора изображения.
  5.  В коллекцию методов схемы страницы редактирования необходимо добавить методы:
    • метод, который получает изображение по ссылке;
    • метод, который вызывается при изменении изображения;
    • метод, который сохраняет ссылку на измененное изображение в колонке объекта;
    • метод, который вызывается перед вызовом диалогового окна выбора изображения.

Описание кейса

Добавить поле с логотипом на страницу редактирования статьи базы знаний.

Алгоритм реализации кейса

1. Создать замещающий объект [Статья базы знаний]

Для этого необходимо выбрать пользовательский пакет и на вкладке [Схемы] выполнить пункт меню [Добавить] — [Замещающий объект] (рис. 1).

Рис. 1. — Создание замещающей схемы объекта

Для созданного объекта нужно указать в качестве родительского объект [Статья базы знаний]. При этом для него автоматически установятся все необходимые свойства (рис. 2).

Рис. 2. — Свойства  замещающей схемы объекта

2. Добавить в замещающий объект новую колонку [Логотип статьи базы знаний]

Для созданной колонки необходимо указать название "UsrLogo" и тип данных "Ссылка на изображение" (рис. 3.).

Рис. 3. — Добавление пользовательской колонки в замещающий объект

Далее необходимо обязательно указать созданную колонку в качестве системной колонки [Изображение] объекта (рис. 4).

Рис. 4. — Установка созданной колонки в качестве системной

К СВЕДЕНИЮ

Для отображения всех свойств объекта необходимо перейти в режим расширенного отображения свойств объекта. Подробно о всех возможностях дизайнера объектов рассказывается в статье "Дизайнер объектов".

После установки всех свойства объекта схему объекта необходимо сохранить и опубликовать.

3. Создать замещающий клиентский модуль страницы редактирования контрагента

Необходимо создать замещающий клиентский модуль, в котором в качестве родительского объекта указать схему KnowledgeBasePageV2 (рис. 5).

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

Рис. 5. — Свойства замещающей страницы редактирования

4. Добавить изображение по умолчанию в ресурсы [Images] схемы страницы редактирования

Для этого, кликнув правой кнопкой по узлу структуры [Images], нужно выбрать команду [Добавить] (рис. 6).

Рис. 6. — Добавление в ресурсы схемы изображения по умолчанию

Для созданного изображения в качестве названия и подписи указать значение "DefaultLogo" (рис. 7). В поле [Изображение] нужно выбрать из файловой системы файл с изображением по умолчанию. В этом примере используется изображение, показанное на рисунке 8.

Рис. 7. — Свойства ресурса схемы

Рис. 8. — Изображение по умолчанию для статьи базы знаний

 

5. Настроить визуальное отображение поля с логотипом на странице редактирования

Поле с логотипом должно быть размещено в верхней части страницы редактирования контрагента. В базовой реализации данной схемы поля расположены таким образом, что добавление логотипа может нарушить интерфейс страницы. Поэтому, кроме размещения нового поля, необходимо дополнительно поменять расположение существующих полей.

Для этого нужно в свойстве diff модели представления в массив добавить конфигурационный объект поля с логотипом с необходимыми параметрами, а также описать модификации для существующих в верхней части страницы полей: [Name], [ModifiedBy] и [Type].

Поле с изображением добавляется на страницу с использованием вспомогательного контейнера-обертки PhotoContainer с классом ["image-edit-container"].

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

6. В коллекцию методов модели представления страницы добавить реализацию методов:

  • getPhotoSrcMethod() — метод, который получает изображение по ссылке;
  • beforePhotoFileSelected() — метод, который вызывается перед вызовом диалогового окна выбора изображения;
  • onPhotoChange() — метод, который вызывается при изменении изображения;
  • onPhotoUploaded() — метод, который сохраняет ссылку на измененное изображение в колонке объекта.

Полностью исходный код замещающей схемы страницы редактирования:

define("KnowledgeBasePageV2", ["KnowledgeBasePageV2Resources", "ConfigurationConstants"],
    function(resources, ConfigurationConstants) {
        return {
            // Название схемы объекта страницы редактирования.
            entitySchemaName: "KnowledgeBase",
            // Коллекция методов модели представления страницы редактирования.
            methods: {
                // Вызывается перед вызовом диалогового окна выбора изображения.
                beforePhotoFileSelected: function() {
                    return true;
                },
                // Возвращает URL логотипа статьи по ссылке, сохраненной в объекте.
                getPhotoSrcMethod: function() {
                    // Получеие ссылки на изображение из колонки объекта.
                    var imageColumnValue = this.get("UsrLogo");
                    // Если ссылка установлена, то метод возвращает url файла с изображением.
                    if (imageColumnValue) {
                        return this.getSchemaImageUrl(imageColumnValue);
                    }
                    // Если не ссылка установлена, то возвращает изображение по умолчанию.
                    return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DefaultLogo"));
                },
                // Обрабатывает изменение изображения. В качестве параметра принимает файл с изображением.
                onPhotoChange: function(photo) {
                    if (!photo) {
                        this.set("UsrLogo", null);
                        return;
                    }
                    // Выполняется загрузка файла в базу данных. По окончании загрузки вызывается метод, который
                    // сохраняет ссылку на измененное изображение в колонке [UsrLogo] объекта [KnowledgeBase].
                    this.Terrasoft.ImageApi.upload({
                        file: photo,
                        onComplete: this.onPhotoUploaded,
                        onError: this.Terrasoft.emptyFn,
                        scope: this
                    });
                },
                // Сохраняет ссылку на измененное изображение. В качестве параметра передается 
                // 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*/
        };
    });

После сохранения схемы и обновления веб-страницы системы с удалением кэша, на странице редактирования контрагента появится изображение логотипа по умолчанию (рис. 9). При наведении курсора мыши на изображение, отобразится меню действий, с помощью которого можно либо удалить изображение, либо установить новое для определенной статьи базы знаний (рис. 10).

Рис. 9. — Логотип по умолчанию

Рис. 10. — Пользовательский логотип

 

© Terrasoft 2002-2016.

Был ли данный материал полезен?

Как можно улучшить эту статью?