Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

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

Avatar

Administrator

BlogImage.jpg

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.



Kautuk Sahni
0 Replies