Documentation AEM as a Cloud Service User Guide

Micro-Frontend Asset Selector Overview

Last update: Tue Apr 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Admin
User

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.

Overview

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.

IMPORTANT

This repository is intended to serve as a supplemental documentation describing the available APIs and usage examples for integrating Asset Selector. Before attempting to install or use the Asset Selector, ensure that your organization has been provisioned the access to Asset Selector as part of the Experience Manager Assets as a Cloud Service profile. If you have not been provisioned, you cannot integrate or use these components. To request provisioning, your program admin should raise a support ticket marked as P2 from Admin Console and include the following information:

Domain names where the integrating application is hosted.
After provisioning, your organization will be provided with imsClientId, imsScope, and a redirectUrl 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:

Integrate Asset Selector with an Adobe application
Integrate Asset Selector with a non-Adobe application

Integration with an Adobe application

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

code language-html line-numbers
<!DOCTYPE html> <html> <head> <title>Asset 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 AssetSelector component const container = document.getElementById('asset-selector-container'); // imsOrg and imsToken are required for authentication in Adobe application const assetSelectorProps = { imsOrg: 'example-ims@AdobeOrg', imsToken: "example-imsToken", apiKey: "example-apiKey-associated-with-imsOrg", handleSelection: (assets: SelectedAssetType[]) => {}, }; // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector PureJSSelectors.renderAssetSelector(container, assetSelectorProps); </script> </head> <body> <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;"> </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
    <title>Asset 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 AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in Adobe application
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

accordion

ImsAuthProps

The ImsAuthProps properties define the authentication information and flow that the Asset Selector uses to obtain an imsToken. By setting these properties, you can control how the authentication flow should behave and register listeners for various authentication events.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2
Property Name	Description
`imsClientId`	A string value representing the IMS client ID used for authentication purposes. This value is provided by Adobe and is specific to your Adobe AEM CS organization.
`imsScope`	Describes the scopes used in authentication. The scopes determine the level of access that the application has to your organization resources. Multiple scopes can be separated by commas.
`redirectUrl`	Represents the URL where the user is redirected after authentication. This value is typically set to the current URL of the application. If a `redirectUrl` is not supplied, `ImsAuthService` uses the redirectUrl used to register the `imsClientId`
`modalMode`	A boolean indicating whether the authentication flow should be displayed in a modal (pop-up) or not. If set to `true`, the authentication flow is displayed in a pop-up. If set to `false`, the authentication flow is displayed in a full page reload. Note: for better UX, you can dynamically control this value if the user has browser pop-up disabled.
`onImsServiceInitialized`	A callback function that is called when the Adobe IMS authentication service is initialized. This function takes one parameter, `service`, which is an object representing the Adobe IMS service. See `ImsAuthService` for more details.
`onAccessTokenReceived`	A callback function that is called when an `imsToken` is received from the Adobe IMS authentication service. This function takes one parameter, `imsToken`, which is a string representing the access token.
`onAccessTokenExpired`	A callback function that is called when an access token has expired. This function is typically used to trigger a new authentication flow to obtain a new access token.
`onErrorReceived`	A callback function that is called when an error occurs during authentication. This function takes two parameters: the error type and error message. The error type is a string representing the type of error and the error message is a string representing the error message.

accordion

ImsAuthService

