Вставить элемент PhotoContainer на новый Тип записи

Доброго дня!
В стандартном типе(когда еще не создавал своих) на карточке Контакта был такой элемент: PhotoContainer.
При нового типа его вставить с мастера разделов нельзя.
Начальство очень хочет. Как можно его вставить?
Я еще новичок, поэтому буду очень рад если ответите подробно как сделать.

Нравится

12 комментариев

Здравствуйте!

Пример, как создать поле, в которое можно вставить фото:

Этот кусок кода необходимо вставлять в секцию diff в замещающий клиентский модуль схемы карточки или новый созданный модуль.

{

"operation": "insert",

"name": "PhotoContainer",

"values": {

"itemType": 7,

"wrapClass": [

"image-edit-container"

],

"layout": {

"column": 0,

"row": 0,

"rowSpan": 3,

"colSpan": 2

},

"items": []

},

"parentName": "Header",

"propertyName": "items",

"index": 7

},

{

"operation": "insert",

"name": "Photo",

"values": {

"getSrcMethod": "getSrcMethod",

"onPhotoChange": "onPhotoChange",

"beforeFileSelected": "beforeFileSelected",

"readonly": false,

"defaultImage": "http://PHOTO_PHOTO_PHOTO.PHOTO",

"generator": "ImageCustomGeneratorV2.generateCustomImageControl"

},

"parentName": "PhotoContainer",

"propertyName": "items",

"index": 0

}

methods: {

getSrcMethod: function() {

var primaryImageColumnValue = this.get(this.primaryImageColumnName);

if (primaryImageColumnValue) {

return this.getSchemaImageUrl(primaryImageColumnValue);

}

return this.Terrasoft.ImageUrlBuilder.getUrl(resources.localizableImages.DefaultPhoto);

},

onPhotoChange: function(photo) {

if (!photo) {

this.set(this.primaryImageColumnName, null);

return;

}

this.Terrasoft.ImageApi.upload({

file: photo,

onComplete: this.onPhotoUploaded,

onError: this.Terrasoft.emptyFn,

scope: this

});

},

onPhotoUploaded: function(imageId) {

var imageData = {

value: imageId,

displayValue: "Photo"

};

this.set(this.primaryImageColumnName, imageData);

},

У меня в конфигурации есть:
Схема страницы редактирования раздела "Контакты" с типом "Физическое лицо"

Это сюда вставлять?

пока удалил

Нашел статью: ВОТ
Где все описано. Столкнулся вот с чем:
У меня для Контакта есть 6 страниц(схем), они сгенерились когда я создавал типы.
Для одной из них(Схема страницы редактирования раздела "Контакты" с типом "Физическое лицо"), мне надо вывести фото.
Как я понял, надо создать замещающую схему страницы, так как при сохранении чего нить на оригинале вылазят ошибки JS на каждую строку. Но столкнулся вот с чем. По стандарту bpm создал схемы в пакете Custom, и создать в этом же пакете замещающую страницу я не могу(пишет нельзя создать в одном пакете). Я создал новый пакет, но не могу его унаследовать от Custom, а ведь там мои схемы.
Как мне поступить?

Плиз хэлп!

Виктиор, пакет Custom, как раз содержит в себе все замещающие схемы и объекты. Именно в них можно вносить корректировки.

"Липатов Юрий Сергеевич" написал:

Виктиор, пакет Custom, как раз содержит в себе все замещающие схемы и объекты. Именно в них можно вносить корректировки.


Тогда очень странно. При попытке сохранить схему, вываливаются js ошибки на все строки.
вот скрин: картинко
Кругами обвел вставленый код и ошибки.

Виктор, это предупреждения.
Вы проверили функциональность кода, он работает?

В данном случае я сделал чисто для примера.
Не знал что error это предупреждение)
И так я сделал все по мануалу.
При попытке загрузить новое фото ничего не происходит. Висит дальше дефолтовая картинка.
Прилаживаю скриншоты. И код.
1
2

