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); },
Like
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
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.
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.
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.
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!
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
Ryan Farley,
Thank you for your help! Really appreciate it :)