Con­sid­er a sce­nario where you are cre­at­ing a blog­ging web­site, and you want to use Adobe Expe­ri­ence Man­ag­er (AEM Assets — dig­i­tal asset man­age­ment plat­form) as your media library. You can use Asset Selec­tor to inte­grate your web­site with Adobe Expe­ri­ence Man­ag­er (AEM Assets). Post inte­gra­tion, you can import images and their asso­ci­at­ed meta­da­ta from the AEM Assets repos­i­to­ry into your HTML pages (web pages).

Asset Selec­tor is an AEM Assets inter­face that dis­plays AEM assets. It is set up as a URL (http://<host>:<port>/aem/assetpicker). You can inte­grate it with your HTML page through an iframe, a pop-up win­dow, or a new tab.

Asset Selec­tor inter­acts with your web page using the HTML5 Window.postMessage com­mu­ni­ca­tion pro­to­col. For details, see The Window.postMessage method and Cross-doc­u­ment mes­sag­ing.

Asset Selec­tor uses the fol­low­ing struc­ture (response object) to send data and actions (such as Done, Can­cel, and so on):

Object {

con­fig: 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: “Spar­row”

type: “video/quicktime”

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

… }

The fol­low­ing sec­tions demon­strate how you can eas­i­ly inte­grate Asset Selec­tor with your web page. I am assum­ing that you have already been authen­ti­cat­ed to the AEM instance.

Note: This exer­cise is applic­a­ble to AEM releas­es 6.0 and 6.1.

Integrate Asset Selector

Before you can use Asset Selec­tor, you’ll need to add a few ele­ments in your web page to fetch the asset’s meta­da­ta when you launch Asset Selec­tor. Your web page can reside with­in or out­side of AEM.

  1. In your web page, (for exam­ple, Sam­ple.html) include the fol­low­ing:
    • An input ele­ment (for exam­ple import) that trig­gers the AEM Asset Selec­tor page
    • A Div tag where you dis­play the meta­da­ta fetched from the asset
    • An iframe skele­ton (include this if you want to launch the Asset Selec­tor page as an iframe)

SampleWebPageCode Select_Asset

  1. Include JQuery code in the Head­er sec­tion of your HTML page.
  2. Review the fol­low­ing code snip­pet for ref­er­ence:

<!DOCTYPE html>

<html>

<head>

<title> My Sam­ple 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 ele­ment which would trig­ger the AEM Asset
Selec­tor 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″>

<!– con­tent goes here –>

</table>

</div>

<!– Open AEM Asset Selec­tor in iframe & choose assets to
be picked –>

<iframe class=”content” width=”500px” height=”700px”
seam­less>

<p>Your brows­er does not sup­port iframes. </p>

</iframe>

</body>

</html>

  1. Include a cus­tom java script (e.g. Sample.js) that does the fol­low­ing:
    • Adds a han­dler for the Import but­ton, which accepts the Asset Pick­er URL as input and dis­plays Asset Selec­tor in a pop-up win­dow, iframe, or tab
    • Binds a lis­ten­er with any method (e.g., receiveMes­sage) to your page through the HTML5 window.postMessage pro­to­col, which enables the mes­sage event to receive data from Asset Selec­tor. The lis­ten­er val­i­dates the mes­sage ori­gin.
    • Val­i­dates the ori­gin in the receiveMes­sage method before pro­cess­ing the data.
    • Pars­es the incom­ing data, which should fol­low the sam­ple struc­ture described above.
    • Dis­plays the data in the Div tag cre­at­ed as part of step 1. Review the fol­low­ing code snip­pet for ref­er­ence:

(func­tion (doc­u­ment, $)
{

use strict”;

var pop­up, asset­PickerURL,

mode = “mul­ti­ple”,

type = “”,

style = “pop­up”;

if (window.addEventListener){

window.addEventListener(“message”, receiveMes­sage, false);

} else if (window.attachEvent){

window.attachEvent(“onmessage”, receiveMes­sage, false);

}

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

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

asset­PickerURL = $(“.import_assets_activator”).data(“assetpickerurl”);

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

});

 

$(document).on(“click”, “input.import_assets_activator”, func­tion (e)

{ var url = asset­PickerURL;

 

if (style === “iframe”) {

_ iframe(event, url);

} else {

_ popup(event, url);

}

});

func­tion receiveMessage(event) {

// Don’t accept mes­sages from oth­er sources!

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

return;

}

var from­Dam = JSON.parse(event.data);

if (fromDam.config) {

var con­figFrom­Dam = fromDam.config;

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

if (pop­up) {

popup.close();

}

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

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

 

}

if (from​Dam​.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 = from​Dam​.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>”);

}

}

}

func­tion _popup(evt, url) {

pop­up = window.open(url, “dam”,

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

}

func­tion _iframe(evt, url) {

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

var pop­up = $(“iframe.content”).get(0).contentWindow;

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

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

}

})(doc­u­ment, jQuery);

Testing your web page

After mod­i­fy­ing the source code of your HTML page (Sam­ple.html) based on the instruc­tions in the pre­vi­ous pro­ce­dure, open it in any brows­er. Per­form these steps to test whether Asset Selec­tor launch­es prop­er­ly, and you are able to import assets and meta­da­ta:

  1. Click the Import but­ton to launch Asset Selec­tor.
  2. Select one or more assets from the Asset Selec­tor page, and click Done.

Select_Asset

  1. Check whether Asset Selec­tor prop­a­gates the assets’ meta­da­ta to your page (Sample.html).
  2. To launch Asset Selec­tor with a dif­fer­ent con­text, add para­me­ters in the Asset Selec­tor URL. For details, see Cross-doc­u­ment mes­sag­ing.

References

[0] The Window.postMessage method

[1] Cross-doc­u­ment mes­sag­ing

[2] Asset Pick­er (AEM Assets)

 

0 comments