AEM 6420 - Touch UI Show / Hide Dialog Fields based on the Layout Container of Component

Goal

Hide component dialog fields, not supported by the Editable template Layout container policy, component was added into...

In the following demo /libs/foundation/components/image/cq:dialog/content/items/column/items/size of Image component is relevant only if the component is added in layout container wcm/foundation/components/responsivegrid with policy say wcm/foundation/components/responsivegrid/eaem_container_a

Foundation Image component in /libs was modified for demonstration purposes only

Demo | Package Install | Github


Get the layout container policy

Set the layout container policy on dialog field

Field shown if the policy matches layout container

Field hidden if the policy does not match layout container policy

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-policy-based-dialog-widgets-visibility

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-policy-based-dialog-widgets-visibility/clientlib and set property categories of String[] type to cq.authoring.dialog.all and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/eaem-policy-based-dialog-widgets-visibility/clientlib/js.txt, add the following

  policy-based-widgets.js

4) Create file (type nt:file) /apps/eaem-policy-based-dialog-widgets-visibility/clientlib/policy-based-widgets.js, add the following code

(function ($, $document) {
    var EAEM_SHOW_FOR_CONTAINER_POLICY = "eaemshowforcontainerpolicy",
        HIDE_HTML = "<div style='font-weight: bold; text-align: center;  margin: 10px 0 10px 0'>"
                        + "Widget not supported in root layout container"
                    + "</div>";

    $document.on('dialog-ready', handleEditablePolicies);

    function handleEditablePolicies(){
        var containerPolicyRelPath = getParentResponsiveGridPolicyPath(getCurrentEditable());

        if(_.isEmpty(containerPolicyRelPath)){
            console.error("Experience AEM - Container Relative Policy Path in page not available");
            return;
        }

        var eTemplatePath = getEditableTemplatePath();

        if(_.isEmpty(eTemplatePath)){
            console.error("Experience AEM - Editable template path not available for current page");
            return;
        }

        var containerPolicyMappingPath = eTemplatePath + "/policies/jcr:content/" + containerPolicyRelPath;

        $.get(containerPolicyMappingPath + ".json").done(checkWidgetsAndPolicies);
    }

    function checkWidgetsAndPolicies(data){
        var policyRelPath = data["cq:policy"];

        if(_.isEmpty(policyRelPath)){
            console.error("Experience AEM - Policy Relative Path in template not available");
            return;
        }

        handleDialogWidgetsVisibility(policyRelPath);
    }

    function handleDialogWidgetsVisibility(policyRelPath){
        var $widgetsWithPolicySet = $("[data-" + EAEM_SHOW_FOR_CONTAINER_POLICY + "]"),
            $widget, value;

        _.each($widgetsWithPolicySet, function(widget){
            $widget = $(widget);

            value = $widget.data(EAEM_SHOW_FOR_CONTAINER_POLICY);

            if(value != policyRelPath){
                $widget.closest(".coral-Form-fieldwrapper").append(HIDE_HTML);
                $widget.remove();
            }
        });
    }

    function getEditableTemplatePath(){
        var gAuthor = Granite.author;

        if(!gAuthor  || !gAuthor.pageInfo){
            return "";
        }

        return gAuthor.pageInfo.editableTemplate;
    }

    function getCurrentEditable(){
        var gAuthor = Granite.author;

        if(!gAuthor  || !gAuthor.DialogFrame){
            return;
        }

        return gAuthor.DialogFrame.currentDialog.editable;
    }

    function getParentResponsiveGridPolicyPath(editable){
        if(!editable){
            return "";
        }

        var parent = editable, containerPolicyPath;

        do{
            if(!parent){
                break;
            }

            if(parent.config && parent.config.isResponsiveGrid){
                containerPolicyPath = parent.config.policyPath;
                break;
            }

            parent = parent.getParent();
        }while(true);

        return containerPolicyPath;
    }
}(jQuery, jQuery(document)));