Trying to extend custom AEM component

[stiegjo]

I'm trying to extend a custom site banner component in my application from another project. I've created the .content.xml, dialogExtension.xml and extendedSiteBanner.html. However I'm not seeing the hide checkbox under properties in the component that I'm trying to add.

Here's the xml for the .content.xml

<?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"
          jcr:primaryType="cq:Component"
          jcr:title="Extended Site Banner"
          sling:resourceSuperType="other-project/components/structure/siteBanner/v1/siteBanner"
          componentGroup=".hidden"
          sling:resourceType = "com.mim.aem.mysite.core.models.sitebanner.ExtendedSiteBannerModel"/>

And here's the HTL:

<!-- extendedSiteBanner.html -->
<div data-sly-resource="${'/other-project/components/structure/siteBanner/siteBanner/siteBanner.html'}">
    <!-- Checkbox to hide the site banner -->
    <input type="checkbox" id="hideBannerCheckbox" data-sly-test="${!model.hideBanner}">
    <label for="hideBannerCheckbox">Hide Site Banner</label>
</div>

[kapil_rajoria]

Hi @stiegjo , if you want checkbox under properties in the dialog of the component, consider adding this in the dialog's xml having the same structure under the tab "Properties":

<checkBox
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
        name="./checkBox"
        text="checkbox_name"
        uncheckedValue="false"
        value="true"/>

[Raja_Reddy · Accepted solution]

Hi @stiegjo 
In the dialogExtension.xml file, define the additional property for the "hide" checkbox. 

<?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"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <hideBanner
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                fieldLabel="Hide Site Banner"
                name="./hideBanner"/>
        </items>
    </content>
</jcr:root>

a checkbox property named "hideBanner" is added to the dialog.

3. Save the dialogExtension.xml file and reload the component in AEM.