Add custom heading type to component extending core title component

[sirishap9577191]

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 solution]

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>

[narendiran100]

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.

[sirishap9577191]

Yes this is the issue i got , when i select  checkbox for display1 which is custom in design dialog/component policy , in the dialog dropdown i m getting empty value ...

[kapil_rajoria]

Hi @sirishap9577191 , what happens normally in backend is when you select h1 from the dropdown, a javascript code appends h1 tag to the title. Similarly, you can write your own custom js to do various operations on the title.
Please refer the below article from which you can learn how to apply custom js in dialog:
https://aemhints.com/2020/10/24/limit-multifield-aem65/
https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation