Images | Community Creatio

Question

11:16 Oct 14, 2022

Hello community,

I have a case where based on a lookup value, I need to display an image. The code is working and logging values as expected but the image does not seem to load. When inspect HTML I find the following

[object Object]" title="">

and the error

https://dev2-is-il.creatio.com/0/Nui/[object%20Object] 404

However my method is returning the correct URL

https://dev2-is-il.creatio.com/0/conf/content/img/UsrRequests1Page-Dril…

Please find the code below

Diff

{
				"operation": "insert",
				"name": "UsrProjectCategoryCaption",
				"values": {
					"itemType": 6,
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					},
					"visible":  {
						"bindTo": "IsPrjCatIconContVisible"
					},
					"caption": {
						"bindTo": "Resources.Strings.ProjectCategoryCaption"
					}
				},
				"parentName": "ProfileContainer",
				"propertyName": "items",
				"index": 0
			},
			{
				"operation": "insert",
				"name": "AccountPhotoContainer",
				"values": {
					"itemType": 7,
					"wrapClass": [
						"image-edit-container"
					],
					"items": [],
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 1
					},
					"visible":  {
						"bindTo": "IsPrjCatIconContVisible"
					},
				},
				"parentName": "ProfileContainer",
				"propertyName": "items",
				"index": 1
			},
			{
				"operation": "insert",
				"name": "Photo",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					},
					"getSrcMethod": "getPhotoSrcMethod",
					"readonly": true,
					/*"defaultImage": {
								"bindTo": "getPhotoSrcMethod"
					},*/
					"generator": "ImageCustomGeneratorV2.generateCustomImageControl"
				},
				"parentName": "AccountPhotoContainer",
				"propertyName": "items",
				"index": 0
			},

Methods

getPhotoSrcMethod:function()
			{
 
			    var reqId=this.get("Id"); 
				this.getProjectCategory(reqId, function(result) {
 
					 this.console.log("cbdone:" + result);
					 if(result.pjtCatId==="5f43b0aa-f7f6-4ffa-bc6d-15cf1fd581e0")
							{
								this.console.log("getIcon NationalPriorityImage");
								this.set("Resources.Strings.ProjectCategoryCaption", result.pjtCatName);
								this.set("IsPrjCatIconContVisible", true);
								this.console.log("IsPrjCatIconContVisible true");
								//class="ts-image-edit-full-size-element ts-image-style-rectangular"
 
						 		return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.NationalPriorityImage"));
							}
						else if(result.pjtCatId==="08135814-ecdb-48ed-adea-5d4e5f1b0129")
							{
								this.console.log("getIcon BicyclePathsIcon");
								this.set("Resources.Strings.ProjectCategoryCaption", result.pjtCatName);
								this.set("IsPrjCatIconContVisible", true);
 
								return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.BicyclePathsIcon"));
							}
						else if(result.pjtCatId==="a1a8e24d-6c6c-49ea-bb3c-5d76da662a27")
							{			   
								this.console.log("getIcon DrillingExplorationIcon");
								this.set("Resources.Strings.ProjectCategoryCaption", result.pjtCatName);
								this.set("IsPrjCatIconContVisible", true);
								this.console.log(this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DrillingExplorationIcon")));
							//	return this.getSchemaImageUrl(this.get("Resources.Images.DrillingExplorationIcon"));
								return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DrillingExplorationIcon"));
 
							}
						else if(result.pjtCatId==="18588952-b4bf-4477-a614-a15a103adc28")
							{
								this.console.log("getIcon DrillimgAndNPIcon");
								this.set("Resources.Strings.ProjectCategoryCaption", result.pjtCatName);
								this.set("IsPrjCatIconContVisible", true);
 
								return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DrillingAndNPIcon"));
							}
						else
							{
								this.set("IsPrjCatIconContVisible", false);
								this.console.log("IsPrjCatIconContVisible is false due to regular prj 2");
								return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.AnalyticsDataIcon"));
 
							}
 
                        },this);
 
 
			},
			getProjectCategory :function(reqId,callback,scope)
			{
				var result;
				var esq = Ext.create("Terrasoft.EntitySchemaQuery", {
					rootSchemaName: "UsrRequests"
				});
				esq.addColumn("Id");
				esq.addColumn("UsrProject.UsrProjectCategory.Id","CatId");
				esq.addColumn("UsrProject.UsrProjectCategory.Name","CatName");
				esq.filters.add("ProjectFilter", Terrasoft.createColumnFilterWithParameter(
						Terrasoft.ComparisonType.EQUAL, "Id",reqId));
				esq.getEntityCollection(function(result) {
 
					var resultValue = result.collection.collection.items;
					var pjtCatId = resultValue[0].values.CatId;
					var pjtCatName = resultValue[0].values.CatName;
					this.console.log("pjtCatId:" + pjtCatId);
					this.console.log("pjtCatName:" + pjtCatName);
					result ={ success:true,
							  pjtCatId : pjtCatId,
							  pjtCatName:pjtCatName
							};
					callback.call(scope || this, result);
				},this);
			},

6 comments

Best reply

Ryan Farley

20:16 Oct 17, 2022

Shivani Lakshman,

Rather than bind the image element in the diff to the function (which won't work since the ESQ in the function is asynchronous), bind it to an attribute, then set the attribute in the asynchronous function (and just call the function in the onEntityInitialized).

Example:

First add the attribute:

"MyImageAttr": {
	dataValueType: Terrasoft.DataValueType.TEXT,
	type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
	value: ""
}

Then, create the function that retrieves the image using the ESQ:

function getImage() {
	// do the ESQ to get the image, then simply set in attribute
	this.set("MyImageAttr", Terrasoft.ImageUrlBuilder.getUrl(imageConfig));
}
 
// also call image from onEntityInitialized so it runs when the record is loaded
function onEntityInitialized() {
	this.callParent(arguments);
	this.getImage();
}

Now, add the image to the diff, bound to the attribute:

// image element in diff
// note "MyImageAttr" is an attribute we're binding to
{
	"operation": "insert",
	"name": "MyImage",
	"parentName": "ImageContainer",
	"propertyName": "items",
	"values": {
		"itemType": Terrasoft.ViewItemType.COMPONENT,
		"className": "Terrasoft.ImageView",
		"imageSrc": {"bindTo": "MyImageAttr"}
	}
}

Then the record loads, it will run the ESQ in the function, which will set the attribute with the image. Since the diff element is bound to the attribute, it will show the image when it is set, so it won't matter that the ESQ is asynchronous.

Ryan

Oleg Drobina

13:03 Oct 14, 2022

Hello Shivani,

As far as I remember there is no way to dynamically modify the image in the photo container from the client side code since it's strictly connected to the value stored in the "Photo" column of the object. In this case you may try modifying the photo on the server side and refresh the page if needed.

Shivani Lakshman

14:01 Oct 14, 2022

Oleg Drobina,

I believe we can. We have already implemented this in another section. Please see a screen grab in this link

https://drive.google.com/file/d/1BKT6E_azsOjjh1N9VZh0bPpfUjrttm79/view?…

We posted on the forum here because for some reason the code is not working when there is esq involved.

Oleg Drobina

14:10 Oct 14, 2022

Shivani Lakshman,

Ok, I was wrong, then this is possible. Then probably the reason is that esq is asynchronous and you don't get the data needed at the moment the image should be loaded to the UI (this is the most probable reason). In this case try avoiding using esq and use some other approach.

Shivani Lakshman

04:13 Oct 17, 2022

Oleg Drobina,

I have used callback and when the breakpoint hits my method, the code for

the image I need hits before the default image gets loaded. I am actually puzzled ?

Can you please suggest another approach ? I don’t want to add another column because this image will be dynamic and change frequently.

Is there an attribute that can hold images and that can be loaded onto the UI?

Would appreciate your help here!

Ryan Farley

20:16 Oct 17, 2022

Shivani Lakshman,

Example:

First add the attribute:

"MyImageAttr": {
	dataValueType: Terrasoft.DataValueType.TEXT,
	type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
	value: ""
}

Then, create the function that retrieves the image using the ESQ:

function getImage() {
	// do the ESQ to get the image, then simply set in attribute
	this.set("MyImageAttr", Terrasoft.ImageUrlBuilder.getUrl(imageConfig));
}
 
// also call image from onEntityInitialized so it runs when the record is loaded
function onEntityInitialized() {
	this.callParent(arguments);
	this.getImage();
}

Now, add the image to the diff, bound to the attribute:

// image element in diff
// note "MyImageAttr" is an attribute we're binding to
{
	"operation": "insert",
	"name": "MyImage",
	"parentName": "ImageContainer",
	"propertyName": "items",
	"values": {
		"itemType": Terrasoft.ViewItemType.COMPONENT,
		"className": "Terrasoft.ImageView",
		"imageSrc": {"bindTo": "MyImageAttr"}
	}
}

Ryan

Shivani Lakshman

19:28 Oct 18, 2022

Ryan Farley,

Thank you for your help! Really appreciate it :)

Show all comments

Subscribe to Images