Expand my Community achievements bar.

SOLVED

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

Avatar

Level 3

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.

1 Accepted Solution

Avatar

Correct answer by
Level 10

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 

View solution in original post

5 Replies

Avatar

Level 10

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.... 

Avatar

Level 3

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? 

Avatar

Level 10

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?  

Avatar

Administrator

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

I will get back to you soon.

~kautuk



Kautuk Sahni

Avatar

Correct answer by
Level 10

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