AEM 6.5.10.0 - Visibility rules in Content Fragment Editor using Naming Conventions

Goal

Support Field Visibility in Content Fragment Editor. Visibility Rules are available in Metadata Schema editor out of the box; this post provides a simple rule based visibility in CF editor using naming conventions.... 

Demo | Package Install | Content Fragment Model | Github

Solution

1) Create a clientlib /apps/eaem-cf-visibility-group/clientlibs/clientlib-cfv with categories=dam.cfm.authoring.contenteditor.v2 and dependencies=[lodash.compat], add below code to make the editor dynamic and follow naming conventions for visibility...

(function ($) {
    const   URL = document.location.pathname,
            CFFW = ".coral-Form-fieldwrapper",
            BORDER_STYLE = "1px solid #AAA",
            FIELD_TYPE_SELECTOR = "coral-select[name$='FieldType']";
    let initialized = false;

    if( !isCFEditor() ){
        return;
    }

    init();

    function init(){
        if(initialized){
            return;
        }

        initialized = true;

        window.Dam.CFM.Core.registerReadyHandler(addFieldGrouping);
    }

    function addFieldGrouping(){
        $(FIELD_TYPE_SELECTOR).each(function(index, fieldTypeSelect){
            Coral.commons.ready(fieldTypeSelect, doVisibility);
        });
    }

    function setFieldNamesAndStyling(fieldTypeSelect){
        const widgetItems = fieldTypeSelect.items.getAll();

        $(fieldTypeSelect).closest(CFFW).css("border-top", BORDER_STYLE)
                    .css("margin-top", "15px");

        _.each(widgetItems, (item) => {
            const $widget = $("[name^='" + item.value + "_']");
            $widget.closest(CFFW).css("border-bottom", BORDER_STYLE)
                .css("margin-bottom", "10px").css("padding-bottom", "10px");
        })
    }

    function doVisibility(fieldTypeSelect){
        const widgetItems = fieldTypeSelect.items.getAll();

        setFieldNamesAndStyling(fieldTypeSelect);

        hideAllButThis(fieldTypeSelect.selectedItem.value);

        fieldTypeSelect.on("change", function() {
            hideAllButThis(this.value);
        });

        function hideAllButThis(doNotHide){
            _.each(widgetItems, (item) => {
                const $cffw = $("[name^='" + item.value + "_']").closest(CFFW);
                $cffw.css("display", ( doNotHide == item.value ) ? "block" : "none");
            })
        }
    }

    function isCFEditor(){
        return ((URL.indexOf("/editor.html") == 0)
            ||  (URL.indexOf("/mnt/overlay/dam/cfm/admin/content/v2/fragment-editor.html") == 0) )
    }
}(jQuery));