ImsAuthService class handles the authentication flow for the Asset Selector. It is responsible for obtaining an imsToken from the Adobe IMS authentication service. The imsToken is used to authenticate the user and authorize access to the Adobe Experience Manager as a Cloud Service Assets repository. ImsAuthService uses the ImsAuthProps properties to control the authentication flow and register listeners for various authentication events. You can use the convenient registerAssetsSelectorsAuthService function to register the ImsAuthService instance with the Asset Selector. The following functions are available on the ImsAuthService class. However, if you are using the registerAssetsSelectorsAuthService function, you do not need to call these functions directly.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
Function Name	Description
`isSignedInUser`	Determines whether the user is currently signed in to the service and returns a boolean value accordingly.
`getImsToken`	Retrieves the authentication `imsToken` for the currently signed-in user, which can be used to authenticate requests to other services such as generating asset _rendition.
`signIn`	Initiates the sign-in process for the user. This function uses the `ImsAuthProps` to show authentication in either a pop-up or a full page reload
`signOut`	Signs the user out of the service, invalidating their authentication token and requiring them to sign in again to access protected resources. Invoking this function will reload the current page.
`refreshToken`	Refreshes the authentication token for the currently signed-in user, preventing it from expiring and ensuring uninterrupted access to protected resources. Returns a new authentication token that can be used for subsequent requests.

accordion

Validation with provided IMS token

code language-none

<script>
    const apiToken="<valid IMS token>";
    function handleSelection(selection) {
    console.log("Selected asset: ", selection);
    };
    function renderAssetSelectorInline() {
    console.log("initializing Asset Selector");
    const props = {
    "repositoryId": "delivery-p64502-e544757.adobeaemcloud.com",
    "apiKey": "ngdm_test_client",
    "imsOrg": "<IMS org>",
    "imsToken": apiToken,
    handleSelection,
    hideTreeNav: true
    }
    const container = document.getElementById('asset-selector-container');
    PureJSSelectors.renderAssetSelector(container, props);
    }
    $(document).ready(function() {
    renderAssetSelectorInline();
    });
</script>

accordion

Register callbacks to IMS service

code language-none

// object `imsProps` to be defined as below
let imsProps = {
    imsClientId: <IMS Client Id>,
        imsScope: "openid",
        redirectUrl: window.location.href,
        modalMode: true,
        adobeImsOptions: {
            modalSettings: {
            allowOrigin: window.location.origin,
},
        useLocalStorage: true,
},
onImsServiceInitialized: (service) => {
            console.log("onImsServiceInitialized", service);
},
onAccessTokenReceived: (token) => {
            console.log("onAccessTokenReceived", token);
},
onAccessTokenExpired: () => {
            console.log("onAccessTokenError");
// re-trigger sign-in flow
},
onErrorReceived: (type, msg) => {
            console.log("onErrorReceived", type, msg);
},
}

Integration with a non-Adobe application

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 Steps to log a support ticket via the Admin Console: Add Asset Selector with AEM Assets in the title of the ticket. In the description, provide the following details: Experience Manager Assets as a Cloud Service URL (Program ID and Environment ID). Domain names where the non-Adobe web application is hosted.

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
Steps to log a support ticket via the Admin Console:

Add Asset Selector with AEM Assets in the title of the ticket.
In the description, provide the following details:
- Experience Manager Assets as a Cloud Service URL (Program ID and Environment ID).
- Domain names where the non-Adobe web application is hosted.

accordion

Integration steps

Use this example index.html file for authentication while integrating Asset Selector with a non-Adobe application.

Access the Asset Selector package using the Script Tag, as shown in line 9 to line 11 of the example index.html file.

Line 14 to line 38 of the example describes the IMS flow properties, such as imsClientId, imsScope, and redirectURL. The function requires that you define at least one of the imsClientId and imsScope properties. If you do not define a value for redirectURL, the registered redirect URL for the client ID is used.

As you do not have an imsToken generated, use the registerAssetsSelectorsAuthService and renderAssetSelectorWithAuthFlow functions, as shown in line 40 to line 50 of the example index.html file. Use the registerAssetsSelectorsAuthService function before renderAssetSelectorWithAuthFlow to register the imsToken with the Asset Selector. Adobe recommends calling registerAssetsSelectorsAuthService when you instantiate the component.

Define the authentication and other Assets as a Cloud Service access-related properties in the const props section, as shown in line 54 to line 60 of the example index.html file.

The PureJSSelectors global variable, mentioned in line 65, is used to render the Asset Selector in the web browser.

