Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Create a custom rendition picker

Avatar

Level 1

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?

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

6 Replies

Avatar

Level 10

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. 

Avatar

Level 10

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

Avatar

Level 1

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.

Avatar

Correct answer by
Level 10

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