GUI Migration Tool

By TA Digital 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 the only global boutique agency that delivers the “best of both worlds” to clients seeking to achieve organizational success through digital transformation. Unlike smaller, regional agencies that lack the ability to scale or large organizations that succumb to a quantity-over-quality approach, we offer resource diversity while also providing meticulous attention to the details that enable strategic success.

Over the past 20 years, TA Digital has positioned clients to achieve digital maturity by focusing on data, customer-centricity and exponential return on investment; by melding exceptional user experience and data-driven methodologies with artificial intelligence and machine learning, we enable digital transformations that intelligently build upon the strategies we set into motion. We are known as a global leader that assists marketing and technology executives in understanding the digital ecosystem while identifying cultural and operational gaps within their business – ultimately ushering organizations toward a more mature model and profitable digital landscape.

Recognized in 2013, 2014, 2015, 2019, and 2020 Inc. 5000 list as one of the most successful technology companies in the United States, TA Digital is pleased also to share high-level strategic partnerships with world class digital experience platform companies like Adobe, SAP and Salesforce and possess global partnerships with industry leaders such as Sitecore, Episerver, Elastic Path, BigCommerce, AWS, Azure and Coveo.

TA Digital Marketing Team

Written By

TA Digital Marketing Team