Create a custom rendition picker

[warrenseine]

Hi,

I'm integrating a new component in AEM and would like to replace the default view in Touch UI with a custom JavaScript component based on the file extension. This is the closest I found from what I'd like to do, but I'd like to be able to view the component directly from the DAM or from an Asset Share.

I've found a way to do that by editing `renditionpicker.jsp` and injecting an <iframe> instead of an <img> tag. Unfortunately, this technique requires editing a core AEM component. That would break if another package edited this file too. I saw that there are a few another "pickers" (videopicker, s7previewer) in the "assetview" page (/libs/dam/gui/content/assets/assetpage/jcr:content/body/content/content/items/assetdetail/items/col1/items/assetview) but I'm unsure how I should add one.

What would be the best practice? Do you have some code example?

[smacdonald2008]

You want to build a component to be used in the AEM UI as opposed to an AEM web page under /apps? 

I will look for examples. 

[warrenseine]

Yes, exactly.

[smacdonald2008]

We have some examples that you refer to here: 

A  custom Rendition Picker here ..

https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/145fc9403f17ac8345945d23ae1e2c04e7...

And used the custom picker here…

https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/1ae83ba7111d3539da995b5cbf4a3a05f1...

[Lokesh_Shivalingaiah]

You can override getRenditions() method from RenditionPicker and implement your own rendition picker. Refer the custom picker link mentioned above by @scott

[warrenseine]

I already went through these examples. They look promising but there's one thing I don't understand: how do I use custom HTML code to display it? I don't see any example that actually changes the way AEM renders the rendition. I'd like to use an <iframe> instead of the default <img> tag that is used.

Thanks for your time.

[smacdonald2008 · Accepted solution]

You stated:

"I've found a way to do that by editing `renditionpicker.jsp` and injecting an <iframe> instead of an <img> tag. "

However - you said your concern was modifying content under /libs

Therefore, instead of modifying the component under /libs - overlay it and copy the node (and script) under /apps. Change the name of the component and now you have a component that meets your business requirements.

You are correct in that you should never change content under /libs. But overlaying a component is best practice in AEM. See this doc about Overlaying: 

https://docs.adobe.com/docs/en/aem/6-0/develop/platform/overlays.html