Level 2

Solved

Best practice to update the component and template created in classic UI to touch UI without using the migration tool

Forum|Forum|2 years ago
October 10, 2023
4 replies
1282 views

Hi Community!

I have some components created in classic UI, and now I plan to upgrade the system to touch UI.

I will not use the migration tool and i'm wondering what is best process to rebuild those components, also recreate the templates.

Is there any code example showing the best practice to archieve that?

Prefer some help!

Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Harwinder-singh

@zonghuiliu , The AEM modernization suite should be able to help you achieve that.

Is there any constraint to use this feature from Adobe.

If there is , the only way out to develop a set of custom migration scripts but that would have the following disadvantages :

Re-inventing the wheel obviously.
You may miss out on certain edge cases that the modernization suite is able to take care of.

https://opensource.adobe.com/aem-modernize-tools/

kautuk_sahni

Community Manager

@harwinder-singh @sady_rifat Can you please review this Question and share your thoughts?

Kautuk Sahni

Shashi_Mulugu

Community Advisor

@zonghuiliu can you please explain your thoughts behind why are you not planning to use migration tool built by Adobe?

Z

zonghuiliuAuthor

Level 2

Hi Shashi,

Because i'm considering rebuild some of components with a new logic while some of the components remain the same usage.

Sady_Rifat

Community Advisor

To migrate from classic UI to touch UI you can keep in mind the following things,

Component Migration:

Recreate the dialog and use the latest coralUI3 fields.
Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/server.html
Demo: https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/components.html
If you plan to modify the component HTL or Java code, then you should always write associate Sling Model Class instead of using ${properties.sometihing} in HTL.
For the Sling Model, you should follow the Sling Deligation Pattern Structure.

Template Migration:

Create editable templates. Where from the developing end create only the blueprints instead of creating the actual page template. As follows the best and recommended practice Author should create the Actual Page Template from the blueprint using touch UI.
The `template-types` from the codebase should be very basic and contain the bare minimum structure.
Detailed Structural Documentation: https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/templates/page-templates-editable.html?lang=en
Simple Guideline: https://www.north-47.com/editable-templates-in-aem-6-5/

Harwinder-singh

Accepted solution

Community Advisor

@zonghuiliu , The AEM modernization suite should be able to help you achieve that.

Is there any constraint to use this feature from Adobe.

If there is , the only way out to develop a set of custom migration scripts but that would have the following disadvantages :

Re-inventing the wheel obviously.
You may miss out on certain edge cases that the modernization suite is able to take care of.

https://opensource.adobe.com/aem-modernize-tools/

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded