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:
- Ease of integration with any of the Adobe or non-Adobe applications using Vanilla JavaScript library.
- Easy to maintain as updates to the Assets Selector package are automatically deployed to the Asset Selector available for your application. There are no updates required within your application to load the latest modifications.
- Ease of customization as there are properties available that control the Asset Selector display within your application.
- Full-text search, out-of-the-box, and customized filters to quickly navigate to assets for use within the authoring experience.
- Ability to switch repositories within an IMS organization for asset selection.
- Ability to sort assets by name, dimensions, and size and view them in List, Grid, Gallery, or Waterfall view.
Prerequisites prereqs
You must ensure the following communication methods:
- The application is running on HTTPS.
- The URL of the application is in the IMS client’s allowed list of redirect URLs.
- The IMS login flow is configured and rendered using a popup on the web browser. Therefore, popups should be enabled or allowed on the target browser.
Use the above prerequisites if you require IMS authentication workflow of Asset Selector. Alternatively, if you are already authenticated with the IMS workflow, you can add the IMS information instead.
- Domain names where the integrating application is hosted.
- After provisioning, your organization will be provided with
imsClientId
,imsScope
, and aredirectUrl
corresponding to the environments requested that are essential for the configuration of Asset Selector. Without those valid properties, you cannot run the installation steps.
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'
Integrate Asset Selector using Vanilla JS integration-using-vanilla-js
You can integrate any Adobe or non-Adobe application with Experience Manager Assets repository and select assets from within the application. See Asset Selector Integration with various applications.
The integration is done by importing the Asset Selector package and connecting to the Assets as a Cloud Service using the Vanilla JavaScript library. Edit an index.html
or any appropriate file within your application to:
- Define the authentication details
- Access the Assets as a Cloud Service repository
- Configure the Asset Selector display properties
You can perform authentication without defining some of the IMS properties, if:
- You are integrating an Adobe application on Unified Shell.
- You already have an IMS token generated for authentication.
Integrate Asset Selector with various applications asset-selector-integration-with-apps
You can integrate Asset Selector with various applications such as:
Prerequisites prereqs-adobe-app
Use the following prerequisites if you are integrating Asset Selector with an Adobe application:
- Communication methods
- imsOrg
- imsToken
- apikey
Integrate Asset Selector with an Adobe application adobe-app-integration-vanilla
The following example demonstrates the usage of Asset Selector when running an Adobe application under Unified Shell or when you already have imsToken
generated for authentication.
Include the Asset Selector package in your code using the script
tag, as shown in lines 6–15 of the example below. Once the script is loaded, the PureJSSelectors
global variable is available for use. Define the Asset Selector properties as shown in lines 16–23. The imsOrg
and imsToken
properties are both required for authentication in Adobe application. The handleSelection
property is used to handle the selected assets. To render the Asset Selector, call the renderAssetSelector
function as mentioned in line 17. The Asset Selector is displayed in the <div>
container element, as shown in lines 21 and 22.
By following these steps, you can use Asset Selector with your Adobe application.
code language-html line-numbers |
---|
|
accordion | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ImsAuthProps | ||||||||||||||||||||
The
|
accordion | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ImsAuthService | ||||||||||||||
|
accordion | ||
---|---|---|
Validation with provided IMS token | ||
|
accordion | ||
---|---|---|
Register callbacks to IMS service | ||
|
Prerequisites prereqs-non-adobe-app
Use the following prerequisites if you are integrating Asset Selector with a non-Adobe application:
- Communication methods
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
Asset Selector supports authentication to the Experience Manager Assets repository using Identity Management System (IMS) properties such as imsScope
or imsClientID
when you are integrating it with a non-Adobe application.
accordion |
---|
Configure Asset Selector for a non-Adobe application |
To configure Asset Selector for a non-Adobe application, you must first log a support ticket for provisioning followed by the integration steps. Logging a support ticket
|
accordion | ||
---|---|---|
Integration steps | ||
Use this example Access the Asset Selector package using the Line 14 to line 38 of the example describes the IMS flow properties, such as As you do not have an Define the authentication and other Assets as a Cloud Service access-related properties in the The Asset Selector is rendered on the
|
accordion | |||
---|---|---|---|
Unable to access delivery repository | |||
|
Asset Selector properties asset-selector-properties
You can use the Asset Selector properties to customize the way the Asset Selector is rendered. The following table lists the properties that you can use to customize and use the Asset Selector.
true
, Asset Selector is rendered in a left rail view. If it is marked false
, the Asset Selector is rendered in modal view.imsOrg
key is required to authenticate whether the organization you are accessing is under Adobe IMS or not.imsToken
is required if you are using an Adobe application for the integration.apiKey
is required if you are using an Adobe application integration.rootPath
can also be used in the form of encapsulation. For example, given the following path, /content/dam/marketing/subfolder/
, Asset Selector does not allow you to traverse through any parent folder, but only displays the children folders.<Object>
[{id: 'urn:234}, {id: 'urn:555'}]
An asset must be available in the current directory. If you need to use a different directory, provide a value for the path
property as well.rail
property to enable rail view of assets viewer.Object<{ id?: string, defaultMessage?: string, description?: string}>
i18nSymbols
prop. Passing a value through this interface overrides the default translations provided and instead use your own. To perform the override, you must pass a valid Message Descriptor object to the key of i18nSymbols
that you want to override.intl.locale
prop. For example: intl={{ locale: "es-es" }}
The locale strings supported follow the ISO 639 - Codes for the representation of names of languages standards.
List of supported locales: English - ‘en-us’ (default) Spanish - ‘es-es’ German - ‘de-de’ French - ‘fr-fr’ Italian - ‘it-it’ Japanese - ‘ja-jp’ Korean - ‘ko-kr’ Portuguese - ‘pt-br’ Chinese (Traditional) - ‘zh-cn’ Chinese (Taiwan) - ‘zh-tw’
Array<string>
{allowList?: Object}
light
or dark
) for the Asset Selector.Invoked with array of Asset items when assets are selected and the Select
button on the modal is clicked. This function is only invoked in modal view. For rail view, use the handleAssetSelection
or onDrop
functions. Example:
handleSelection=(assets: Asset[])=> {…}
See Selected Asset Type for details.
Invoked with array of items as the assets are being selected or unselected. This is useful when you want to listen for assets as user selects them. Example:
handleSelection=(assets: Asset[])=> {…}
See Selected Asset Type for details.
Close
button in modal view is pressed. This is only called in modal
view and disregarded in rail
view.single
or multiple
selection of assets at a time.Syntax:
aemTierType:[0: "author" 1: "delivery"
For example, if both
["author","delivery"]
are used, then the repository switcher displays options for both author and delivery.filterRepoList
callback function that calls Experience Manager repository and returns a filtered list of repositories.Examples to use Asset Selector properties usage-examples
You can define the Asset Selector properties in the index.html
file to customize the Asset Selector display within your application.
Example 1: Asset Selector in rail view
If the value of the AssetSelector rail
is set to false
or is not mentioned in the properties, Asset Selector displays in the Modal view by default. The acvConfig
property allows for some in-depth configurations, like the Drag and Drop. Visit enable or disable drag and drop to understand the usage of acvConfig
property.
Example 2: Metadata popover
Use various properties to define metadata of an asset that you want to view using an info icon. The info popover provides the collection of information about asset or the folder including title, dimensions, date of modification, location, and description of an asset. In the example below, various properties are used to display metadata of an asset, for example, repo:path
property specifies the location of an asset.
Example 3: Custom filter property in rail view
In addition to the faceted search, Assets Selector lets you customize various attributes to refine your search from Adobe Experience Manager as a Cloud Service application. Add the following code to add customized search filters in your application. In the example below, the Type Filter
search that filters the asset type among Images, Documents, or Videos or the filter type that you have added for the search.
Functional setup code snippets code-snippets
Define the prerequisites in the index.html
file or a similar file within your application implementation to define the authentication details to access the Experience Manager Assets repository. Once done, you can add code snippets as per your requirement.
Customize filter panel customize-filter-panel
You can add the following code snippet in assetSelectorProps
object to customize the filter panel:
filterSchema: [
{
header: 'File Type',
groupKey: 'TopGroup',
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{
label: 'Images',
value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
},
{
label: 'Videos',
value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
}
]
}
]
},
{
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{ label: 'JPG', value: 'image/jpeg' },
{ label: 'PNG', value: 'image/png' },
{ label: 'TIFF', value: 'image/tiff' },
{ label: 'GIF', value: 'image/gif' },
{ label: 'MP4', value: 'video/mp4' }
],
columns: 3,
},
],
header: 'Mime Types',
groupKey: 'MimeTypeGroup',
}},
{
fields: [
{
element: 'checkbox',
name: 'property=metadata.application.xcm:keywords.value',
options: [
{ label: 'Fruits', value: 'fruits' },
{ label: 'Vegetables', value: 'vegetables'}
],
columns: 3,
},
],
header: 'Food Category',
groupKey: 'FoodCategoryGroup',
}
],
Customize information in modal view customize-info-in-modal-view
You can customize the details view of an asset when you click the icon. Execute the code below:
// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path'
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;
Enable or disable drag and drop mode enable-disable-drag-and-drop
Add the following properties to assetSelectorProp
to enable drag and drop mode. To disable drag and drop, replace the true
parameter with false
.
rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}
// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}
Selection of Assets selection-of-assets
Selected Asset Type is an array of objects that contains the asset information when using the handleSelection
, handleAssetSelection
, and onDrop
functions.
Execute the following steps to configure the selection of single or multiple assets:
acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets
Schema Syntax
interface SelectedAsset {
'repo:id': string;
'repo:name': string;
'repo:path': string;
'repo:size': number;
'repo:createdBy': string;
'repo:createDate': string;
'repo:modifiedBy': string;
'repo:modifyDate': string;
'dc:format': string;
'tiff:imageWidth': number;
'tiff:imageLength': number;
'repo:state': string;
computedMetadata: Record<string, any>;
_links: {
'https://ns.adobe.com/adobecloud/rel/rendition': Array<{
href: string;
type: string;
'repo:size': number;
width: number;
height: number;
[others: string]: any;
}>;
};
}
The following table describes some of the important properties of the Selected Asset object.
Array<string>
Record<string, any>
Record<string, any>
Array<Object>
For a complete list of properties and detailed example, visit Asset Selector Code Example.
Handling selection of Assets using Object Schema handling-selection
The handleSelection
property is used to handle single or multiple selections of Assets in Assets Selector. The example below states the syntax of usage of handleSelection
.
Disabling selection of Assets disable-selection
Disable selection is used to hide or disable the assets or folders from being selectable. It hides the select checkbox from the card or asset which refrains it from getting selected. To use this feature, you can declare the position of an asset or folder that you want to disable in an array. For example, if you want to disable the selection of a folder appearing at first position, you can add the following code:disableSelection: [0]:folder
You can provide the array with a list of mime types (such as image, folder, file, or other mime types for example, image/jpeg) that you want to disable. The mime types that you declare are mapped into data-card-type
and data-card-mimetype
attributes of an asset.
Additionally, Assets with disabled selection are draggable. To disable drag and drop of a particular asset type, you can use dragOptions.allowList
property.
The syntax of disable selection is as follows:
(args)=> {
return(
<ASDialogWrapper
{...args}
disableSelection={args.disableSelection}
handleAssetSelection={action('handleAssetSelection')}
handleSelection={action('handleSelection')}
selectionType={args.selectionType}
/>
);
}
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.
- A: Hide/Show panel
- B: Repository switcher
- C: Assets
- D: Filters
- E: Search bar
- F: Sorting
- G: Sorting in ascending or descending order
- H: View
Hide/Show panel hide-show-panel
To hide folders in the left navigation, click 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:
-
File type
: includes folder, file, images, documents, or video -
MIME type
: includes JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX -
Image Size
: includes minimum/maximum width, minimum/maximum height of image
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 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 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:
- : The list view displays scrollable files and folders in a single column.
- : The grid view displays scrollable files and folders in a grid of rows and columns.
- : The gallery view displays files or folders in a center-locked horizontal list.
- : The waterfall view displays files or folders in the form of a Bridge.