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

Can we add image as the title of the tab in tabs component?

Avatar

Level 2

Hi All,

I want to add icon(image field) along with the title of the tab. Is it possible to do it?

similar to below:-

NaveenT10_0-1678525809020.png

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@NaveenT10 
Please find below dialog xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Tabs"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.tabs.v1.editor]"
    helpPath="https://www.adobe.com/go/aem_cmp_tabs_v1"
    trackingFeature="core-components:tabs:v1">
    <content
        granite:class="cmp-tabs__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <tabitems
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Items"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <tabitems
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                        <parentConfig
                            jcr:primaryType="nt:unstructured"
                            icon="/content/dam/mynewsite/346c4c9073be5d94887f2db0a6cf3f4f.png"/>
                    </tabitems>
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        maximized="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <activeItem
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/hidden"
                                                name="./activeItem">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cmp-tabs-v1-dialog-edit-hook="activeItem"/>
                                            </activeItem>
                                            <activeSelect
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/select"
                                                fieldDescription="The item that is active by default."
                                                fieldLabel="Active Item">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cmp-tabs-v1-dialog-edit-hook="activeSelect"/>
                                                <items jcr:primaryType="nt:unstructured">
                                                    <default
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Default"
                                                        value=""/>
                                                </items>
                                            </activeSelect>
                                            <id
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="HTML ID attribute to apply to the component."
                                                fieldLabel="ID"
                                                name="./id"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <accessibility
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Accessibility"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <accessibilityLabel
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Value of an aria-label attribute, which describes the purpose of the set of tabs."
                                                fieldLabel="Label"
                                                name="./accessibilityLabel"
                                                value=""/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </accessibility>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

View solution in original post

7 Replies

Avatar

Community Advisor

Hi @NaveenT10 ,
could you please elaborate the use case by providing more details?

Avatar

Community Advisor

Hi @NaveenT10 ,

Add a "parentConfig" node inside the tab, parallel to "items" as shown below.

Add a new property name as icon(String) and provide icon path. 

Please find below the screenshot for more details.

Rohit_Utreja_0-1678563226885.png

 

Hope it helps!!

Avatar

Level 2

@Rohit_Utreja Have you created the tabitems node ? if yes, can you share the resourceType of it? because i'm unable to find that node in core components.

Avatar

Correct answer by
Community Advisor

@NaveenT10 
Please find below dialog xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Tabs"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.tabs.v1.editor]"
    helpPath="https://www.adobe.com/go/aem_cmp_tabs_v1"
    trackingFeature="core-components:tabs:v1">
    <content
        granite:class="cmp-tabs__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <tabitems
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Items"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <tabitems
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                        <parentConfig
                            jcr:primaryType="nt:unstructured"
                            icon="/content/dam/mynewsite/346c4c9073be5d94887f2db0a6cf3f4f.png"/>
                    </tabitems>
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        maximized="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <activeItem
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/hidden"
                                                name="./activeItem">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cmp-tabs-v1-dialog-edit-hook="activeItem"/>
                                            </activeItem>
                                            <activeSelect
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/select"
                                                fieldDescription="The item that is active by default."
                                                fieldLabel="Active Item">
                                                <granite:data
                                                    jcr:primaryType="nt:unstructured"
                                                    cmp-tabs-v1-dialog-edit-hook="activeSelect"/>
                                                <items jcr:primaryType="nt:unstructured">
                                                    <default
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Default"
                                                        value=""/>
                                                </items>
                                            </activeSelect>
                                            <id
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="HTML ID attribute to apply to the component."
                                                fieldLabel="ID"
                                                name="./id"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <accessibility
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Accessibility"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <accessibilityLabel
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="Value of an aria-label attribute, which describes the purpose of the set of tabs."
                                                fieldLabel="Label"
                                                name="./accessibilityLabel"
                                                value=""/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </accessibility>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Avatar

Community Advisor

Hi @NaveenT10 ,

Yes It's possible! As you can see in the below image

Screenshot 2023-03-10 at 11.19.33 PM.png

instead of the text field you can customize it by implementing icons either with the datasource or asset path. You can achieve this by leveraging/extending core component here "core/wcm/components/tabs/v1/tabs"

Hope that helps!

Regards,

Santosh

 

Avatar

Level 2

Thanks for the reply @SantoshSai, I see that text field is coming from children editor(/libs/core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor) html. How can we modify it in our extended component?