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 Cloud Service - Content Fragment RTE Plugin for Dynamic Variables | AEM Community Blog Seeding

kautuk_sahni
Employee
Employee

BlogImage.jpg

AEM Cloud Service - Content Fragment RTE Plugin for Dynamic Variables by Sreekanth Choudry Nalabotu

Abstract

Goal
Adobe Experience Manager 2021.6.5586.20210628T210726Z-210600 (June 28, 2021)

Create a Content Fragment RTE Plugin (RichTextEditor) for Dynamic Variables. Variable is resolved with a value, when the CF is added on a page, fetched from Page Properties. As an example consider Credit Cards and Interest Rates. Interest Rate content is added in AEM as a Content Fragment and the actual interest rate is replaced with value when the CF is added on a specific Card page...

1) Add the plugin /apps/eaem-cs-cf-rte-dyn-var/cfm-dyn-var-plugin/clientlib with categories=[dam.cfm.authoring.contenteditor.v2, eaem-cfm.rte.plugin] and dependencies=eaem.lodash. Add the plugin logic JS file /apps/eaem-cs-cf-rte-dyn-var/cfm-dyn-var-plugin/clientlib/dyn-var-plugin.js with following code...

(function ($, $document) {
var EAEM_PLUGIN_ID = "eaem-dyn-var",
EAEM_TEXT_DYN_VAR_FEATURE = "eaemDynVar",
EAEM_DYN_VAR_ICON = EAEM_PLUGIN_ID + "#" + EAEM_TEXT_DYN_VAR_FEATURE,
CANCEL_CSS = "[data-foundation-wizard-control-action='cancel']",
DYN_VAR_SELECTOR_URL = "/apps/eaem-cs-cf-rte-dyn-var/cfm-dyn-var-plugin/dyn-var-selector.html",
SENDER = "experience-aem", REQUESTER = "requester", $eaemDynVarPicker,
url = document.location.pathname;

if( (url.indexOf("/editor.html") == 0)
|| ( url.indexOf("/mnt/overlay/dam/cfm/admin/content/v2/fragment-editor.html") == 0) ){
extendStyledTextEditor();
registerPlugin();
}else if(url.indexOf(DYN_VAR_SELECTOR_URL) == 0){
handlePicker();
}

function handlePicker(){
$document.on("click", CANCEL_CSS, sendCancelMessage);

$document.submit(sendSelectedVars);
}

function sendSelectedVars(){
var message = {
sender: SENDER,
action: "submit",
data: {}
}, $form = $("form"), $field;

_.each($form.find("[name^='./']"), function(field){
if(!field.checked || (field.tagName !== "CORAL-CHECKBOX")){
return;
}

$field = $(field);
message.data[$field.attr("name").substr(2)] = $field.val();
});

parent.postMessage(JSON.stringify(message), "*");
}

function sendCancelMessage(){
var message = {
sender: SENDER,
action: "cancel"
};

getParent().postMessage(JSON.stringify(message), "*");
}

function getParent() {
if (window.opener) {
return window.opener;
}

return parent;
}

function closePicker(event){
event = event.originalEvent || {};

if (_.isEmpty(event.data)) {
return;
}

var message, action;

try{
message = JSON.parse(event.data);
}catch(err){
return;
}

if (!message || message.sender !== SENDER) {
return;
}

action = message.action;

if(action === "submit"){
$eaemDynVarPicker.eaemFontPlugin.editorKernel.execCmd(EAEM_TEXT_DYN_VAR_FEATURE, message.data);
}

var modal = $eaemDynVarPicker.data('modal');
modal.hide();
modal.$element.remove();
}

function extendStyledTextEditor(){
var origFn = Dam.CFM.StyledTextEditor.prototype._start;

Dam.CFM.StyledTextEditor.prototype._start = function(){
addDynVarPluginSettings(this);
origFn.call(this);
}
}

function addDynVarPluginSettings(editor){
var config = editor.$editable.data("config");

config.rtePlugins[EAEM_PLUGIN_ID] = {
features: "*"
};

config.uiSettings.cui.multieditorFullscreen.toolbar.push(EAEM_DYN_VAR_ICON);
config.uiSettings.cui.inline.toolbar.push(EAEM_DYN_VAR_ICON);
}

function registerPlugin(){
var EAEM_CFM_DYN_VAR_PLUGIN = new Class({
toString: "eaemCFMDynVarPlugin",

extend: CUI.rte.plugins.Plugin,

textFontUI: null,

getFeatures: function () {
return [ EAEM_TEXT_DYN_VAR_FEATURE ];
},

notifyPluginConfig: function (pluginConfig) {
var defaults = {
tooltips: {}
};

defaults.tooltips[EAEM_TEXT_DYN_VAR_FEATURE] = {
title: "Select Dynamic Variable..."
};

CUI.rte.Utils.applyDefaults(pluginConfig, defaults);

this.config = pluginConfig;
},

initializeUI: function (tbGenerator) {
if (!this.isFeatureEnabled(EAEM_TEXT_DYN_VAR_FEATURE)) {
return;
}

this.textFontUI = new tbGenerator.createElement(EAEM_TEXT_DYN_VAR_FEATURE, this, false,
this.config.tooltips[EAEM_TEXT_DYN_VAR_FEATURE]);

tbGenerator.addElement(EAEM_TEXT_DYN_VAR_FEATURE, 999, this.textFontUI, 999);

if (tbGenerator.registerIcon) {
tbGenerator.registerIcon(EAEM_DYN_VAR_ICON, "brackets");
}

$(window).off('message', closePicker).on('message', closePicker);
},

isValidSelection: function(){
var winSel = window.getSelection();
return winSel && winSel.rangeCount == 1 && winSel.getRangeAt(0).toString().length > 0;
},

execute: function (pluginCommand, value, envOptions) {
if (pluginCommand != EAEM_TEXT_DYN_VAR_FEATURE) {
return;
}

this.showFontModal(this.getPickerIFrameUrl());
},

showFontModal: function(url){
var self = this, $iframe = $('
Topics

Topics help categorize Community content and increase your ability to discover relevant content.

0 Replies