GUI Migration Tool

By Marketing Team 2 min read

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.

Explore Additional Resources

Learn how you can select the best Digital Experience platform for your business.

If you’d like to learn more about Adobe Experience Manager, visit our Adobe Practice.

About TA Digital

TA Digital 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.

Marketing Team

Written By

Marketing Team

More Blogs by the author

Personalize Adobe CQ5 Welcome screen
Personalize Adobe CQ5 Welcome screen Marketing Team 3 min read