carousel panel item name issue

[SudarshanV1]

carousel panel item name issue:

i have inherited carousel component and created custom component and carousel panel select is impacted.

custom component panel select is only showing child component name only for children's.

but core component is showing child component name : item name for children's.

i debugged the issue.. when i change custom component jcr title and component name to carousel, it shows proper name in panel select.
can anyone suggest what exactly its happening.

[SantoshSai]

Hi @SudarshanV1,

Please confirm:

Option 1: Use cq:isContainer = true and correct resourceSuperType

Ensure your custom component inherits correctly:

/custom/components/carousel
    - sling:resourceSuperType = "core/wcm/components/carousel/v1/carousel"
    - jcr:title = "Carousel"
    - cq:isContainer = true

Option 2: Extend and Overlay the Panel Selector Logic

If your custom component name is not carousel, and you still want the same behavior:

1. Overlay the Carousel clientlib (responsible for authoring UI enhancements).

2. Modify the JavaScript responsible for generating the dropdown labels:

   • Located in /libs/wcm/foundation/components/parsys/clientlibs/parsys/js/panelselect.js or under /libs/core/wcm/components/carousel/...

   • Update the logic to detect your custom component’s resourceType and treat it like the core one.

Option 3: Keep the same componentGroup and mimic structure

Sometimes AEM's authoring UI logic checks componentGroup too. Set yours to match the core:

- componentGroup = "wcm.foundation.components"

 Hope that helps!

[SudarshanV1]

here the value its printing but in below function item is undefined so its showing only title.

component configuration:

Can you help?

[SantoshSai]

@SudarshanV1 
Can you try this?

function getTitle(editable, item, index) {
    var title = "<span class='foundation-layout-util-subtletext cmp-panelselector__indexMarker'>" + index + "</span>&nbsp;&nbsp;";
    var subTitle = "";

    title = title + " " + Granite.I18n.getVar(ns.editableHelper.getEditableDisplayableName(editable));

    // Support custom component resourceType too
    if (item) {
        if (item[PN_PANEL_TITLE]) {
            subTitle = item[PN_PANEL_TITLE];
        } else if (item.title) {
            subTitle = item.title;
        }
    }

    if (subTitle) {
        title = title + ": <span class='foundation-layout-util-subtletext'>" + subTitle + "</span>";
    }

    return title;
}

[kautuk_sahni]

@SudarshanV1 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you!