how to set image dynamically in html5smartimage field depending on other field.

[amangoyal15]

I have one pathfield and smartimage field.

i want to select image path from DAM through pathfield.

depending on the path of that image , i want to set that image in smartimage field.

Please assist me.

[smacdonald2008]

To perform this - you need to use code and create a custom XTYPE. 

You need to write application logic using this API:

https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html

To learn how to write a custom xtype -- see this community article: 

https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

You would need to write code using the SmartImage class

https://docs.adobe.com/content/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.html5smartimage

Hope this helps.... 

[amangoyal15]

smacdonald2008 wrote...

To perform this - you need to use code and create a custom XTYPE. 

You need to write application logic using this API:

https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html

To learn how to write a custom xtype -- see this community article: 

https://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

You would need to write code using the SmartImage class

https://docs.adobe.com/content/docs/en/cq/5-6-1/widgets-api/index.html?class=CQ.form.html5smartimage

Hope this helps.... 

Hi smacdonald, i saw an reference of doing this with "handleDrop" function of CQ.form.html5smartimage. But i am not getting it properly.

Please have a look on the snippet of the code -

1. renderBlogImage : function(pathfield, path, anchor) {
2. var panel = pathfield.findParentByType("panel");
3. if (panel) {
4. var image = panel
5. .findByType('html5smartimage')[0];
6.  
7. var pathArray = path.split('/');
8. var imageName = pathArray[(pathArray.length - 1)];
9. var fakeDragData = {};
10. var fakeRecord = {};
11. fakeRecord.path = path;
12. fakeRecord.name = imageName;
13. fakeRecord.get = function(name) {
14. return this[name];
15. };
16. fakeDragData.records = new Array(fakeRecord);
17. fakeDragData.single = true;
18. image.handleDrop(fakeDragData);
19. }
20. },

Full Reference Link-

http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

Please assist me , would it be  possible to achieve my result by this approach? 

[smacdonald2008]

To programmatically work with CQ.html5.form.SmartImage- look at this artilce: 

http://experience-aem.blogspot.ca/2013/12/aem-cq-56-adding-images-in-multifield.html

I will look for other examples of using this class. 

However - why go through this coding when you DRAG and DROP DAM images via the content finder and you do not have to code.

What advantage will selecting an image via a Path Finder have over whats available out of the box?  

[kautuk_sahni]

I have have asked internal expert to have a look at this.

I will get back to you soon.

~kautuk

[edubey · Accepted solution]

It's been a 7-8 months since I worked with classic UI.

Here's is what I would suggest:

1. To Pathfield there would be listeners available, where on select of some path it will trigger. It can be dialogselect  or change

2. On these events you can write function. Event will give you the value selected in path field

3. Now search for the smartImage using findByType and use setValue on it.

I dont have the exact code, but it should be fairly easy as classic UI is full of events/methods to manage these stuff.

https://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html