GUI Migration Tool

Jan 03, 2014

Our goal was to build a tool to help authors import legacy website’s content into a new site in CQ graphically through a UI. The author can select any page on the old site and choose the content on it and import into CQ using a wizard. The tool should also support importing of images.


We have developed UI using latest Coral UI as the user is already familiar with the interface. We have used tree.js to provide content highlight content functionality for selecting the content on the source page. The import wizard gets fired up after we select the content


The author can then use drag-n-drop like the ability to choose the target area on any CQ page to place the content. Alternatively, the user can enter the path to any property on the page (using drop-downs) to store the content. For images, the user has to enter the DAM path as well.

Problems/Solutions encountered during development:

  • We customized the editor.html for enabling drag-drop like functionality to select the target area on the page.
  • As we cannot expect the user to manually enter property paths, we wrote services for fetching node components/properties so that user can make a selection from the list.
  • We also gave the user the ability to click on the empty parsys and add either a text component (if content chosen) or image component (if image chosen) to the page. The content is then automatically inserted into the new component.

If you would like more help optimizing or Migration in your AEM Contact Us Today.


TechAspect is an innovative digital transformation agency, specializing in delivering the digital experience, commerce, and marketing solutions. For nearly two decades, we have been helping traditional businesses transform and create dynamic digital cultures through disruptive strategies and agile deployment of innovative solutions.