AEM 6.5.10.0 - Visibility rules in Content Fragment Editor using Naming Conventions | AEM Community Blog Seeding

AEM 6.5.10.0 - Visibility rules in Content Fragment Editor using Naming Conventions by Sreekanth Choudry Nalabotu

Abstract

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

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

Read Full Blog

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

Q&A

Please use this thread to ask the related questions.