Micro-Frontend Destination Selector
- Topics:
- Selectors
CREATED FOR:
- Admin
- User
Micro-Frontend Destination Selector provides a user interface within your application that easily integrates with the Experience Manager Assets as a Cloud Service repository. You can search or browse to the appropriate folder within the Experience Manager Assets as a Cloud Service repository and upload assets from your application.
The Micro-Frontend user interface is made available in your application experience using the Destination Selector package. Any updates to the package are automatically imported and the latest deployed Destination Selector loads automatically within your application.
Destination 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 Destination Selector package are automatically deployed to the Destination 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 Destination Selector display within your application.
- Full-text search to quickly navigate to folders to upload assets from your application.
- Ability to create folders, sort folders in ascending or descending order, and view them in List, Grid, Gallery, or Waterfall view.
The scope of this article is to demonstrate how to use Destination Selector with an Adobe application under Unified Shell or when you already have an imsToken generated for authentication. These workflows are referred to as non-SUSI flow in this article.
Perform the following tasks to integrate and use Destination Selector with your Experience Manager Assets as a Cloud Service repository:
Integrate Destination Selector using Vanilla JS
You can integrate any Adobe or non-Adobe application with Experience Manager Assets as a Cloud Service repository and select assets from within the application.
The integration is done by importing the Destination Selector package and connecting to the Assets as a Cloud Service using the Vanilla JavaScript library. You must 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 Destination 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.
Prerequisites
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 as a Cloud Service repository. The prerequisites include:
- imsOrg
- imsToken
- apikey
Installation
Destination Selector is available via both ESM CDN (For example, esm.sh/skypack) and UMD version.
In browsers using UMD version (recommended):
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'
Selected Destination
Destination Selector receives a callback from onItemSelect, onTreeToggleItem, or onTreeSelectionChange with the selected directory that contains the object (directory, image, and so on).
Schema Syntax
interface SelectedDestination {
id: string;
children: SelectedDestination[];
'repo:repositoryId': string;
'dc:format': string;
'repo:assetClass': string;
'storage:directoryType': string;
'storage:region': string;
'repo:name': string;
'repo:path': string;
'repo:ancestors': string[];
'repo:createDate': string;
'storage:assignee':
{ type: string; id: string; }
;
'repo:assetId': string;
'aem:published': boolean;
'repo:createdBy': string;
'repo:state': string;
'repo:id': string;
'repo:modifyDate': string;
_page:
{ orderBy: string; count: number; };
}
The following table describes some of the important properties of the selected destination.
Array<string>For a complete list of properties and detailed example, visit Destination Selector Code Example.
Example for the non-SUSI flow
This example demonstrates how to use Destination Selector with a non-SUSI flow when running an Adobe application under Unified Shell or when you already have imsToken generated for authentication.
Include the Destination Selector package in your code using the script tag, as shown in lines 6–15 of the example below. After the script is loaded, the PureJSSelectors global variable is available for use. Define the Destination Selector properties as shown in lines 16–23. The imsOrg and imsToken properties are both required for authentication in non-SUSI flow. The handleSelection property is used to handle the selected assets. To render the Destination Selector, call the renderDestinationSelector function as mentioned in line 17. The Destination Selector is displayed in the <div> container element, as shown in lines 21 and 22.
By following these steps, you can use Destination Selector with a non-SUSI flow in your Adobe application.
<!DOCTYPE html>
<html>
<head>
<title>Destination Selector</title>
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
<script>
// get the container element in which we want to render the DestinationSelector component
const container = document.getElementById('destination-selector-container');
// imsOrg and imsToken are required for authentication in non-SUSI flow
const destinationSelectorProps = {
imsOrg: 'example-ims@AdobeOrg',
imsToken: "example-imsToken",
apiKey: "example-apiKey-associated-with-imsOrg",
handleSelection: (assets: SelectedAssetType[]) => {},
};
// Call the `renderDestinationSelector` available in PureJSSelectors globals to render DestinationSelector
PureJSSelectors.renderDestinationSelector(container, destinationselectorprops);
</script>
</head>
<body>
<div id="destination-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
</div>
</body>
</html>
For detailed example, visit Destination Selector Code Example.
Use Destination Selector properties
You can use the Destination Selector properties to customize the way the Destination Selector is rendered. The following table lists the properties that you can use to customize and use the Destination Selector:
imsOrg key is required to authenticate whether the organization you are accessing is under Adobe IMS or not.imsToken is not required if you are using the SUSI flow. However, it is required if you are using the non-SUSI flow.apiKey is not required if you are using the SUSI flow. However, it is required in non-SUSI flow.rootPath can also be used in the form of encapsulation. For example, given the following path, /content/dam/marketing/subfolder/, Destination Selector does not allow you to traverse through any parent folder, but only displays the children folders.onCreateFolder property lets you add icon that adds a new folder in the application.viewType property is used to specify the views that you use to display assets.viewType property. you can specify one or more views to display assets. Available viewTypeOptions are: List view, Grid view, Gallery view, Waterfall view, and Tree view.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’
Examples to use Destination Selector properties
You can define the Destination Selector properties in the index.html file to customize the Destination Selector display within your application.
Example 1: Create a folder in Destination Selector
Destination Selector lets you create a folder to upload, move, or copy assets at the particular location.
Example 2: Specify view type of Destination Selector
Destination Selector displays a wide array of assets in four different views including List view, Grid view, Gallery view, and Waterfall view. To specify default view type, you can use viewType property. The viewTypeOptions property is used along with viewType property to stipulate other view types so that other view type options can be displayed in a drop-down. A single argument can be used in case you want just one option to display.
Example 3: Initialize path of Assets Folder
Use the path property to define the folder name that displays automatically when the Destination Selector is rendered.
Using Destination Selector
Once the Destination Selector is set up and you are authenticated to use Destination 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: Search bar
- B: Sorting
- C: Assets
- D: Add suffix or prefix
- E: Create new folder
- F: View
- G: Info
- H: Select folder
Search bar
Destination 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
You can sort assets in Destination Selector by name, dimension, or size of an asset. You can also sort the assets in ascending or descending order.
Assets Repository
Destination Selector also lets you view data of repository of your choice available in the AEM application. You can use repositoryID property to initialize the path of destination folder that you want to view at the first instance of Destination Selector.
Add Suffix or Prefix
It is an example of the optionsFormSetup property. You can use this to confirm the selection, it is passed on the onConfirm event.
Create a folder
It lets you create a folder in the destination folder of your Adobe Experience Manager as a Cloud Service.
Types of view
Destination Selector lets you view the asset in four different views:
-
-
-
-
Info
The information or info icon lets you view metadata of the selected asset. It includes various details such as dimensions, size, description, path, date modified, and date created. The metadata information is provided while uploading or copying or creating an asset.
Select folder
The Select folder button lets you select assets for perform various operations associated to properties on destination selector.