Micro-Frontend Destination Selector

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
• Define Destination Selector display properties
• Use Destination Selector

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.

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:

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 new 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 new folder

It lets you create a new 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:

• List View: The list view displays scrollable files and folders in a single column.
• Grid View: The grid view displays scrollable files and folders in a grid of rows and columns.
• Gallery View: The gallery view displays files or folders in a center-locked horizontal list.
• Waterfall View: The waterfall view displays files or folders in the form of a Bridge.

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 a new asset.

Select folder

The Select folder button lets you select assets for perform various operations associated to properties on destination selector.

Business.Adobe.com resources