Asset selector lets you search, filter, and browse the DAM assets. Asset selector is available at https://[aem_server]:[port]/aem/assetpicker.html. You can fetch the metadata of your selected assets using the asset selector. You can launch it with supported request parameters, such as asset type (image, video, text) and selection mode (single or multiple selections). These parameters set the context of the asset selector for a particular search instance and remain intact throughout the selection.
Some of the important request parameters:
mode — single, multipleroot - root folder for the asset selector.e.g /content/dam/testviewmode — searchassettype — Images, documents, multimedia, archivesmimetype - MIME type(e.g png)
Sample URL — http://localhost:4502/aem/assetpicker.html?mode=multiple&root=/content/dam/test&mimetype=*png
The asset selector uses the HTML5 Window.postMessage message to send data for the selected asset to the recipient.
Event Message on Cancel:
{"config":{"action":"close"}}Event Message on Asset Selection(Single or Multiple assets can be selected based on the mode):
{"data":[{"path":"/content/dam/test/test1.png","url":"http://localhost:4502/content/dam/test/test1.png","type":"image/png","title":"Test1.png","size":"298.3 KB","img":"http://localhost:4502/content/dam/test/test1.png/_jcr_content/renditions/cq5dam.thumbnail.319.319.png?ch_ck=1648660240000"},{"path":"/content/dam/test/test2.png","url":"http://localhost:4502/content/dam/test/test2.png","type":"image/png","title":"test banner pequeño.png","size":"196.6 KB","img":"http://localhost:4502/content/dam/test/test2.png/_jcr_content/renditions/cq5dam.thumbnail.319.319.png?ch_ck=1634925874000"}],"config":{"action":"done"}}This will helps the external systems to fetch the required asset details from AEM DAM. The external system can launch the AEM asset selector with the needed parameters and receive the asset details by selecting the required assets.
Sample HTML to select the assets through asset selector:
assetSelector.html
<!DOCTYPE html>
<html>
<body>
<h1>AEM Asset Selector - Demo</h1><button id="openSelector">Open selector</button>
<script>
var assetWindow='';
const serverURL = 'http://localhost:4502'
const aemAssetSelectorUrl = serverURL + '/aem/assetpicker.html?mode=multiple&root=/content/dam/test&mimetype=*png'
const handleMessageEvent = (event) => {if (event.origin !== serverURL) {
return
}
console.log(event.data);
const jsondata=JSON.parse(event.data);
if (jsondata.config.action === 'close') {
assetWindow.close();
} else {
console.log('Image URL: '+ jsondata.data[0].url + ' Title: '+ jsondata.data[0].title);
assetWindow.close();
}
}
const openSelector = () => {
assetWindow= window.open(aemAssetSelectorUrl, 'selector','_parent');
}
window.addEventListener("message", handleMessageEvent, false)
const button = document.getElementById('openSelector')
button.addEventListener('click', openSelector)
</script>
</body>
</html>
You should be able to choose the required assets from the asset selector; even you can use the search to identify the required assets for selection.
Refer to the following document to — Search digital assets and images in Adobe Experience Manager | Adobe Experience Manager to understand asset selector functionalities and some of the current limitations.
As mentioned above "You can fetch the metadata of your selected assets using the asset selector.". Is there any limitation what metadata you can fetch or you can fetch all metadata that is present on asset metadata node. Also could you please share the command to fetch asset complete metadata.
ReplyDeleteOnly the basic - image path, URL, renditions, and Title details are mentioned in the JSON; this will help to allow the external application users to select the required assets from AEM and link to those from the application.
ReplyDelete