DocumentationAEM Pattern Detection

LUI lui

Last update: Thu Jun 01 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer

Legacy User Interface

Background background

LUI identifies the use of deprecated user interface elements that are not recommended or not supported in later versions of AEM and in AEM as a Cloud Service.

Subtypes are used to identify the different types of user interface elements that should or must be upgraded:

  • legacy.dialog.classic: Classic UI dialogs based on ExtJS must be changed to Coral.

    • This is detected when the dialog name is “dialog” or “design_dialog” and when
      the jcr:primaryType property value or the xtype property value is “cq:Dialog”.

  • legacy.dialog.coral2: Coral 2 dialogs should be updated to use Coral 3.

    • This is detected when the dialog and its child content node names are “cq:dialog/content”,
      “cq:design_dialog/content”, “cq:dialog.coral2/content”, or “cq:design_dialog.coral2/content”
      and the sling:resourceType property value does not contain
      “granite/ui/components/coral/foundation”.

  • legacy.custom.component: Components that inherit from foundation/components should be updated to use Core Components.

    • This is detected when the jcr:primaryType property value is “cq:Component” and the
      sling:resourceSuperType property value contains “foundation/components” or any of the
      sling:resourceSuperType property values of the chain of supertype components contain
      “foundation/components”.

  • legacy.static.template: Static Templates should be upgraded to Editable Templates.

    • This is detected when the jcr:primaryType property value is “cq:Template”.

  • content.fragment.template: Content Fragment Templates should create fragment models to replace the fragment templates.

    • Content fragment templates can be found at the following locations :

      • Out of the box content fragment templates are stored in /libs/settings/dam/cfm/templates
      • They can be overlaid in /apps/settings/dam/cfm/templates or /conf/.../settings/dam/cfm/templates(… = global or “tenant”)

  • translation.dictionary: I18n dictionary present under /apps.

    • /apps is immutable at runtime and translator.html would no longer be available in AEM as a cloud service.

Possible implications and risks implications-and-risks

  • The Classic UI is no longer available in AEM as a Cloud Service. The standard interface for authoring is the Touch-enabled UI.
  • Relying on legacy custom components may increase maintenance costs over time.
  • Content fragment templates were superseded by content fragment models in AEM 6.3. Migrating content fragments that are based on legacy templates to AEM as a Cloud Service will retain these fragments as functional, but it will not be possible to create new fragments based on the legacy template. It will also not be possible to deliver these fragments using AEM GraphQL, which requires content fragment models as schemas.
  • /apps is immutable at runtime and translator.html would no longer be available in AEM as a cloud service. Thus I18n dictionaries need to come from Git via the CI/CD pipeline.

Possible solutions solutions

  • Utilize AEM Modernization Tools suite to reduce the effort needed to modernize your AEM Sites implementations. These tools include conversion of:

    • Classic (ExtJS) Dialogs to Coral Dialogs
    • Foundation Components to Core Components
    • Static Templates and Column Control to Editable Templates & Responsive Grid
    • Designs & Design Dialogs to Editable Template Policies

  • Review your project’s custom components library and transition, if possible, to the set of standardized Core Components to accelerate the development time and reduce the maintenance cost of your applications.

  • It is recommended to create content fragment models with equivalent capabilities to the legacy templates and use those models for content fragment creation moving forward.Refer to Content Fragment Models for more details.

  • I18n dictionaries need to come from Git via the CI/CD pipeline. Documentation

  • Please reach out to our AEM Support Team to get clarifications or to address concerns.

recommendation-more-help
c50d24a5-718e-4110-a484-b335e8a63206