define('UsrContactType3Page', ['UsrContactType3PageResources', 'GeneralDetails'],
function(resources, GeneralDetails) {
	return {
		entitySchemaName: 'Contact',
		details: /**SCHEMA_DETAILS*/{
	"PropertyCon": {
		"schemaName": "PropertyConDetail",
		"entitySchemaName": "PropertyCon",
		"filter": {
			"detailColumn": "Contact",
			"masterColumn": "Id"
		}
	}
}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
	{
		"operation": "insert",
		"name": "Name",
		"values": {
			"layout": {
				"column": 0,
				"row": 0,
				"colSpan": 12,
				"rowSpan": 1
			}
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 0
	},
	{
		"operation": "insert",
		"name": "Type",
		"values": {
			"layout": {
				"column": 12,
				"row": 1,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Type",
			"caption": {
				"bindTo": "Resources.Strings.TypeCaption"
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 1
	},
	{
		"operation": "insert",
		"name": "Owner",
		"values": {
			"layout": {
				"column": 12,
				"row": 0,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Owner",
			"caption": {
				"bindTo": "Resources.Strings.OwnerCaption"
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 2
	},
	{
		"operation": "insert",
		"name": "Job",
		"values": {
			"layout": {
				"column": 0,
				"row": 1,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Job",
			"caption": {
				"bindTo": "Resources.Strings.JobCaption"
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 3
	},
	{
		"operation": "insert",
		"name": "UsrDepartment",
		"values": {
			"layout": {
				"column": 0,
				"row": 2,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrDepartment",
			"caption": {
				"bindTo": "Resources.Strings.UsrDepartmentCaption"
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 4
	},
	{
		"operation": "insert",
		"name": "UsrCustomerTypeField",
		"values": {
			"layout": {
				"column": 12,
				"row": 2,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrCustomerTypeField",
			"caption": {
				"bindTo": "Resources.Strings.CustomerTypeFieldCaption"
			},
			"textSize": 0,
			"contentType": 3,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 5
	},
	{
		"operation": "insert",
		"name": "UsrStatus",
		"values": {
			"layout": {
				"column": 12,
				"row": 3,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrStatus",
			"caption": {
				"bindTo": "Resources.Strings.StatusCaption"
			},
			"textSize": 0,
			"contentType": 3,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 6
	},
	{
		"operation": "insert",
		"name": "DescMain",
		"values": {
			"layout": {
				"column": 0,
				"row": 3,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "DescMain",
			"caption": {
				"bindTo": "Resources.Strings.DescMainCaption"
			},
			"textSize": 0,
			"contentType": 0,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 7
	},
	{
		"operation": "insert",
		"name": "Account",
		"values": {
			"layout": {
				"column": 0,
				"row": 4,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Account",
			"caption": {
				"bindTo": "Resources.Strings.AccountCaption"
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 8
	},
	{
		"operation": "insert",
		"name": "PersonContactId",
		"values": {
			"layout": {
				"column": 12,
				"row": 4,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "PersonContactId",
			"caption": {
				"bindTo": "Resources.Strings.PersonContactIdCaption"
			},
			"textSize": 0,
			"contentType": 1,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 9
	},
	{
		"operation": "insert",
		"name": "GeneralInfoTab",
		"values": {
			"caption": {
				"bindTo": "Resources.Strings.GeneralInfoTabCaption"
			},
			"items": []
		},
		"parentName": "Tabs",
		"propertyName": "tabs",
		"index": 0
	},
	{
		"operation": "insert",
		"name": "group",
		"values": {
			"itemType": 15,
			"caption": {
				"bindTo": "Resources.Strings.groupCaption"
			},
			"items": [],
			"controlConfig": {
				"collapsed": false
			}
		},
		"parentName": "GeneralInfoTab",
		"propertyName": "items",
		"index": 0
	},
	{
		"operation": "insert",
		"name": "group_gridLayout",
		"values": {
			"itemType": 0,
			"items": []
		},
		"parentName": "group",
		"propertyName": "items",
		"index": 0
	},
	{
		"operation": "insert",
		"name": "MobilePhone",
		"values": {
			"layout": {
				"column": 0,
				"row": 0,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "MobilePhone",
			"caption": {
				"bindTo": "Resources.Strings.MobilePhoneCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 0
	},
	{
		"operation": "insert",
		"name": "Email",
		"values": {
			"layout": {
				"column": 12,
				"row": 0,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Email",
			"caption": {
				"bindTo": "Resources.Strings.EmailCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 1
	},
	{
		"operation": "insert",
		"name": "Phone",
		"values": {
			"layout": {
				"column": 0,
				"row": 1,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "Phone",
			"caption": {
				"bindTo": "Resources.Strings.PhoneCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 2
	},
	{
		"operation": "insert",
		"name": "UsrOtherEmail",
		"values": {
			"layout": {
				"column": 12,
				"row": 1,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrOtherEmail",
			"caption": {
				"bindTo": "Resources.Strings.OtherEmailCaption"
			},
			"textSize": 0,
			"contentType": 1,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 3
	},
	{
		"operation": "insert",
		"name": "UsrHomePhone",
		"values": {
			"layout": {
				"column": 0,
				"row": 2,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrHomePhone",
			"caption": {
				"bindTo": "Resources.Strings.HomePhoneCaption"
			},
			"textSize": 0,
			"contentType": 1,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 4
	},
	{
		"operation": "insert",
		"name": "BirthDate",
		"values": {
			"layout": {
				"column": 12,
				"row": 2,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "BirthDate",
			"caption": {
				"bindTo": "Resources.Strings.BirthDateCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 5
	},
	{
		"operation": "insert",
		"name": "UsrOtherPhone",
		"values": {
			"layout": {
				"column": 0,
				"row": 3,
				"colSpan": 12,
				"rowSpan": 1
			},
			"bindTo": "UsrOtherPhone",
			"caption": {
				"bindTo": "Resources.Strings.OtherPhoneCaption"
			},
			"textSize": 0,
			"contentType": 1,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 6
	},
	{
		"operation": "insert",
		"name": "DoNotUseEmail",
		"values": {
			"layout": {
				"column": 12,
				"row": 3,
				"colSpan": 6,
				"rowSpan": 1
			},
			"bindTo": "DoNotUseEmail",
			"caption": {
				"bindTo": "Resources.Strings.DoNotUseEmailCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 7
	},
	{
		"operation": "insert",
		"name": "DoNotUseCall",
		"values": {
			"layout": {
				"column": 18,
				"row": 3,
				"colSpan": 6,
				"rowSpan": 1
			},
			"bindTo": "DoNotUseCall",
			"caption": {
				"bindTo": "Resources.Strings.DoNotUseCallCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 8
	},
	{
		"operation": "insert",
		"name": "UsrRegAdress",
		"values": {
			"layout": {
				"column": 0,
				"row": 4,
				"colSpan": 24,
				"rowSpan": 1
			},
			"bindTo": "UsrRegAdress",
			"caption": {
				"bindTo": "Resources.Strings.RegAdressCaption"
			},
			"textSize": 0,
			"contentType": 1,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 9
	},
	{
		"operation": "insert",
		"name": "Address",
		"values": {
			"layout": {
				"column": 0,
				"row": 5,
				"colSpan": 24,
				"rowSpan": 1
			},
			"bindTo": "Address",
			"caption": {
				"bindTo": "Resources.Strings.AddressCaption"
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 10
	},
	{
		"operation": "insert",
		"name": "UsrCurrentLoans",
		"values": {
			"layout": {
				"column": 0,
				"row": 6,
				"colSpan": 24,
				"rowSpan": 1
			},
			"bindTo": "UsrCurrentLoans",
			"caption": {
				"bindTo": "Resources.Strings.CurrentLoansCaption"
			},
			"textSize": 0,
			"contentType": 0,
			"labelConfig": {
				"visible": true
			},
			"enabled": true
		},
		"parentName": "group_gridLayout",
		"propertyName": "items",
		"index": 11
	},
	{
		"operation": "insert",
		"name": "PropertyCon",
		"values": {
			"itemType": 2
		},
		"parentName": "GeneralInfoTab",
		"propertyName": "items",
		"index": 1
	},
                // Контейнер-обертка, в который будет размещен логотип контрагента.
                {
                    "operation": "insert",
                    "parentName": "Header",
                    "propertyName": "items",
                    "name": "PhotoContainer",
                    "values": {
                        // Тип элемента - контейнер.
                        "itemType": Terrasoft.ViewItemType.CONTAINER,
                        "wrapClass": ["image-edit-container"],
                        "layout": { "column": 0, "row": 0, "rowSpan": 4, "colSpan": 4 },
                        "items": []
                    }
                },
                // Поле [Picture] — поле с логотипом контрагента.
                {
                    "operation": "insert",
                    "parentName": "PhotoContainer",
                    "propertyName": "items",
                    "name": "Picture",
                    "values": {
                        // Наименование метода, который получает изображение по ссылке.
                        "getSrcMethod": "getAccountImage",
                        // Наименование метода, который вызывается при изменении изображения.
                        "onPhotoChange": "onPhotoChange",
                        // Свойство, которое определяет возможность редактирования (изменения, удаления) изображения.
                        "readonly": false,
                        // Изображение, которое будет отображаться по умолчанию.
                        "defaultImage": Terrasoft.ImageUrlBuilder.getUrl(resources.localizableImages.DefaultPhoto),
                        // Генератор элемента управления.
                        "generator": "ImageCustomGeneratorV2.generateCustomImageControl"
                    }
                }
]/**SCHEMA_DIFF*/,
		attributes: {},
		methods: {
                // Возвращает url логотипа контрагента по ссылке, сохраненной в объекте.
                getAccountImage: function () {
                    // Получаем ссылку на изображение из колонки объекта.
                    var imageColumnValue = this.get("PhotoClient");
                    // Если ссылка установлена, то возвращает url файла с изображением.
                    // Если нет, то вызывает метод, возвращающий изображение по умолчанию.
                    if (imageColumnValue) {
                        return this.getSchemaImageUrl(imageColumnValue);
                    }
                    return this.getAccountDefaultImage();
                },
                // Возвращает url логотипа контрагента по умолчанию.
                getAccountDefaultImage: function () {
                    return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DefaultPhoto"));
                },
                // Обрабатывает изменение логотипа контрагента. В качестве параметра принимает файл с изображением.
                onPhotoChange: function (photo) {
                    if (!photo) {
                        this.set("PhotoClient", null);
                        return;
                    }
                    // Выполняется загрузка файла в базу данных. По окончании загрузки вызывается метод, который
                    // сохраняет ссылку на измененное изображение в колонке [Логотип] объекта [Контрагент].
                    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("PhotoClient", imageData);
                }
 
		},
		rules: {},
		userCode: {}
	};
});

Виктор, для раздела «Контакты» загрузка фото уже было ранее реализовано. См. «ContactPageV2». Делайте аналогично и все получится.
Статья на SDK рассчитана на другие разделы, кроме раздела контакты, так как в других разделах похожего функционала просто нет.
Для раздела «Контакты» тут есть свои нюансы.

Например, убедитесь, что в колонке «Изображение» объекта «Контакт» выбрана пользовательская колонка (например, "PhotoClient"), а не базовая. Должно помочь. См. пикчу

Спасибо!

Показать все комментарии