AEM as a Cloud Service: How to Make Your Legacy Assets Overlay Work in the New Assets View UI

 

The new Assets View UI in AEM as a Cloud Service introduces a modern experience: but it also breaks many legacy overlays created for the classic Assets interface. This article explains why your existing asset overlay no longer works, what changed under the hood, and the exact steps needed to migrate or rebuild your customization for the new UI. Whether you're using overlays for metadata forms, custom buttons, Rendition workflows, or UI tweaks, this guide helps you identify the root cause and apply the right fix so your AEM asset customizations continue to function seamlessly in the updated interface.

 

Our experience home looks as below, 

 

The URL for assets home is: https://experience.adobe.com/?repoId=author-pXXXX-eXXXX.adobeaemcloud.com#/@client/assets/browse

 The new UI will take you to below experience.

 Traditional Assets Navigation

The traditional method of using repository-level overlays under /apps to customize the Assets console does not work for the new Assets view UI in AEM as a Cloud Service because the new UI is built on a modern micro-frontend architecture. 

To fix this, you must rebuild your customizations using the AEM Assets View UI Extensibility framework, which leverages Adobe App Builder and microservices to integrate custom components. 

Steps to Rework Your Customization

1. Understand the New Architecture: The "Assets view" is a separate, search-first application that uses a micro-frontend architecture. Customizations are no longer simple JCR node overlays but rather independent UI extensions that integrate via defined extension points.
2. Enable Assets Ultimate (Prerequisite): The UI extensibility feature is part of the Assets Ultimate offering. Ensure your Cloud Manager program has Assets Ultimate enabled. You may need to create an Adobe Customer Support case to get access.
3. Set Up Your Development Environment:

1. Install the Adobe I/O command-line tool (AIO CLI) locally.

2. Ensure you have a good understanding of JavaScript, Node.js, and React technologies, as these are used for building the extensions.

3. Set up your local environment for UI extension development as described in the official Adobe Experience League documentation.

4. Develop the UI Extension:

1. Use the AIO CLI to generate the basic structure for your extension.

2. Identify the appropriate extension point (e.g., aem/assets/details/1 for custom side panels on the asset details page, or points for Quick Actions and the Actions Bar) that corresponds to your original overlay's functionality.

3. Develop your custom UI components using the React Spectrum library.

5. Test Locally: The framework allows you to test your extensions locally, connecting them to the production AEM Assets View for testing before full deployment.
6. Deploy: Deploy your extension using Cloud Manager pipelines. The extensions are hosted outside of AEM as a Cloud Service, which helps streamline maintenance and reduce the total cost of ownership. 

By following the official Enable UI extensibility in AEM Assets View guide, you can successfully migrate your customizations to the new UI architecture

Second Option: Replace overlays with a Sling Servlet + Upload Restriction Validator

You must enforce restrictions at server-side, because UI overlays are not guaranteed to run in CS.

Steps

1. Create a Servlet Filter or Sling Upload Servlet Extension that intercepts uploads under /content/dam.
2. Apply your logic:
• MIME type restrictions
• Folder-level restrictions
• File size limits
3. If invalid, return an HTTP error (e.g., 403 or 409) with a meaningful message.
4. AEM UI will automatically surface the error during upload.