DocumentationAEM Pattern Detection

LUI lui

Last update: Mon May 20 2024 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. These elements 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 dialog boxes based on ExtJS must be changed to Coral.

    • This subtype is detected when the dialog box 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 dialog boxes should be updated to use Coral 3.

    • This subtype is detected when the dialog box 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 subtype 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 subtype 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 that is 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 superseded Content Fragment models in AEM 6.3. Migrating Content Fragments that are based on legacy templates to AEM as a Cloud Service retain these fragments as functional, but it is not possible to create fragments based on the legacy template. It is also not 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 must come from Git by way of the CI / CD pipeline.

Possible solutions solutions

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

    • Classic (ExtJS) Dialogs to Coral Dialogs
    • Foundation Components to Core Components
    • Static Templates and Column Control to Editable Templates and Responsive Grid
    • Designs and 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.

  • Create Content Fragment models with equivalent capabilities to the legacy templates and use those models for Content Fragment creation in the future. See Content Fragment Models for more details.

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

  • Contact the AEM Support Team for clarifications or to have concerns addressed.

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