AEM Content Fragments Console extension

AEM Content Fragments Console extensions can be added through two extension points: a button in the Content Fragment Console’s header menu or action bar. The extensions are written in JavaScript that run as App Builder apps - and can implement a custom web UI and serverless Adobe I/O Runtime actions to perform more intensive, long-running work.

AEM Content Fragments Console extension
Extension type Description Parameter(s)
Header menu Adds a button to the header that displays when zero Content Fragments are selected. None.
Action bar Adds a button to the action bar that displays when one or more Content Fragments are selected. An array of the selected Content Fragments’ paths.

A single AEM Content Fragments Console extension can include zero or one Header menu, and zero or one Action bar extension type. If multiple extension types of the same type are required, multiple AEM Content Fragments Console extensions must be created.

AEM Content Fragments Console extensions, require an Adobe Developer Console project and an App Builder app using the @adobe/aem-cf-admin-ui-ext-tpl template, associated with the Adobe Developer Console project.

Select from the following capabilities when generating the App Builder app, based on what the extension does. Any combinations of options can be used in an extension.

Add button to Header menu Add button to Action Bar Show Modal Add server-side handler
Available when Content Fragments are not selected ✔
Available when one or more Content Fragments are selected ✔
Collects custom input from user ✔️
Displays custom feedback to user ✔️
Invokes HTTP requests to AEM ✔
Invokes HTTP requests to Adobe/3rd party services ✔

Adobe Developer documentation

Adobe Developer contains developer details on AEM Content Fragment Console extensions. Please review the Adobe Developer content for further technical details.

Develop an extension

Follow the steps outlined below to learn how to generate, develop, and deploy an AEM Content Fragment Console extension for AEM as a Cloud Service.

Create Adobe Developer Project

1. Create a project

Create an Adobe Developer Console project that defines it's access to other Adobe services, and manages its deployments.

Create an Adobe Developer Project
Initialize an extension app

2. Initialize an extension app

Initialize an AEM Content Fragment Console extension App Builder app that defines where the extension appears, and the work it performs.

Initialize an extension app
Extension registration

3. Extension registration

Register the extension in the AEM Content Fragment Console as a header menu or action bar extension type.

Register the extension
Header menu

4a. Header Menu

Learn how to create an AEM Content Fragment Console header menu extension.

Extend the header menu
Action Bar

4b. Action Bar

Learn how to create an AEM Content Fragment Console action bar extension.

Extend the action bar
Modal

5. Modal

Add a custom modal to the extension that can be used to create bespoke experiences for users. Modals often collect input from users, and display the results of an operation.

Add a modal
Adobe I/O Runtime action

6. Adobe I/O Runtime action

Add a serverless Adobe I/O Runtime action that the extension can invoke to interact with Content Fragments and AEM to perform custom business operations.

Add an Adobe I/O Runtime action
Test

7. Test

Test the extensions during development, and sharing completed extensions to QA or UAT testers using a special URL.

Test the extension
Extension deployment

8. Production deployment

Deploy the extension to Adobe I/O making it available to AEM users. Extensions can be updated, and removed as well.

Deploy to production

Example extensions

Example AEM Content Fragment Console extensions.

Bulk property update extension

Bulk property update extension

Explore an example action bar extension that bulk updates a property on selected Content Fragments.

Explore the example extension
OpenAI-based image generation and upload to AEM extension

OpenAI-based image generation and upload to AEM extension

Explore an example action bar extension that generates an image using OpenAI, uploads it to AEM and updates image property on the selected Content Fragment.

Explore the example extension

On this page