Get more content like this

GUI Migration Tool

GUI Migration Tool

Our goal was to build a tool to help authors import legacy website's content into a new site in CQ graphically through an UI. Author can select any page on 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 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 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 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.

Learn more about how TechAspect can help you propel your digital transformation

Get In Touch