Asset Selector is rendered on the <div> container element, as mentioned in line 74 to line 81. The example uses a dialog to display the Asset Selector.

code language-html line-numbers

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Asset Selectors</title>
    <link rel="stylesheet" href="index.css">
    <script id="asset-selector"
        src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/asset-selectors.js"></script>
    <script>

        const imsProps = {
            imsClientId: "<obtained from IMS team>",
            imsScope: "openid, <other scopes>",
            redirectUrl: window.location.href,
            modalMode: true, // false to open in a full page reload flow
            onImsServiceInitialized: (service) => {
                // invoked when the ims service is initialized and is ready
                console.log("onImsServiceInitialized", service);
            },
            onAccessTokenReceived: (token) => {
                console.log("onAccessTokenReceived", token);
            },
            onAccessTokenExpired: () => {
                console.log("onAccessTokenError");
                // re-trigger sign-in flow
            },
            onErrorReceived: (type, msg) => {
                console.log("onErrorReceived", type, msg);
            },
        }

        function load() {
            const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
            imsInstance = registeredTokenService;
        };

        // initialize the IMS flow before attempting to render the asset selector
        load();


        //function that will render the asset selector
            const otherProps = {
            // any other props supported by asset selector
            }
            const assetSelectorProps = {
                "imsOrg": "imsorg",
                ...otherProps
            }
             // container element on which you want to render the AssetSelector/DestinationSelector component
            const container = document.getElementById('asset-selector');

            /// Use the PureJSSelectors in globals to render the AssetSelector/DestinationSelector component
            PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
                const assetSelectorDialog = document.getElementById('asset-selector-dialog');
                assetSelectorDialog.showModal();
            });
        }
    </script>

</head>
<body class="asset-selectors">
    <div>
        <button onclick="renderAssetSelectorWithAuthFlowFlow()">Asset Selector - Select Assets with Ims Flow</button>
    </div>
        <dialog id="asset-selector-dialog">
            <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
            </div>
        </dialog>
    </div>
</body>

</html>

accordion

Unable to access delivery repository

note tip
TIP
If you have integrated Asset Selector using Sign up Sign In workflow but still unable to access the delivery repository, ensure that browser cookies are cleaned up. Otherwise, you end up getting `invalid_credentials All session cookies are empty` error in the console.

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.

Property

Type

Required

Default

Description

rail

boolean

false

If marked true, Asset Selector is rendered in a left rail view. If it is marked false, the Asset Selector is rendered in modal view.

imsOrg

string

Yes

Adobe Identity Management System (IMS) ID that is assigned while provisioning Adobe Experience Manager as a Cloud Service for your organization. The imsOrg key is required to authenticate whether the organization you are accessing is under Adobe IMS or not.

imsToken

string

IMS bearer token used for authentication. imsToken is required if you are using an Adobe application for the integration.

apiKey

string

API key used for accessing the AEM Discovery service. apiKey is required if you are using an Adobe application integration.

rootPath

string

/content/dam/

Folder path from which Asset Selector displays your assets. 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.

path

string

Path that is used to navigate to a specific directory of assets when the Asset Selector is rendered.

filterSchema

array

Model that is used to configure filter properties. This is useful when you want to limit certain filter options in Asset Selector.

filterFormProps

Object

Specify the filter properties that you need to use to refine your search. For example, MIME type JPG, PNG, GIF.

selectedAssets

Array <Object>

