Customizing aem core carousel component – Panel selection is not visible in authoring dialog | Community
Skip to main content
K
karanmahi
Level 4
February 22, 2021
Solved

Customizing aem core carousel component – Panel selection is not visible in authoring dialog

  • February 22, 2021
  • 2 replies
  • 15583 views

We are customizing aem core carousel component, we have created a proxy component from where we doing resource supertype to core carousel v1 component. We want to override the markup of this component. But the issue is, when we override the markup, the “panel” selection option is not visible in the authoring dialog. I mean the panel icon after the first icon in the authoring dialog. Look at the screenshot. It looks like markup is tightly coupled with when panel selection visibility. Is there any way that we can override html and retain the panel selection option? What would be the bare minimum we need from the core carousel component to achieve this. Any pointers will be highly appreciated.

 

Core carousel - notice 2nd-panel icon (after ranch option)

 

 

2nd-panel icon not visible here

 

    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 Shashi_Mulugu

    @karanmahi If you want to write your own HTML, those things will not work so easily.. As of i know, those features are tightly coupled with html classes and data-* attributes.

    Below are few clientlibs, you need have to make Childreneditor and PAnel select work along with HTML(classes and data-*).

    childreneditor - /apps/core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor
    editor - /apps/core/wcm/components/carousel/v1/carousel/clientlibs/editor
    editorhook - /apps/core/wcm/components/carousel/v1/carousel/clientlibs/editorhook
    panelcontainer - /apps/core/wcm/components/commons/editor/clientlibs/panelcontainer
    panelselect - /apps/core/wcm/components/commons/editor/clientlibs/panelselect

    2 replies

    Shashi_Mulugu
    Community Advisor
    Shashi_MuluguCommunity AdvisorAccepted solution
    Community Advisor
    February 22, 2021

    @karanmahi If you want to write your own HTML, those things will not work so easily.. As of i know, those features are tightly coupled with html classes and data-* attributes.

    Below are few clientlibs, you need have to make Childreneditor and PAnel select work along with HTML(classes and data-*).

    childreneditor - /apps/core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor
    editor - /apps/core/wcm/components/carousel/v1/carousel/clientlibs/editor
    editorhook - /apps/core/wcm/components/carousel/v1/carousel/clientlibs/editorhook
    panelcontainer - /apps/core/wcm/components/commons/editor/clientlibs/panelcontainer
    panelselect - /apps/core/wcm/components/commons/editor/clientlibs/panelselect

      K
      karanmahiAuthor
      Level 4
      February 22, 2021
      @shashi_mulugu yea, i looked at these client libraries. Do you mean overriding these client libraries. If yes, on top of you head, do you know, which all bare minimum client libraries we need to override ?
      A
      arsahu
      March 23, 2022

      If the carousel.html is overridden and customized in a project , the select panel option doesn't work.
      In this case we need to make sure that the data attribute (panelContainer) is retained in the carousel.html from the core carousel component. And then the select panel option would appear for the custom carousel as well.

       

       

       

        Rohan_Garg
        Community Advisor
        Rohan_GargCommunity Advisor
        Community Advisor
        October 10, 2022

        @arsahu - The "Select Panel" option will appear but it will not toggle to the corresponding element. Were you able to fix that issue as well ?

        S
        SathyaMo
        July 10, 2024

        @rohan_garg I am also unable to toggle to the corresponding element. Can you please give the solution to fix this issue?

        Terms & ConditionsAccessibility statement

        Loading footer...