AEM 65 - Sync Specific Folders to Scene7 in AEM Dynamic Media Scene7 (DMS7), Show Indicator in Card View

Goal


With AEM 6.5.4.0 folder specific sync is available otb, for more information check documentation

By default, the Scene7 step of DAM Update Asset workflow syncs all assets uploaded to AEM, to Scene 7, in DMS7 mode (sling run mode dynamicmedia_scene7)

If the requirement is syncing specific folders, this post explains how-to, by adjusting the DAM Update Asset Workflow and show a UI indicator in card view (an improvement to the solution posted for 6420)

Another way of do this is by removing Scene7 step from default DAM Update Asset workflow, creating a DAM update workflow with Scene7 step having workflow launcher path condition set to e.g. /content/dam/my_dm_sync_folder(/.*/)renditions/original (where my_dm_sync_folder is the folder in AEM with assets synced to Scene7)

Demo | Package Install | Github


Set the Property "Sync to Scene7"




Property set and Saved in CRX

                           Once set, the checkbox is disabled, to avoid the mess of having some assets synced and others remain unsynced





UI Indicator "Uploads to Scene7"



Asset Uploaded to Scene 7




Managed locally in AEM



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-dms7-sync-specific-folders

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-dms7-sync-specific-folders/clientlib and set a property categories of String[] type to [cq.gui.damadmin.v2.foldershare.coral,dam.gui.admin.coral]dependencies of type String[] with value lodash

3) Create checkbox UI by adding the following code in /apps/eaem-dms7-sync-specific-folders/ui/syncToScene7 of type nt:unstructured

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
    name="eaemSyncToScene7"
    text="Sync to Scene7"
    value="true"/>

4) Create file ( type nt:file ) /apps/eaem-dms7-sync-specific-folders/clientlib/js.txt, add the following

                         add-sync-scene7-checkbox.js

5) Create file ( type nt:file ) /apps/eaem-dms7-sync-specific-folders/clientlib/add-sync-scene7-checkbox.js, add the following code

