Expand my Community achievements bar.

SOLVED

Separate configuration page for Component

Avatar

Level 3

Hi,

I have a component (say a carousel) to build. This Carousel can have (for example) 'n' number of images (1 for mobile and 1 for desktop) and each image/slide has rich text separate for mobile version and desktop version, links etc.. This makes it difficult to author everything in dialog.

So, I would like to create a configuration page where users can drag and drop a component. This component is ONE slide of the carousel. This contains richtext, links etc.. Thus authors can drag and drop any number of components.

 

My question is,

1. Where (path) should this page be created ?

2. How do I add a button on the actual carousel component to open this page ? (Say, I have cq:editConfig on the component. So, I need to add a button next to Edit called "Config" whcih should open this configuration page. Path to this page can be set in the Carousel dialog)

3. How to read configuration data from this page

 

Please guide me and correct me if I'm on wrong direction

Thanks,

1 Accepted Solution

Avatar

Correct answer by
Level 2

Yes, there are multiple ways of creating this. I think the best is always to keep the author experience in the component vs sending them to a different page/section of AEM. You could have different configuration per type of breakpoint either with TABS (if the 'n' is fixed), or with multi-fields (if 'n' is variables). Also, you should look into separating the 'data' from the 'asset', in the sense that the image should be the same, or associated to the same asset.

For example, in the case of the carousel: You could have a tab with a multifield for each slide, with three sets of fields one for the image reference, one for the desktop data, and one for the mobile data. For each new slide, you allow the user to 'add' a new set of fields that repeats to 'n'. You can even allow the author to change the order with up/down arrows.

In this setup, you should create a rendition specifically for the mobile breakpoint (create renditions either with with a workflow manually triggered or when asset is uploaded, up to you) and have the carousel serve the image rendition that corresponds to the breakpoint that the user is in (ie mobile, tab, desktop). With this, by default the image would be the same, but the author can overwrite the rendition in the DAM if the image needs to be different, and the links/text would be specific to each breakpoint. 

View solution in original post

4 Replies

Avatar

Correct answer by
Level 2

Yes, there are multiple ways of creating this. I think the best is always to keep the author experience in the component vs sending them to a different page/section of AEM. You could have different configuration per type of breakpoint either with TABS (if the 'n' is fixed), or with multi-fields (if 'n' is variables). Also, you should look into separating the 'data' from the 'asset', in the sense that the image should be the same, or associated to the same asset.

For example, in the case of the carousel: You could have a tab with a multifield for each slide, with three sets of fields one for the image reference, one for the desktop data, and one for the mobile data. For each new slide, you allow the user to 'add' a new set of fields that repeats to 'n'. You can even allow the author to change the order with up/down arrows.

In this setup, you should create a rendition specifically for the mobile breakpoint (create renditions either with with a workflow manually triggered or when asset is uploaded, up to you) and have the carousel serve the image rendition that corresponds to the breakpoint that the user is in (ie mobile, tab, desktop). With this, by default the image would be the same, but the author can overwrite the rendition in the DAM if the image needs to be different, and the links/text would be specific to each breakpoint. 

Avatar

Employee Advisor

Hi,

I agree with al.ber.to, you should really care about the authoring experience. Try to have it all inside the page and do not create a dedicated page, if you don't want to reuse the carousel.

kind regards,
Jörg

Avatar

Level 10

You can design this component in multiple ways !

Having a configuration setup can also be done. I can also sugest

Carousel component dialog having 2 tabs. one for desktop and another for mobile. Each tab has a multifield with the properties for the image (image, text, link etc). This way author can configure separately 

Avatar

Level 3

Thanks al.ber.to for the help !