Specify selected Assets when the Asset Selector is rendered. An array of objects is required that contains an id property of the assets. For example, [{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.

acvConfig

Object

Asset Collection View property that contains object containing custom configuration to override defaults. Also, this property is used with rail property to enable rail view of assets viewer.

i18nSymbols

Object<{ id?: string, defaultMessage?: string, description?: string}>

If the OOTB translations are insufficient for your application’s needs, you can expose an interface through which you can pass your own custom-localized values through the 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

Object

Asset Selector provides default OOTB translations. You can select the translation language by providing a valid locale string through the 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’

repositoryId

string

‘’

Repository from where the Asset Selector loads the content.

additionalAemSolutions

Array<string>

[ ]

It lets you add a list of additional AEM repositories. If no information is provided in this property, then only media library or AEM Assets repositories are considered.

hideTreeNav

boolean

Specifies whether to show or hide assets tree navigation sidebar. It is used in modal view only and hence there is no effect of this property in rail view.

onDrop

Function

The property allows the drop functionality of an asset.

dropOptions

{allowList?: Object}

Configures drop options using ‘allowList’.

colorScheme

string

Configure theme (light or dark) for the Asset Selector.

handleSelection

Function

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.

handleAssetSelection

Function

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.

onClose

Function

Invoked when Close button in modal view is pressed. This is only called in modal view and disregarded in rail view.

onFilterSubmit

Function

Invoked with filter items as user changes different filter criteria.

selectionType

string

single

Configuration for single or multiple selection of assets at a time.

dragOptions.allowList

boolean

The property is used to allow or deny the dragging of assets that are not selectable.

aemTierType

string

It allows you to select whether you want to show assets from delivery tier, author tier, or both.

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.

handleNavigateToAsset

Function

It is a Callback function to handle selection of an asset.

noWrap

boolean

The noWrap property helps rendering Asset Selector in the side rail panel. If this property is not mentioned, it renders the Dialog view by default.

dialogSize

small, medium, large, fullscreen, or fullscreen takeover

String

Optional

You can control the layout by specifying its size using the given options.

colorScheme

light or dark

This property is used to set the theme of an Asset Selector application. You can choose between light or dark theme.

filterRepoList

Function

You can use 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

rail-view-example

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.

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.

metadata-popover-example

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.

custom-filter-example-vanilla

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.

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',
    }
],

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: {
        'http://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.

Property

Type

Description

repo:repositoryId

string

Unique identifier for the repository where the asset is stored.

repo:id

string

Unique identifier for the asset.

repo:assetClass

string

The classification of the asset (For example, image, or video, document).

repo:name

string

The name of the asset, including the file extension.

repo:size

number

The size of the asset in bytes.

repo:path

string

The location of the asset within the repository.

repo:ancestors

Array<string>

An array of ancestor items for the asset in the repository.

repo:state

string

Current state of the asset in the repository (For example, active, deleted, and so on).

repo:createdBy

string

The user or system that created the asset.

repo:createDate

string

The date and time when the asset was created.

repo:modifiedBy

string

The user or system that last modified the asset.

repo:modifyDate

string

The date and time when the asset was last modified.

dc:format

string

The format of the asset, such as the file type (For example, JPEG, PNG, and so on).

tiff:imageWidth

number

The width of an asset.

tiff:imageLength

number

The height of an asset.

computedMetadata

Record<string, any>

An object which represents a bucket for all the asset’s metadata of all kinds (repository, application, or embedded metadata).

_links

Record<string, any>

Hypermedia links for the associated asset. Includes links for resources such as metadata and renditions.

_links.http://ns.adobe.com/adobecloud/rel/rendition

Array<Object>

Array of objects containing information about renditions of the asset.

_links.http://ns.adobe.com/adobecloud/rel/rendition[].href

string

The URI to the rendition.

_links.http://ns.adobe.com/adobecloud/rel/rendition[].type

string

The MIME type of the rendition.

_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size’

number

The size of the rendition in bytes.

_links.http://ns.adobe.com/adobecloud/rel/rendition[].width

number

The rendition’s width.

_links.http://ns.adobe.com/adobecloud/rel/rendition[].height

number

The rendition’s height.

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.

handle-selection

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}
        />
    );
}

NOTE

In case of an asset, the select checkbox is hidden, whereas, in case of a folder, the folder is unselectable but the navigation of the mentioned folder still appears.

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.

using-asset-selector

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.

custom-search

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.