AEM 6550 - ACS 19.3 - Selecting AEM Assets in Adobe Campaign Standard

Use AEM managed assets in emails created using Adobe Campaign Standard (ACS). The process discussed in this post uses Adobe Core Service for syncing assets to ACS, whereas the solution below is a bit more direct for selecting assets managed in AEM...

Demo | Package Install | Github

Email Creation in ACS

1) Follow the Create an Email process in Adobe Campaign Standard...

2) Select Email recipients...

3) Use the Email Designer for creating email...

4) Create a column layout, drag and drop Text components, add some content, followed by Html component....

5) Click on the source code menu item of Html Component...

6) Source editing of Html Component...

Open AEM Asset Selector

7) In a new browser tab, enter AEM Asset Selector URL http://localhost:4502/aem/assetpicker. Depending on the AEM SSO configuration,  you may have to login with credentials...

8) Only published AEM assets can be used in ACS emails... so when an Unpublished asset is selected the picker shows warning message....

9) Select a Published asset, click "Img Html" button and a modal should open with published asset url html block (this is a UI extension and can be further customized...). Click "Copy" to copy the html to clipboard....

Add AEM Asset in ACS

10) "Paste" the copied Html block in ACS Html Component source editor...

11) AEM asset should now show up in email editor (since the asset is served from AEM publish instance, no authentication is required here....)

12) Enter Email Subject, Prepare & Send the email...

13) Email delivered to inbox (with image rendered from AEM Publish instance...)

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-asset-selector-img-html

2) For creating asset Publish URL using Externalizer add script /apps/eaem-asset-selector-img-html/publish-url/publish-url.jsp with the following code....

<%@page import="com.day.cq.commons.Externalizer" %>
<%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %>
<cq:defineObjects />
<%
    Externalizer externalizer = resourceResolver.adaptTo(Externalizer.class);

    String url = externalizer.externalLink(resourceResolver, Externalizer.PUBLISH, request.getScheme(),
            slingRequest.getRequestPathInfo().getSuffix());

    response.getWriter().print(url);
%>

3) Create node /apps/eaem-asset-selector-img-html/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.gui.damadmin.assetselector], String[] property dependencies with value lodash.

4) Create file (nt:file) /apps/eaem-asset-selector-img-html/clientlib/js.txt, add

                        asset-selector-img-html.js

5) Create file (nt:file) /apps/eaem-asset-selector-img-html/clientlib/asset-selector-img-html.js, add the following code...

(function($, $document){
    var PUBLISH_URL = "/apps/eaem-asset-selector-img-html/publish-url/content.html";

    $document.ready(addImgHtmlButton);

    function addImgHtmlButton(){
        var $titleBar = $(".granite-pickerdialog-titlebar"),
            $imgHtmlBut = $titleBar.find("betty-titlebar-primary").append(getButtonHtml());

        $imgHtmlBut.on('click', showHTMLInModal);
    }

    function showHTMLInModal(event){
        event.preventDefault();

        var $selections = $(".foundation-selections-item");

        if(_.isEmpty($selections)){
            showAlert("Please select an image", "Select");
            return;
        }

        var $selection = $($selections[0]),
            imgPath = $selection.data("granite-collection-item-id");

        $.ajax( { url: imgPath + ".2.json", async: false}).done(function(data){
            if(!data || !data["jcr:content"] || !data["jcr:content"]["cq:lastReplicated"]){
                showAlert("Please publish the image in AEM for using it in Campaign...", "Publish");
                imgPath = undefined;
            }
        });

        if(!imgPath){
            return;
        }

        var html = "<textarea rows='3' cols= '80' " +
            "style='background-color:#EEE; outline: 0; border-width: 0;padding: 20px; font-family: Courier'>&ltdiv&gt";

        $.ajax( { url: PUBLISH_URL + imgPath, async: false}).done(function(url){
            imgPath = url.trim();
        });

        html = html + "\n\t" + getImageHtml(imgPath) + "\n" + "&lt/div&gt</textarea>";

        showCopyCode(html);
    }

    function getButtonHtml(){
        return '<button is="coral-button" icon="adobeCampaign" iconsize="S" variant="quiet">Img Html</button>';
    }

    function getImageHtml(imgPath){
        return "<img src='" + imgPath + "'/>";
    }

    function showCopyCode(code, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "cancel",
                text: "Cancel",
                primary: true
            },{
                id: "COPY",
                text: "Copy",
                primary: true
            }];

        fui.prompt("Code", code, "default", options, copyHandler);

        function copyHandler(button){
            if(button === 'cancel'){
                return;
            }

            var $dialog = $("coral-dialog.is-open"),
                $codeText = $dialog.find("textarea");

            $codeText[0].select();

            document.execCommand("copy");
        }
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "ok",
                text: "OK",
                primary: true
            }];

        message = message || "Unknown Error";
        title = title || "Error";

        fui.prompt(title, message, "warning", options, callback);
    }
}(jQuery, jQuery(document)));