Madhu Samala

AEM Developer

Synchronizing the code between AEM Instance and Eclipse

In this post, we will learn how to sync the code between AEM Instance and Eclipse.

Versions Used : AEM -> 6.3 , Eclipse -> Oxygen 3a

We will use AEM Developer tools eclipse plugin to do the sync operation.

Install AEM Developer tools in Eclipse

1) Open eclipse -> Go to Help -> click on Eclipse Marketplace.


2) Search for AEM Developer tools and install the plugin.


Import AEM maven project into Eclipse

In Project explorer view -> right click and select Import option.

On Import popup window -> select maven -> existing maven projects.


Click Next -> browse maven project root directory.


Click finish. Now our AEM project is imported into eclipse.

Change the default perspective to AEM perspective

Go to Windows -> perspective -> open perspective -> select AEM -> click open


Now we have our project on AEM perspective.


Convert the maven modules into content and bundle projects

Right click on demo.core module -> configure -> click on convert to Bundle Project.


similarly right click on demo.ui.apps module -> select configure -> click on convert to Content Project.

Configure AEM server connector in Eclipse Servers view

To connect eclipse to AEM server click on “no servers are available” link in servers view.


Click finish. To edit the server connection details like port , debug port, username and password,  double click on the configured server connector.


Edit the properties and save.

To add the bundle and ui.apps package to the configured server -> right click on the server connector -> select Add or Remove.


Add the bundles from left section to the right using Add button and click finish.


Start AEM Instance


Once the AEM Instance is started, go to eclipse and start the configured server in the Eclipse.


once server is started, the bundle and ui.apps modules will be published to the AEM server.

To verify go to OSGi bundles console and find the demo.core module.


If the bundle and ui.apps module is not published to the AEM server, republish the modules by removing all modules and adding them again to the Eclipse server connector.


Now the Demo project is deployed to AEM.

Importing the Code changes from AEM Instance to Eclipse

open CRXDE and edit a component html file.


Helloword.html file is updated with text “welcome to my world”as shown above.

To get the updated component to eclipse workspace, in eclipse right click on helloworld.html file and click on Import from server.


The file will be imported from the AEM Instance to eclipse.


Exporting the code changes from Eclipse to AEM

Updated helloword.html with some text in eclipse workspace as shown below.


The updated file will automatically synchronized/pushed to AEM Instance.



Madhu Samala 

Customizing Granite UI Form Field Component

In this article, I will be showing how to customize a Granite UI Field component with an example.

Use case: Customize the Granite UI Textarea field component to display the number of characters the author has entered in the field.

