Integrating AEM Asset Selector with your web page

Consider a scenario where you are creating a blogging website, and you want to use Adobe Experience Manager (AEM) Assets (Adobe’s digital asset management platform) as your media library. You can use Asset Selector to integrate your website with Adobe Experience Manager (AEM) Assets. Post integration, you can import images and their associated metadata from the AEM Assets repository into your HTML pages (web pages).

Asset Selector is an AEM Assets interface that displays AEM assets. It is set up as a URL (http://<host>:<port>/aem/assetpicker). You can integrate it with your HTML page through an iframe, a pop-up window, or a new tab.

Asset Selector interacts with your web page using the HTML5 Window.postMessage communication protocol. For details, see The Window.postMessage method and Cross-document messaging.

Asset Selector uses the following structure (response object) to send data and actions (such as Done, Cancel, and so on):

Object {

config: Object

action: “done”

data: Array[1]

0: Object {

img: “http://<host>:<port>/content/dam/geometrixxoutdoors/products/equipmen
t/Sparrow.mov/_jcr_content/renditions/cq5dam.thumbnail.319.319.png”

path: “/content/dam/geometrixx-outdoors/products/equipment/Sparrow.mov”

size: “93.7 KB”

title: “Sparrow”

type: “video/quicktime”

url: “http://<host>:<port>/content/dam/geometrixxoutdoors/products/
equipment/Sparrow.mov”

. . . }

The following sections demonstrate how you can easily integrate Asset Selector with your web page. I am assuming that you have already been authenticated to the AEM instance.

Note: This exercise is applicable to AEM releases 6.0 and 6.1.

Integrate Asset Selector

Before you can use Asset Selector, you’ll need to add a few elements in your web page to fetch the asset’s metadata when you launch Asset Selector. Your web page can reside within or outside of AEM.

  1. In your web page, (for example, Sample.html) include the following:
    • An input element (for example import) that triggers the AEM Asset Selector page
    • A Div tag where you display the metadata fetched from the asset
    • An iframe skeleton (include this if you want to launch the Asset Selector page as an iframe)

SampleWebPageCode Select_Asset

  1. Include JQuery code in the Header section of your HTML page.
  2. Review the following code snippet for reference:

<!DOCTYPE html>

<html>

<head>

<title> My Sample Page </title>

<script

src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jqu
ery.min.js”></script>

<script src=”sample.js”></script>

</head>

<body>

<div>

<h1> Fetch Assets from AEM </h1>

<!– Input element which would trigger the AEM Asset
Selector launch–>

<input type=”button” data-style=”iframe” class=”import_assets_activator” value=”Import”

Data-assetPickerURL=”http://localhost:4502/aem/assetpicker”/>

</div>

<div class=”asset-info”>

<table border=”2″>

<!– content goes here –>

</table>

</div>

<!– Open AEM Asset Selector in iframe & choose assets to
be picked –>

<iframe class=”content” width=”500px” height=”700px”
seamless>

<p>Your browser does not support iframes. </p>

</iframe>

</body>

</html>

  1. Include a custom java script (e.g. Sample.js) that does the following:
    • Adds a handler for the Import button, which accepts the Asset Picker URL as input and displays Asset Selector in a pop-up window, iframe, or tab
    • Binds a listener with any method (e.g., receiveMessage) to your page through the HTML5 window.postMessage protocol, which enables the message event to receive data from Asset Selector. The listener validates the message origin.
    • Validates the origin in the receiveMessage method before processing the data.
    • Parses the incoming data, which should follow the sample structure described above.
    • Displays the data in the Div tag created as part of step 1. Review the following code snippet for reference:

(function (document, $)
{

“use strict”;

var popup, assetPickerURL,

mode = “multiple”,

type = “”,

style = “popup”;

if (window.addEventListener){

window.addEventListener(“message”, receiveMessage, false);

} else if (window.attachEvent){

window.attachEvent(“onmessage”, receiveMessage, false);

}

$(document).ready(function (event) {

$(“iframe.content”).hide();

assetPickerURL = $(“.import_assets_activator”).data(“assetpickerurl”);

style = $(“.import_assets_activator”).data(“style”);

});

 

$(document).on(“click”, “input.import_assets_activator”, function (e)

{ var url = assetPickerURL;

 

if (style === “iframe”) {

_   iframe(event, url);

} else {

_   popup(event, url);

}

});

function receiveMessage(event) {

// Don’t accept messages from other sources!

if (assetPickerURL.indexOf(event.origin) != 0) {

return;

}

var fromDam = JSON.parse(event.data);

if (fromDam.config) {

var configFromDam = fromDam.config;

if (configFromDam.action === ‘close’ || configFromDam.action === ‘done’) {

if (popup) {

popup.close();

}

$(“iframe.content”).hide();

$(“.asset-info”).show();

 

}

if (fromDam.data) {

if ($(“div.asset-info table .header”).length === 0) {

$(“div.asset-info table”).append(“<tr class=\”header\”>” +

“<th>Thumbnail</th>” +

“<th>Title</th>” +

“<th>URL</th>” +

“<th>Type</th>” +

“<th>Size</th>” +

“</tr>”);

}

var dam_detail = fromDam.data;

for (var i in dam_detail) {

$(“div.asset-info table”).append(“<tr><td><img class=\”thumbnail\” src=” +

dam_detail[i].img + “></td>” + “<td>” + dam_detail[i].title + “</td><td>” +

dam_detail[i].url + “</td><td>” + dam_detail[i].type + “</td><td>” + dam_detail[i].size +

“</td></tr>”);

}

}

}

function _popup(evt, url) {

popup = window.open(url, “dam”,

“left=25%,top=25%,height=800,width=800,status=yes,toolbar=no,menubar=no,location=yes”);

}

function _iframe(evt, url) {

$(“.asset-info”).hide();

var popup = $(“iframe.content”).get(0).contentWindow;

$(“iframe.content”).attr(“src”, url);

$(“iframe.content”).show();

}

})(document, jQuery);

Testing your web page

After modifying the source code of your HTML page (Sample.html) based on the instructions in the previous procedure, open it in any browser. Perform these steps to test whether Asset Selector launches properly, and you are able to import assets and metadata:

  1. Click the Import button to launch Asset Selector.
  2. Select one or more assets from the Asset Selector page, and click Done.

Select_Asset

  1. Check whether Asset Selector propagates the assets’ metadata to your page (Sample.html).
  2. To launch Asset Selector with a different context, add parameters in the Asset Selector URL. For details, see Cross-document messaging.

References

[0] The Window.postMessage method

[1] Cross-document messaging

[2] Asset Picker (AEM Assets)

 

For further assistance, please write to shroti@adobe.com.