Adobe Experience Manager Asset Selector

The Adobe Experience Manager Asset Selector app allows you to select media from your Adobe Experience Manager (AEM) as a Cloud Service Assets repository directly inside the Contentful web app.

The Adobe Experience Manager Asset Selector is a widget that allows editors to browse and select assets from their AEM as a Cloud Service Assets repository using Adobe's own Content Advisor picker. Simply click Select assets on the field, sign in with your Adobe account, and choose the assets you want referenced from your entry.

Selected assets, including their ID, name, URL, and metadata, are then stored in Contentful. Editors can reorder or remove selected assets directly in the entry field without reopening the picker.

To use this app, you will need:

• Space Admin access to the Contentful space where you are installing the app.

• An AEM as a Cloud Service instance with Assets enabled.

• An IMS Client ID for your Adobe account: Request it directly from Adobe support.
  
  NOTE: Client IDs created through the standard Adobe Developer Console are not compatible with Content Advisor and will not authenticate.

• Your IMS Organization ID, visible in the Admin Console URL at adminconsole.adobe.com/<OrgID>/overview.

• A content type with a field of type Object to hold the references to AEM assets.

• Approval from Adobe support to allowlist this app's hosted origin, https://31a0d146-8411-4c45-8df6-f0240ccc085e.ctfcloud.net/, on your IMS Client ID. Authentication won’t work until this step is completed.

Step 1: Install and configure

1. Log in to the Contentful web app.

2. Under Platform, click Apps.

3. Under Marketplace, click All apps.

4. Navigate to the Adobe Experience Manager Asset Selector app and click on its card. The App details window is displayed.

5. Click Install. The Manage app access window is displayed. 

6. Under Environments, select the environments in which you want to install the app.

7. Click Authorize access. The configuration window is displayed.

8. Under Configuration, provide your IMS Client ID and IMS Organization ID in the respective fields.
   
   NOTE: You can also optionally set a Repository ID (example: delivery-p127268-e1240693.adobeaemcloud.com) to restrict selection to a single AEM repository, an AEM Tier (delivery, author, or both), an Environment (prod or stage), and whether to hide the asset upload button inside the picker.

9. Under field assignment, select the content type fields that you want this app to be used for.
   
   NOTE: Only compatible fields of type Object are displayed under the Assign to fields area.

10. Click Install to finish the installation and save the configuration.

Step 2: Request origin allowlisting from Adobe

Contact Adobe Support and ask them to add this app’s hosted origin to the allowlist for your IMS Client ID:

https://31a0d146-8411-4c45-8df6-f0240ccc085e.ctfcloud.net/

Include your IMS Client ID and Organization ID in the request.

Editors cannot sign in until the origin is allowlisted. If it is missing, the sign-in pop-up will open and close immediately without displaying an error.

Step 3: Using the app in Contentful

To reference an asset on AEM from your entry:

1. Click Select assets on the field.

2. Sign in with your Adobe account through the IMS pop-up if you are not already signed in.

3. Browse or search for assets in the Content Advisor picker.

4. Select the assets you want and confirm your selection.

Previews of your assets will now appear in your entry. You can reorder or remove them from the entry field at any time.

The hideTreeNav and selectionType options are supported by Adobe's Content Advisor picker, but they are not currently exposed as fields in this app's configuration screen. To set them, you'll need to add them directly to the field's control settings using the Content Management API (CMA).

Available options:

To set these values:

1. Find the content type and field ID where the AEM Assets app is assigned as the field's appearance.

2. Use the Contentful Management API to fetch the content type's editor interface:
   

   GET /spaces/{space_id}/environments/{environment_id}/content_types/{content_type_id}/editor_interface

3. In the response, locate the controls array entry for your field (matching fieldId), and add or update its settings object to include the properties you want, for example:
   

   {
"fieldId": "aemAssets",
"widgetNamespace": "app",
"widgetId": "<app_id>",
"settings": {
"hideTreeNav": true,
"selectionType": "multiple"
}
}

4. Save the updated editor interface with a PUT request, including the X-Contentful-Version header set to the current version from step 2:
   

   PUT /spaces/{space_id}/environments/{environment_id}/content_types/{content_type_id}/editor_interface

5. Reload the entry editor. The new settings will take effect the next time the asset picker dialog opens.

NOTE: These settings apply per field, not globally to the app installation. If you assign the AEM Assets app to multiple fields, repeat this process for each field where you want non-default behavior.

Why doesn't my IMS Client ID work?

Content Advisor requires a Client ID provisioned through an Adobe support ticket. Client IDs created via the standard Adobe Developer Console are incompatible with this app and will fail to authenticate.

What field type should I use for this app?

The app requires a field of type Object. If your content type doesn't have one, add a new field of that type before assigning the app to it.