override thumbnail page dialog - AEM 6.5

[sreedobe]

Hi,

Environment: AEM 6.5

I am in need of making thumbnail tab to appear on creating a page with editable template and make it required.

I have created "tabs" folder with thumbnail tab dialog content xml and had "cq:showOnCreate" as true,

tabs / thumbnail node

<?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"
    cq:showOnCreate="{Boolean}true"
    jcr:primaryType="nt:unstructured"
    jcr:title="Thumbnail"
    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
    <items jcr:primaryType="nt:unstructured">
        <column
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <thumbnail
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
                    page="${empty param.item ? requestPathInfo.suffix : param.item}"
                    quiet="{Boolean}true">
                    <upload
                        granite:class="cq-wcm-fileupload"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
                        async="{Boolean}true"
                        autoStart="{Boolean}false"
                        multiple="{Boolean}false"
                        name="./image/file.sftmp"
                        sizeLimit="100000000"
                        text="Upload Image"
                        uploadUrl="will_be_replaced">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-msm-lockable="./image"/>
                    </upload>
                    <assetpicker
                        granite:class="js-browse-activator"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/button"
                        text="Select Image">
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-msm-lockable="./image"/>
                    </assetpicker>
                    <preview
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="cq/gui/components/siteadmin/admin/pagepreview"/>
                </thumbnail>
            </items>
        </column>
    </items>
</jcr:root>

Tab is appearing but "select image" is button not opening path browser field to select a aem asset image.

cq: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="Page"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[cq.common.wcm,core.wcm.components.page.v2.editor,cq.wcm.msm.properties,granite.contexthub.configuration,cq.siteadmin.admin.properties]"
    helpPath="https://www.adobe.com/go/aem_cmp_page_v2"
    mode="edit"
    trackingFeature="core-components:page:v2">
    <content
        granite:class="cq-dialog-content-page"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                granite:class="cq-siteadmin-admin-properties-tabs"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                size="L">
                <items jcr:primaryType="nt:unstructured">
                    <basic
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/apps/testapp/components/structure/article-page/tabs/basic"/>
                    <thumbnail
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/apps/testapp/components/structure/article-page/tabs/thumbnail"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

I do not see any errors in console.

Different from out of the box page creation is that "thumbnail" tab appears on selecting a template to create a page as below.

Do I need to have any clientlibs available etc to get the thumbnail select image to work.

[ChitraMadan · Accepted solution]

Hi @sreedobe ,

Same requirement was discussed here. Please see if this helps

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/uploading-thumbnail-for-a-...

[sreedobe]

It does not work. I followed below.

@ChitraMadan 

