Static templates and custom components to core components and editable templates

Question

Hi AllNeed some suggestionsWe are having pages built on static templates using at least 50+ custom componentsThere is a plan to migrate to Editable templates and core componentsThese are the questions i have1. 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 Answer

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-headless/spa-editor/react/extend-component

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/extend-component

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

Hope this helps.

HrishikeshKagne · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded