make thumbnail show on create true and required when creating a page - AEM 6.5

Avatar

Avatar

sreedobe

Avatar

sreedobe

sreedobe

10-08-2020

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.

thumbnail-creation.png

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

ChitraMadan

MVP

Avatar

ChitraMadan

MVP

ChitraMadan
MVP

10-08-2020

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>

clientlib-2.pngclientlib-1.pngnot-working-thumbnail.png 

Answers (0)