AEM - Sightly Elements

-
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.html">This text is populated from the component</a>


Data-sly-unwrap with conditional check to remove the HTML tags.

<div data-sly-test="${properties.linkTo}" data-sly-unwrap="${properties.displayText}">
<a href="${properties.linkTo}.html">${properties.text}</a>
</div>


 data-sly-text
This element replaces the content of its host element with the specified text.

<p data-sly-text="${properties.text}">Lorem ipsum</p>

Update attribute values using data-sly-attribute

<div title="Lorem Ipsum" data-sly-attribute.title="${properties.text}"></div>

data-sly-repeat

Use this element to repeat the HTML element around the object in a list
Example:
<div data-sly-repeat="${currentPage.listChildren}">${item.name}</div>


Change the default item and itemlist names to a different variable as below:

      <dl data-sly-list.child="${currentPage.listChildren}">
           <dt>index: ${childList.index}</dt>
           <dd>value: ${child.title}</dd>
      </dl>


Adding extension to a Link

<a href="${properties.linkTo @ extension = 'html'}">${properties.text}</a>

Comments

Post a Comment

Popular posts from this blog

Delete DAM Asset using Workflow

-
This article shows you to create a simple workflow process step and use it for deleting an DAM Asset. You can ask me why do I need a workflow when I can delete it directly using the delete button :) The intention is to validate the asset information before deleting the asset or trigger any other workflow for the asset and do manipulations like updating the asset data to an user before the deletion as you will not be able to get that post deletion. you can catch the events in the Event Listeners, but there will be no data by then. Simple Workflow Process Step Create a workflow process step by using the below example package com.flash.aem.core.workflow; import java.util.HashMap; import java.util.Map; import javax.jcr.Node; import javax.jcr.RepositoryException; import javax.jcr.Session; import org.apache.sling.api.resource.LoginException; import org.apache.sling.api.resource.ResourceResolver; import org.apache.sling.api.resource.ResourceResolverFactory; import org.osgi....
Read more

Groovy Console Integration and executing scripts in AEM

-
Image
Steps to install Groovy in AEM. Below Github have the steps to install the latest Groovy console https://github.com/icfnext/aem-groovy-console You can also navigate to the releases section and download the required package. https://github.com/icfnext/aem-groovy-console/releases I have used 12.0.0 version for this demo. Download the Groovy Package ( Direct link to the package  ) Upload the package to AEM via Package manager  http://localhost:4502/crx/packmgr/index.jsp Once the package is installed, you should be able to access the groovy console  http://localhost:4502/etc/groovyconsole.html Note: From 13.0.0 release, the paths were changed from /etc/ to /apps/ to access Groovy Console Sample Groovy Scripts: Printing a simple String println 'Hello World'; Click on Run Script Displays Hello World in the Console Get a Page Object final def page = getPage('/content/aem-flash') println 'page path is: ' + page.path; Re...
Read more

AEM Project Maven Build - Easy setup and steps to run commands via command line

-
We generally run maven commands every day to deploy the bundles or any other changes in the project to AEM server. There are a lot of options to sync them automatically like using Brackets or AEM Server plugin configurations in IDE's etc.. These are very faster for deployments and changes to be reflected in AEM server In case if you would like to do a complete build, we can run the same from Eclipse by using the run commands or via command prompt using the complete maven command but IDE's generally occupy lot of memory and might slow down sometimes. I generally use Command prompt for the builds. I generally navigate to the repo folder and type the maven command " mvn clean install -PautoInstallPackage,adobe-public " Note: adobe-public can be ignored if you already set the repo in the maven settings I work on different projects and repositories every day and navigating to different folders and typing the same command (You can always copy and paste the comman...
Read more