Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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.

0 Replies