Separate configuration page for Component | Community
Skip to main content
A
ashtrick
Level 3
October 16, 2015
Solved

Separate configuration page for Component

  • October 16, 2015
  • 4 replies
  • 1433 views

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,

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by al_ber_to_

    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. 

    4 replies

    al_ber_to_
    al_ber_to_Accepted solution
    Level 2
    October 16, 2015

    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. 

      joerghoh
      Adobe Employee
      joerghohAdobe Employee
      Adobe Employee
      October 16, 2015

      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

      Lokesh_Shivalingaiah
      Lokesh_Shivalingaiah
      Level 10
      October 16, 2015

      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 

      A
      ashtrickAuthor
      Level 3
      October 16, 2015

      Thanks al.ber.to for the help !

      Terms & ConditionsAccessibility statement

      Loading footer...