AEM - To The Point: March 2023

Tuesday, 28 March 2023

Creating Custom Tools in AEM

Step 1 : Create a folder e.g. "custom-tools" under the path

/apps/cq/core/content/nav/tools

.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="sling:OrderedFolder"
    id="custom-tools">
    <page-exporter/>
</jcr:root>

Step 2 : Create a node inside the "custom-tools"

.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
        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 Exporter"
        jcr:description="This is a Page Exporter Utility."
        id="page-exporter"
        href="/apps/mysite/custom-tools/page-exporter.html"
        icon="project"/>

Step 3 : Create a page with fields Granite UI dialog page for the tool we created in previous steps.

Got to your project folder under /apps, and create a folder e.g. "custom-tools", create one more folder named "page-exporter"

.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        jcr:primaryType="nt:unstructured"
        jcr:title="Page Exporter Utility"
        sling:resourceType="granite/ui/components/shell/page"
        consoleId="page-exporter">
        <head jcr:primaryType="nt:unstructured">
            <clientlibs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
                categories="[granite.ui.coral.foundation,page-exporter.base]"/>
        </head>
        <title
            jcr:primaryType="nt:unstructured"
            jcr:title="Page Exporter"
            sling:resourceType="granite/ui/components/shell/title"/>
        <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container"
            margin="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
                <columns
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                    margin="{Boolean}true">
                    <items jcr:primaryType="nt:unstructured">
                        <column
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                            <items jcr:primaryType="nt:unstructured">
                                <container
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                    margin="{Boolean}true">
                                    <items jcr:primaryType="nt:unstructured">
                                        <heading
                                            granite:class="coral-Heading coral-Heading--2"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/heading"
                                            level="{Long}2"
                                            text="Upload the package"/>
                                        <well
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/well"
                                            margin="{Boolean}true">
                                            <items jcr:primaryType="nt:unstructured">
                                                <container
                                                    granite:id="fileUploadForm"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form"
                                                    enctype="multipart/form-data"
                                                    foundationForm="{Boolean}true"
                                                    loadingMask="{Boolean}true"
                                                    margin="{Boolean}true"
                                                    maximized="{Boolean}true"
                                                    style="vertical">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <fileUpload
                                                            granite:id="zip-selector"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
                                                            autoStart="{Boolean}false"
                                                            emptyText="Choose Zip File"
                                                            fieldLabel="Select a Zip file from your local disk"
                                                            icon="upload"
                                                            mimeTypes="[.zip,.tar.gz]"
                                                            multiple="{Boolean}false"
                                                            name="xls"
                                                            required="{Boolean}true"
                                                            text="Choose File"/>
                                                        <submitButton
                                                            granite:id="btnSubmit"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/button"
                                                            text="Export Page and Download"
                                                            type="submit"/>
                                                        <loadingGIF
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/field"
                                                            fieldLabel=""
                                                            wrapperClass="loading loading--hide"/>
                                                        <resultMessage
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/field"
                                                            fieldLabel=""
                                                            wrapperClass="result"/>
                                                    </items>
                                                </container>
                                            </items>
                                        </well>
                                    </items>
                                </container>
                            </items>
                        </column>
                    </items>
                </columns>
            </items>
        </content>
    </jcr:content>
</jcr:root>

SlingResourceType and SlingSerourceSuperType in AEM

SlingResourceType and SlingResourceSuperType in AEM

The SlingResourceType is an attribute that is used to define the type of a resource in AEM. It is a mandatory attribute that is used to associate a specific script or template with a resource. For example, if you have a component in AEM called "my-component", you would define the SlingResourceType attribute in the component's JCR node or in the component's HTML file using the "data-sly-resource" attribute. This attribute tells AEM that the component is of type "my-project/components/my-component". This type can be used to associate the component with a specific script or template, which is used to render the component.

The SlingResourceSuperType, on the other hand, is an optional attribute that is used to specify the super type of a resource. It is used to indicate that a resource inherits properties, behaviors, and rendering instructions from a parent resource. For example, if you have a parent component in AEM called "my-parent-component" that has some common functionality or rendering instructions that should be inherited by all its child components, you can define the SlingResourceSuperType attribute in the parent component's JCR node or HTML file using the "sling:resourceSuperType" attribute. This attribute tells AEM that the parent component is of type "my-project/components/my-parent-component". Any child component that has a SlingResourceType of "my-project/components/my-child-component" and a SlingResourceSuperType of "my-project/components/my-parent-component" will inherit the properties, behaviors, and rendering instructions defined in the "my-parent-component".

In summary, the SlingResourceType and SlingResourceSuperType are attributes in AEM that are used to define the type and inheritance hierarchy of resources. The SlingResourceType is a mandatory attribute that is used to associate a specific script or template with a resource, while the SlingResourceSuperType is an optional attribute that is used to indicate that a resource inherits properties, behaviors, and rendering instructions from a parent resource.

Let's say you have a component called "my-component" in AEM, and you want to define its type using the SlingResourceType attribute. You would define the attribute in the component's JCR node or HTML file like this:

<sling:resourceType="my-project/components/my-component"/>

This tells AEM that "my-component" is of type "my-project/components/my-component". You can then associate this type with a specific script or template that is used to render the component.

Now let's say you have a parent component called "my-parent-component" that has some common functionality or rendering instructions that should be inherited by all its child components. You can define the SlingResourceSuperType attribute in the parent component's JCR node or HTML file like this:

<sling:resourceSuperType="my-project/components/my-parent-component"/>

This tells AEM that "my-parent-component" is of type "my-project/components/my-parent-component", and any child component that has a SlingResourceType of "my-project/components/my-child-component" and a SlingResourceSuperType of "my-project/components/my-parent-component" will inherit the properties, behaviors, and rendering instructions defined in the "my-parent-component".

For example, let's say you have a child component called "my-child-component" that inherits from "my-parent-component". You would define its SlingResourceType and SlingResourceSuperType attributes like this:

<sling:resourceType="my-project/components/my-child-component"

<sling:resourceSuperType="my-project/components/my-parent-component"/>

This tells AEM that "my-child-component" is of type "my-project/components/my-child-component", and it inherits from "my-parent-component", which is of type "my-project/components/my-parent-component". As a result, "my-child-component" will inherit the properties, behaviors, and rendering instructions defined in "my-parent-component", and you can use these to customize the rendering of "my-child-component" as needed.

ACS commons in AEM

ACS Commons

Adobe consulting Services – ACS AEM commons is an open source library of pre-built AEM tools and functionalities that can help Authors and Developers to perform different operations on AEM instances, e.g. deployment, cache management, user permissions and so on…

Tools provided in AEC Commons makes developer and editor’s life easy, by simply going in the right ACS Commons dedicated page and set the needed configurations.

There are 2 ways how the ACS commons package can be installed on AEM instance

a. via maven dependency in an AEM project

b. manual installing the package with package manager.

Once installed, the ACS commons tools can be accessed in the tools menu as show below,