Micro-Frontend Asset Selector Overview

Micro-Frontend Asset Selector provides a user interface that easily integrates with the Experience Manager Assets repository so that you can browse or search digital assets available in the repository and use them in your application authoring experience.

The Micro-Frontend user interface is made available in your application experience using the Asset Selector package. Any updates to the package are automatically imported and the latest deployed Asset Selector loads automatically within your application.

Asset Selector provides many benefits, such as:

Prerequisites prereqs

You must ensure the following communication methods:

Use the above prerequisites if you require the IMS authentication workflow of Asset Selector. Alternatively, if you are already authenticated with the IMS workflow, you can add the IMS information instead.

See more

Installation installation

Asset Selector is available via both ESM CDN (For example, esm.sh/skypack) and UMD version.

In browsers using UMD version (recommended):

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

In browsers with import maps support using ESM CDN version:

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

In Deno/Webpack Module Federation using ESM CDN version:

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

Using Asset Selector using-asset-selector

Once the Asset Selector is set up and you are authenticated to use Asset Selector with your Adobe Experience Manager as a Cloud Service application, you can select assets or perform various other operations to search for your assets within the repository.

Hide/Show panel hide-show-panel

To hide folders in the left navigation, click the Hide folders icon. To undo the changes, click the Hide folders icon again.

Repository switcher repository-switcher

Asset Selector also lets you switch repositories for asset selection. You can select the repository of your choice from the drop-down available in the left panel. The repository options available in the drop-down list are based on the repositoryId property defined in the index.html file. It is based on the environment from the selected IMS org that is accessed by the logged in user. Consumers can pass a preferred repositoryID and in that case the Asset Selector stops rendering the repo switcher and render assets from the given repository only.

Assets repository

It is a collection of assets folders that you can use to perform operations.

Out-of-the-box filters filters

Asset Selector also provides out-of-the-box filter options to refine your search results. The following filters are available:

Custom search

Apart from the full-text search, Asset Selector lets you search assets within files using customized search. You can use custom search filters in both Modal view and Rail view modes.

You can also create a default search filter to save the fields that you frequently search for and use them later. To create custom search for your assets, you can use filterSchema property.

Search bar search-bar

Asset Selector lets you perform a full text search of assets within the selected repository. For example, if you type the keyword wave in the search bar, all the assets with the wave keyword mentioned in any of the metadata properties are displayed.

Sorting sorting

You can sort assets in Asset Selector by name, dimensions, or size of an asset. You can also sort the assets in ascending or descending order.

Types of view types-of-view

Asset Selector lets you view the asset in four different views:

Overview Graphic

Learn more on key capabilities key-capabilities-asset-selector