Adobe Experience Manager (AEM) Sample Features and Customizations

In the earlier blogs, we have seen when use data-sly-test using a div tag, div tag is also displayed in the html content. To avoid unnecessary wrappers around the actual HTML content, we can directly use the required HTML markup or use the sly element directly. For Example: <div data-sly-test.pageLinkReference="${properties.cq:pageLinkRef}">    <a href="${pageLinkReference}">${page.title}</a> </div> Output: (We can see the additional div tag around the anchor elements.     <div>            <a href="/content/sampleproject/fr.html">This text is populated from the component</a>     </div> To remove the additional div use the below example with sly elements     <sly data-sly-test.pageLinkReference="${properties.cq:pageLinkRef}">          <a href="${pageLinkReference}">${page.title}</a>     </sly> Output: <a href="/content/sampleproject/fr.h

Sightly data-sly-test Use this tag for printing any tag if the value exists, if the value does not exists, the tag itself will not be displayed. This tag will also be used for assigning any values as below <div data-sly-test.pageLinkReference="${properties.cq:pageLinkRef}">    <a href="${pageLinkReference}">${page.title}</a> </div> data-sly-list Use this tag to print any list of objects Printing component properties in Sightly  ${properties.text} ${properties.linkTo} Note: In the above example: text and linkTo are the property names Sample to displaying using data-sly-test <div data-sly-test="${properties.linkTo}"> <a href="${properties.linkTo}.html">${properties.text}</a> </div> Sample to retrieve data from a regular service in AEM <div data-sly-test="${properties.linkTo}"> <a href="${linkComponent.link}.html" data-sly-use.linkComponent=&

To start the AEM in debug mode, start the server with the below command java -jar aem-author-p4502.jar -debug 45024 -debug is used to start the server in the debug mode  40524 is the debug port Once the server is up and running, Configure the debug configurations in your IDE (Eclipse, etc..) For Eclipse: Click on Debug Configurations from the Debug Menu Create a new "Remote Java Application" Enter the details as below:            Name: sampleproject            Project: sampleproject.core            Host: localhost            Port: 45024 (Same port as the AEM instance has run on the debug mode) Apply the changes and Click on Debug Once the above configurations are completed, add a break point in any service/model/utility class. when we try to refresh the page where the respective service is being called, Debug mode will be started/triggered in eclipse. Congratulations on starting your AEM instance in Debug mode. Happy Debugging!!

AEM projects can be created using the Maven archetypes Run the below command to create the project.  mvn  org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=12 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/ Archetype Version - 12 for AEM 6.3 or newer Archetype Version - 11 for AEM 6.2 or newer Provide the required information as below example: groupId:                             com.sudheer.aemgroup artifactId:                           sampleproject version:                              1.0-SNAPSHOT package:                            com.sudheer.aem appsFolderName:               sampleproject artifactName:                      sampleproject componentGroupName:     sampleproject confFolderName:                sampleproject contentFolderName:           sampleproject cssId:                                   sampleproject p