Granite UI already provided a range of components designed to be used in Touch UI dialogs, and in AEM these form field components are available under /libs/granite/ui/components/foundation/form/*

Every Granite UI Form field component inherits /libs/granite/ui/components/foundation/form/field component.

The Granite UI base field component is composed of three files:

field.jsp: handles the generic processing, labelling, description and calls init.jsp and render.jsp

init.jsp:  provides form value that we will need when rendering the field.

render.jsp: this is where the actual rendering of the field is performed and needs to be overridden for our custom field.


By default all the OOTB Granite UI form components uses the sling:resourceSuperType property to inherit from base field component and overrides the render.jsp.


To customize the Textarea component and show the number of characters the author has entered and recommended character count.

Step 1 : overlay or override the OOTB Textarea component into /apps/<project>/<any> folder.


Step 2 : modify the render.jsp file to show the  recommended character count/no. of characters entered using coral UI character count api below the field.

Ref :

Highlighted is the new code added to the overriden Textarea render.jsp file.


Step3: Assign the custom Textarea component to the dialog field nodes.



When the maxLength property is set on the field node its shows the assigned max length value else it shows zero.

I have assigned maxLength 20 on short description field and on long description field maxLength property is not set.



When the maximum Length has reached it displays error by highlighting the field with red border and the count goes to negative. If the MaxLength is not set then the count will be increased from zero to the number of characters entered.


Hope this will be useful.:)

Thank you!

Madhu Samala

AEM with Angular2

In this post, I will be sharing my view on Integrating AEM 6.1 with Angular2 and other front-end technologies with an example.

Getting started 


AEM component with Angular2.

  • Create an AEM with Angular2 Form Component which displays address suggestions to the user when the user starts typing in the address field and when the user selects one of the address suggestions, it should auto populate the country, state and zip code fields.
  • Leverage Angular2 Http Service to make Ajax calls to google maps API for the address suggestions and address details and display the response using Angular data-binding feature.
  • Leverage AEM Authoring capabilities to make the Form component labels authorable from the component dialog.

AEM Project Setup

Generate the project structure using maven archetype 10 and remove unwanted modules (ui.content, it.tests and it.launcher) for this project. Now we have two modules.

  • Core – contains Java files.
  • ui.apps – contains templates, components, Clientlibs and Angular2 code.


Maven archetype 10 gives the basic project setup with template, page components and Clientlibs. So I’m directly jumping on to creating the Form component.

Creating the Contact Details Form Component

  • Create an AEM component with the name “contactdetails” under apps/ng2-aem/components/content/.
  • Use bootstrap ui framework to build the Form component UI.
  • Create the Touch UI dialog to make the Form title, description, first name, last name, email and address field’s labels authorable.

Backend Code

ContactDetails POJO class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/models/

The ContactDetails class contains class members to match the fields specified in the component’s dialog, and also contains their getter and setter methods.


ContactDetailsUse class

–  /NG2-AEM.core/src/main/java/com/ng2/aem/core/components/

The ContactDetailsUse is the server-side part of the AEM component and it extends the WCMUsePojo class.


Contactdetails component HTL file

– apps/ng2-aem/components/content/contactdetails/contactdetails.html

Assuming that you are already familiar with creating component and dialog in AEM, i’m not showing the steps here to create it.


Component Dialog


Setting up the Angular2 code

Create a folder named “web” under /NG2-AEM.ui.apps/src/main/. This folder will contain our Angular2 code and its build configuration.

Build configuration

Create the following files under web folder.



Few words about scripts

build   :  invokes the “gulp build” task which then calls the “run-webpack” task to transpile Typescript code into JavaScript and bundle all the JS files into two files and place it into the AEM clientlib folder.

aemsync :  invokes the “gulp aemsync” task to sync the generated JavaScript files under “etc/designs” to running AEM Instance.

watch   :  invokes the “gulp watch” task to watch the for the changes in typescript files, and when there is a change in typescript files it calls the “run-webpack” task.

NPM Packages

Angular 2 is broken into a lot of packages under @angular organization in NPM. We’ll need to install them and also need RxJS, Zone.js, and some shims which Angular2 depends on.





Typings will be downloaded to typings folder and they will be downloaded on “npm install”.


In Webpack config file we specify all the source files where they are available and how to compile and then after compilation where to put them.

Here I’m using webpack to transpile the Typescript code to JavaScript and bundle all the files into two JS files and place them into /etc/designs/ng2-aem/clientlib-site/js Clientlib folder.

  • app.js – contains the application code.
  • pollifills.js – contains the browser supporting libraries.



Gulp JS file contains following tasks.

  • clean   : deletes the JS files from “/etc/designs/Ng2-AEM/clientlib-site/js” clientlib folder before webpack task runs.
  • run-webpack   : executes the webpack config file.
  • aemsync  : sync the JS files created with webpack to running AEM Instance.
  • watch   : watches for the changes made on Typescript files and runs run-webpack task.


Angular2 Components

Angular2 is component based. Component is the combination of an HTML template and a component class that controls a portion of the screen.

Every component begins with a @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component’s html inside a custom () tag.

The templateUrl property specifies the URL to an external file containing the html for the view.

ContactDetails Angular2 component

– web/src/app/components/contactdetails.component.ts



AddressSuggestion Model class

– web/src/app/models/address-suggestion.ts


ContactForm Model class

– web/src/app/models/contact-form.ts


ContactDetailsService Interface

– web/src/app/services/Icontactdetails.service.ts


ContactDetailsService class

– web/src/app/services/contactdetails.service.ts


Application Module

– web/src/app/app.module.ts


Application bootstrap

– web/src/main.ts


Part2 : Click here to continue

AEM with Angular2 – part2

Modify AEM Component to render Angular2 component content

In the AEM component’s HTL file “contactdetails.html” replace the entire Form html portion with the following Angular2 component selector,

<contact-details message=’${contactForm.contactDetails.contactJson}’>Loading contact form……</contact-details>

this selector will be used to render the Angular2 component’s html on the page, and we will need to pass the AEM dialog authored values as an input to the Angular2 component.

Angular2 root components do not allow to pass inputs using @Input(), so we will pass the dialog values as an selector tag attribute value.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.html


To display the content of Angular2 component we must have a separate .html template file, so create a new file “contactdetails.component.html” in the AEM component and copy the Form html in it. The path of this file need to be assigned to the templateUrl metadata property of Angular2 component.

–  /apps/ng2-aem/components/content/contactdetails/contactdetails.component.html






Modify UI.apps Maven POM file

– /NG2-AEM.ui.apps/pom.xml

Add the following exec maven plugin to the POM file.



mvn clean install -PautoInstallPackage

The maven build will invoke the Exec maven plugin which will trigger “npm install” and “npm run build” tasks which then executes the gulp build task which does the whole build process for the Angular2 code.

npm run aemsync : to manually sync the generated js files to running AEM instance without maven build.

Final Project Structure





Drag the component on to the page and author the field labels in the dialog.


When the user starts typing in the address field, suggestions will be shown below the field and when the user clicks on one of the address suggestions, the country, state and zip code fields are auto populated.



Thank you!

Madhukar Reddy

Powered by

Up ↑