Static templates and custom components to core components and editable templates

[Sreenk]

Hi All

Need some suggestions

We are having pages built on static templates using at least 50+ custom components

There is a plan to migrate to Editable templates and core components

These are the questions i have

1. In static template we use design mode to configure many components (Eg: header, navigation, footer etc) via design dialog and these properties are stored under /etc/d/esigns node. how do we migrate or redesign these components.

2. We have a style system based on which current custom components are developed. if we need to use core components and be able to use the available style system, using core components without any customisation wont work, whole mark up needs to change to match the existing style system. How to use core components if we have to use the existing style system?

Please provide your valuable suggestions

[EstebanBustamante · Accepted solution]

Hi, 

First, look at https://opensource.adobe.com/aem-modernize-tools/ which was designed for the easy conversion of:

• Static templates to editable templates
• Design configurations to policies
• Foundation Components to Core Components
• Classic UI to Touch-Enabled UI

This tool most likely will solve your problems.

Answering your questions:

1. The design configurations must convert into policies, so you won't have problem with that, the tool will help with this.

2. The core components are intended to be extended, so it is totally fine to add into your proxy core components your own style system. You can check more here about how to extend core components: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

https://www.digitalum.eu/blog/english/sling-models-part-6-customizing-aem-core-components/ 

Hope this helps.

[HrishikeshKa]

Hi @Sreenk ,

Migrating from static templates and custom components to editable templates and core components can be a complex process, but here are some suggestions to help you address your questions:

1. Migrating Design Dialog Properties: To migrate the design dialog properties from your static templates to editable templates, you can create a new design system in AEM and define the design properties for your components using the Design Editor. You can then apply the design system to your editable templates and core components. You may need to update your custom components to use the new design system and remove any references to the old design properties.

2. Using Existing Style System with Core Components: To use your existing style system with core components, you can create a new client library in AEM and define the styles for your components using CSS. You can then apply the client library to your editable templates and core components. You may need to update your custom components to use the new client library and remove any references to the old styles. You can also use the Style System Editor in AEM to define your styles and apply them to your components.

Overall, migrating to editable templates and core components requires careful planning and execution. You may need to update your custom components, create new design systems and client libraries, and test your pages thoroughly to ensure that everything works as expected. It is recommended to work with an experienced AEM developer or consultant to help you with the migration process.

[kautuk_sahni]

@Sreenk Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.