AEM UI extensibility

Last update: 2024-01-25
  • Created for:
  • Beginner

Adobe Experience Manager (AEM) offers a powerful user interface (UI) for creating digital experiences. To customize and extend the UI, Adobe introduced App Builder. This tool empowers developers to enhance the user experience without complex coding using JavaScript and React.

App Builder provides an implementation layer for creating extensions that are bound to well define extension points in AEM. App Builder seamlessly integrates with AEM, allowing real-time preview and testing. Deploying changes to AEM is quick and streamlined. By using App Builder, developers save time and effort, enabling rapid prototyping and collaboration with stakeholders.

Develop an AEM UI extension

AEM’s various UIs have different extension points, however the basic concepts are the same.

The videos and walk-throughs provided linked below showcase the use of a Content Fragment Console extension to illustrate various activities. However, it’s important to note that the concepts covered can be applied to all AEM UI extensions.

  1. Create an Adobe Developer Console project

  2. Initialize an extension

  3. Register an extension

  4. Implement an extension point

    Extension points and their implementations vary based on the UI being extended.

  5. Develop a modal

  6. Develop an Adobe I/O Runtime action

  7. Verify an extension

  8. Deploy an extension

Adobe Developer documentation

Adobe Developer contains developer details on AEM UI extensibility. Please review the Adobe Developer content for further technical details.

On this page