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...



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

1 comment:


  1. هذه الشركة تعمل على توفير العديد من الخدمات للمنازل و الشركات ، و هذه الخدمات تتمثل في تركيب التكييفات ، هذا فضلا عن العديد من الخدمات التي تتمثل في عدد من احتياجات المنزل ، و التي تشمل مختلف أنواع الصيانة و التي تناسب كل أنواع التكييفات ، كل نوع على حدة ، هذا فضلا عن توفير خدمات نقل و تركيب التكييفات و ذلك في مختلف أنواع المكيفات السبليت و المكيفات الشباك و المخفي و الشيلر و غيرها العديد من الأنواع ، كما أن الشركة توفر العديد من الخدمات المتميزة ، و التي تشمل الخدمات المضمونة و التي توفر معدل سلامة مضمون لكافة أفراد الأسرة .
    شركة تركيب مكيفات بجدة
    تعمل الامريكية في مجال تجديد المنازل منذ سنوات عديدة ، وهذا يساعدها على معرفة أفضل السبل التي يمكنها من خلالها أداء مهمة ترميم المباني على أعلى مستوى ، حيث تضم مجموعة من المتخصصين من بينهم مصممي الديكور الداخلي الذين لديهم القدرة على جعل المنزل مكانا مميزا من خلال الاعتماد على أحدث وأجمل الألوان ، كما أنه يعالج جميع المشاكل الموجودة في المنزل.
    شركة ترميم بمكة
    تعتبر شركتنا المتميزةشركه عزل أسطح بمكة من أفضل الشركات في مجال تركيب وعزل الأسطح لأنها توفر للعملاء العديد من المزايا مما يجعلها من الشركات المتميزة في مجال العزل. توفر الشركة الخبرة والمعرفة في مجال مواد عزل الأسطح ، وخاصة استخدام مواد العزل الرغوية المختلفة. توفر الشركة عمالة وفنية مدربة تدريباً جيداً وبأرخص الأسعار
    شركه عزل أسطح بمكة

    ReplyDelete