<?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="Page"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[cq.common.wcm,core.wcm.page.properties,cq.wcm.msm.properties,cq.authoring.editor.plugin.commerce,cq.common.wcm,core.wcm.components.page.v2.editor,cq.wcm.msm.properties,granite.contexthub.configuration,cq.siteadmin.admin.properties,]"
          helpPath="https://www.adobe.com/go/aem_cmp_page_v2"
          mode="edit"
          trackingFeature="core-components:page:v2">
    <content
            granite:class="cq-dialog-content-page"
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    granite:class="cq-siteadmin-admin-properties-tabs"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    size="L">
                <items jcr:primaryType="nt:unstructured">
                    <basic
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Basic"
                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <title
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Title and Tags"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <title
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Title"
                                                    name="./jcr:title"
                                                    renderReadOnly="{Boolean}true"
                                                    required="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        cq-msm-lockable="jcr:title"/>
                                            </title>
                                            <pagename
                                                    cq:hideOnEdit="{Boolean}true"
                                                    cq:showOnCreate="{Boolean}true"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Name"
                                                    name="pageName"
                                                    validation="admin.pagename"/>
                                            <msmConfigEndpoint
                                                    granite:class="msm-config-endpoint"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                                                    value="${empty param.item ? requestPathInfo.suffix : param.item }"/>
                                            <tags
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="cq/gui/components/coral/common/form/tagfield"
                                                    allowBulkEdit="{Boolean}true"
                                                    autocreateTag="{Boolean}true"
                                                    fieldLabel="Tags"
                                                    multiple="{Boolean}true"
                                                    name="./cq:tags">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        cq-msm-lockable="cq:tags"/>
                                            </tags>
                                            <tagsShowOnCreate
                                                    cq:hideOnEdit="{Boolean}true"
                                                    cq:showOnCreate="{Boolean}true"
                                                    granite:comment="Handled by a custom POST servlet for the Create Page case"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="cq/gui/components/coral/common/form/tagfield"
                                                    fieldLabel="Tags"
                                                    multiple="{Boolean}true"
                                                    name="./cq:tags"/>
                                            <hideinnav
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                    name="./hideInNav"
                                                    renderReadOnly="{Boolean}true"
                                                    text="Hide in Navigation"
                                                    value="true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="hideInNav"/>
                                            </hideinnav>
                                            <charset
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                                                    allowBulkEdit="{Boolean}true"
                                                    ignoreData="{Boolean}true"
                                                    name="_charset_"
                                                    value="utf-8"/>
                                        </items>
                                    </title>
                                    <moretitles
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="More Titles and Description"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <pagetitle
                                                    cq:showOnCreate="{Boolean}true"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Page Title"
                                                    name="./pageTitle"
                                                    renderReadOnly="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="pageTitle"/>
                                            </pagetitle>
                                            <navigationtitle
                                                    cq:showOnCreate="{Boolean}true"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    allowBulkEdit="{Boolean}true"
                                                    fieldLabel="Navigation Title"
                                                    name="./navTitle"
                                                    renderReadOnly="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="navTitle"/>
                                            </navigationtitle>
                                            <subtitle
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldLabel="Subtitle"
                                                    name="./subtitle"
                                                    renderReadOnly="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="subtitle"/>
                                            </subtitle>
                                            <description
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
                                                    fieldLabel="Description"
                                                    name="./jcr:description"
                                                    renderReadOnly="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="jcr:description"/>
                                            </description>
                                        </items>
                                    </moretitles>
                                    <onofftime
                                            cq:showOnCreate="{Boolean}false"
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="On/Off Time"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <ondate
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                                    displayedFormat="MMMM DD, YYYY hh:mm a"
                                                    displayTimezoneMessage="{Boolean}true"
                                                    fieldLabel="On Time"
                                                    name="./onTime"
                                                    renderReadOnly="{Boolean}true"
                                                    type="datetime">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="onTime"/>
                                            </ondate>
                                            <offdate
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                                    displayedFormat="MMMM DD, YYYY hh:mm a"
                                                    displayTimezoneMessage="{Boolean}true"
                                                    fieldLabel="Off Time"
                                                    name="./offTime"
                                                    renderReadOnly="{Boolean}true"
                                                    type="datetime">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        allowBulkEdit="{Boolean}true"
                                                        cq-msm-lockable="offTime"/>
                                            </offdate>
                                        </items>
                                    </onofftime>
                                    <vanityurl
                                            cq:showOnCreate="{Boolean}false"
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Vanity URL"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <vanitypath
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                    cq-msm-lockable="sling:vanityPath"
                                                    fieldLabel="Vanity URL"
                                                    renderReadOnly="{Boolean}true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        cq-msm-lockable="sling:vanityPath"/>
                                                <field
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                        name="./sling:vanityPath"
                                                        required="{Boolean}true"/>
                                            </vanitypath>
                                            <redirectVanityURL
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                    name="./sling:redirect"
                                                    renderReadOnly="{Boolean}true"
                                                    text="Redirect Vanity URL"
                                                    value="true">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        cq-msm-lockable="./sling:redirect"/>
                                            </redirectVanityURL>
                                        </items>
                                    </vanityurl>
                                </items>
                                <thumbnail
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="cq/gui/components/coral/common/wcm/pagethumbnail"
                                        page="${empty param.item ? requestPathInfo.suffix : param.item}"/>
                            </column>
                        </items>
                    </basic>
                    <assetpicker
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Asset"
                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <section
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="/libs/granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <thumbnail
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="cq/gui/components/coral/common/wcm/pagethumbnail"
                                                    page="${empty param.item ? requestPathInfo.suffix : param.item}"/>
                                            <edit
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="commerce/gui/components/common/assetpicker"
                                                    name="./image/fileReference"
                                                    previewTarget=".foundation-layout-thumbnail-image coral-card-asset img"
                                                    text="Change"
                                                    type="image"/>
                                            <charset
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                                                    ignoreData="{Boolean}true"
                                                    name="_charset_"
                                                    value="utf-8"/>
                                        </items>
                                    </section>
                                </items>
                            </column>
                        </items>
                    </assetpicker>


                    <thumbnail
                            cq:hideOnEdit="{Boolean}true"
                            jcr:primaryType="nt:unstructured"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>