(function($, $document) {
    var FOLDER_SHARE_WIZARD = "/mnt/overlay/dam/gui/content/assets/v2/foldersharewizard.html",
        ASSETS_CONSOLE = "/assets.html",
        FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        SEL_DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages",
        LAYOUT_CARD_VIEW = "card",
        EAEM_SYNC_TO_SCENE7 = "eaemSyncToScene7",
        EAEM_UPLOAD_SCENE7_PROPERTY = "eaem-upload-scene7-property",
        SYNC_TO_SCENE7_CB = "/apps/eaem-dms7-sync-specific-folders/ui/syncToScene7.html",url = document.location.pathname, $customTab;

    if( url.indexOf(FOLDER_SHARE_WIZARD) == 0 ){
        handleFolderProperties();
    }else if(url.indexOf(ASSETS_CONSOLE) == 0){
        $document.on("foundation-selections-change", SEL_DAM_ADMIN_CHILD_PAGES, showSyncUIIndicator);
    }

    function handleFolderProperties(){
        $document.on(FOUNDATION_CONTENT_LOADED, function(){
            $.ajax(SYNC_TO_SCENE7_CB).done(addSyncScene7CheckBox);
        });
    }

    function showSyncUIIndicator(e){
        if(!e.currentTarget){
            return;
        }

        var $currentTarget = $(e.currentTarget),
            foundationLayout = $currentTarget.data("foundation-layout");

        if(_.isEmpty(foundationLayout)){
            return;
        }

        var layoutId = foundationLayout.layoutId;

        if(layoutId !== LAYOUT_CARD_VIEW){
            return;
        }

        var path = $currentTarget.data("foundation-collection-id");

        $.ajax(path + ".2.json").done(function(data){
            $(".foundation-collection-item").each(function(index, item){
                itemHandler(data, layoutId, $(item) );
            });
        });

        function itemHandler(data, layoutId, $item){
            var itemPath = $item.data("foundation-collection-item-id"),
                itemName = getStringAfterLastSlash(itemPath);

            if( (layoutId !== LAYOUT_CARD_VIEW) || !_.isEmpty($item.find("." + EAEM_UPLOAD_SCENE7_PROPERTY))) {
                return;
            }

            if(!data[itemName] || !data[itemName]["jcr:content"] || !data[itemName]["jcr:content"][EAEM_SYNC_TO_SCENE7]){
                return;
            }

            var $cardProperties = $item.find("coral-card-content > coral-card-propertylist");
            $cardProperties.append(getScene7PropertyHtml());
        }

        function getScene7PropertyHtml(){
            return '<coral-card-property icon="upload" title="Uploads to Scene7" class="' + EAEM_UPLOAD_SCENE7_PROPERTY + '">' +
                        '<coral-card-property-content>Uploads to Scene7</coral-card-property-content>' +
                   '</coral-card-property>';
        }

        function getStringAfterLastSlash(str){
            if(!str || (str.indexOf("/") == -1)){
                return "";
            }

            return str.substr(str.lastIndexOf("/") + 1);
        }
    }

    function addSyncScene7CheckBox(html){
        var $tabView = $("coral-tabview");

        if(_.isEmpty($tabView)){
            return;
        }

        var detailsTab = $tabView[0]._elements.panelStack.querySelector("coral-panel:first-child");

        if(!detailsTab){
            return;
        }

        var $cbSyncToScene7 = $(html).appendTo($(detailsTab).find(".aem-assets-foldershare-details-container")),
            $form = $("form"),
            $submit = $("button[type=submit]");

        $.ajax($form.attr("action") + "/jcr:content.json").done(setSyncScene7ContentCB);

        $submit.click(handlerFolderPropertiesSubmit);

        function setSyncScene7ContentCB(fJcrContent){
            var $cb = $cbSyncToScene7.find("[type='checkbox']"),
                name = $cb.attr("name");

            if(_.isEmpty(fJcrContent[name])){
                return;
            }

            $cb[0].checked = true;

            $cbSyncToScene7.attr("disabled", "disabled");
        }

        function handlerFolderPropertiesSubmit(){
            var $cb = $cbSyncToScene7.find("[type='checkbox']"),
                data = {};

            if(!$cb[0].checked){
                return;
            }

            data[$cb.attr("name")] = $cb.val();

            $.post( $form.attr("action") + "/jcr:content", data );
        }
    }
})(jQuery, jQuery(document));

6) Edit the DAM Update Asset workflow (copy of /libs/settings/workflow/models/dam/update_asset created in /conf/global/settings/workflow/models/dam/update_asset) to add an OR Split step, move the Scene7 step to branch 1 and add a No Operation step in branch 2



7) Add the following script in branch 1 of OR Split; So the images and videos uploaded to folders with property eaemSyncToScene7 are ONLY synced to Scene7)

function check() {
    var doSync = false;
 
    try {
        var path = workflowData.getPayload().toString();
 
        if (path === null) {
            return doSync;
        }
 
        path = path.replaceAll("/jcr:content/renditions/original", "");
 
        log.info("Checking if asset should be uploaded to Scene7 - " + path);
 
        var payloadNode = workflowSession.getSession().getNode(path);
 
        if (payloadNode === null) {
            return doSync;
        }
 
        doSync = payloadNode.getParent().getNode("jcr:content").hasProperty("eaemSyncToScene7");
 
        if (doSync === false) {
            log.info("Skipping upload to Scene7 - " + path);
        } else {
            log.info("Uploading to Scene7 - " + path);
        }
    } catch (e) {
        doSync = false;
        log.error(e);
    }
 
    return doSync;
}



8) For the branch 2 (no operation) add the following script

function check(){
      return true;
}

9) Sync the workflow to copy the model from /conf/global/settings/workflow/models/dam/update_asset to /var/workflow/models/dam/update_asset

10) Upload an asset to folder with Scene7 sync allowed, you can see the jcr:content/metadata@dam:scene7ID  in asset metadata, confirming the upload to Scene7


11) Assets in folders that are skipped by OR-split do not have jcr:content/metadata@dam:scene7ID  in asset metadata and are not uploaded to Scene7


No comments:

Post a Comment