Add custom heading type to component extending core title component

Question

Hello everyone,

For the aem core title v3 component we have option to select heading sizes from h1 to h6. We need to add additional sizes like display 1, display 2 along with h1 to h6. How to achieve this ? can someone send me the solution approach .

kapil_rajoria · Accepted Answer

Hi @sirishap9577191 , you can overlay/override the core title component in libs. In both the cases you would have to modify the dialog to achieve the required functionality.
1. By overlaying: copy the component from libs to apps at exact same path and download the package and modify its dialog accordingly to add other display options.

2. By overriding: create a new component say custom-title and set its superResourceType to the core title component in libs. By doing so, you will set the dialog is automatically coming and by default it is of the core title component. To modify this dialog, you can download the package of the title component in libs and copy the _cq_dialog folder in your newly made component. Now, just remove the parts you want to inherit from the parent and for the rest you can modify it and add other display options.

For example:
For the core title component in libs, the dialog will look like this:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Title"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem6_5_docs_component_en#Title - HTL">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
            margin="{Boolean}false"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                        fieldDescription="Leave empty to use the page title."
                        fieldLabel="Title"
                        name="./jcr:title"/>
                    <type
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        fieldLabel="Type / Size"
                        name="./type">
                        <items jcr:primaryType="nt:unstructured">
                            <def
                                jcr:primaryType="nt:unstructured"
                                text="(default)"
                                value=""/>
                            <h1
                                jcr:primaryType="nt:unstructured"
                                text="H1"
                                value="h1"/>
                            <h2
                                jcr:primaryType="nt:unstructured"
                                text="H2"
                                value="h2"/>
                            <h3
                                jcr:primaryType="nt:unstructured"
                                text="H3"
                                value="h3"/>
                            <h4
                                jcr:primaryType="nt:unstructured"
                                text="H4"
                                value="h4"/>
                        </items>
                    </type>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

After modifying it:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Title"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem6_5_docs_component_en#Title - HTL">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
            margin="{Boolean}false"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <type
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        fieldLabel="Type / Size"
                        name="./type">
                        <items jcr:primaryType="nt:unstructured">
                            <def
                                jcr:primaryType="nt:unstructured"
                                text="(default)"
                                value=""/>
                            <h1
                                jcr:primaryType="nt:unstructured"
                                text="H1"
                                value="h1"/>
                            <h2
                                jcr:primaryType="nt:unstructured"
                                text="H2"
                                value="h2"/>
                            <h3
                                jcr:primaryType="nt:unstructured"
                                text="H3"
                                value="h3"/>
                            <h4
                                jcr:primaryType="nt:unstructured"
                                text="H4"
                                value="h4"/>
                            <display1
                                jcr:primaryType="nt:unstructured"
                                text="display1"
                                value="new_display_value"/>
                            <display2
                                jcr:primaryType="nt:unstructured"
                                text="display2"
                                value="new_display_value"/>
                        </items>
                    </type>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

narendiran_ravi · Answer

You can change the values from the dialog but need to have a custom implementation to append the selected value for the HTML element. The sling delegation pattern will not help much as the allowed items(h1,h2...) are configured in the backend Heading class.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded