Experience with Adobe Experience Manager (AEM, CQ) (2023)

All 483 articles are displayed.

Browse Latest see live

June 29, 2017 10:27

Next AEM 63: Collapsible and Expandable Composite Multifield with Touch User Interface

anterior AEM 63 - This and that

Hill

just show itmetadata formin themUpload DialogVonTouch UI Resource Console; This extension allows users to add metadata when uploading files

Demo|Installation package

Metadata form in upload dialog

metadata validation

Metadata in CRX

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-assets-file-upload-with-metadata

2)metadata formIt is shown inUpload Dialogesauthor dialogue; create the dialogue/apps/eaem-assets-file-upload-with-metadata/dialog, add metadata form nodes

Dialog-XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http ://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/container">
<Layout
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Enter title"
fieldLabel="Title"
nombre="./eaemTitle"
required="{Boolean}true"/>
<use of
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Use up to"
name="./eaemUseBy"
type="datetime"/>
<nurFürWeb
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/checkbox"
nombre="./eaemOnlyForWeb"
text="¿Solo web?"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./eaemSize">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
< Tags
jcr:primaryType="nt:unstructured"
schlinge:resourceType="cq/gui/components/common/tagspicker"
allowCreate="{Boolean}true"
fieldLabel="Labels"
number="./eaemTags"/>
</elements>
</column>
</elements>
</jcr:root>

3) Create nodes/apps/eaem-assets-file-upload-with-metadata/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategorieswith valueprey.gui.coral.fileuploadString property[]dependencieswith valueunderline

4) Create file (nt:file)/apps/eaem-assets-file-upload-with-metadata/clientlib/js.txt, add

upload-file-with-metadata.js

5) Create file (nt:file)/apps/eaem-assets-file-upload-with-metadata/clientlib/fileupload-with-metadata.js, add the following code

(Function($, $Document) {
var METADATA_DIALOG = "/apps/eaem-assets-file-upload-with-metadata/dialog.html",
METADATA_PREFIX = "team",
UPLOAD_LIST_DIALOG = "#uploadListDialog",
ACTION_CHECK_DATA_VALIDITY = "ACTION_CHECK_DATA_VALIDITY",
POST_METADATA_ACTION = "POST_METADATA_ACTION",
url = document.location.pathname;

if( url.indexOf("/assets.html") == 0 ){
handleAssetConsole();
}else if(url.indexOf(METADATA_DIALOG) == 0){
handleMetadataDialog();
}

Function handleAssetsConsole(){
$document.on("foundation-contentloaded", handleFileAdditions);
}

function handleMetadataDialog(){
$(Function(){
_.defer(metadataIframestyle);
});
}

Function registerReceiveListener(Handler) {
say (ventana.addEventListener) {
window.addEventListener("message", handler, false);
} else if (window.attachEvent) {
window.attachEvent("message", Handler);
}
}

function styleMetadataIframe(){
var $dialog = $("Choral Dialog");

if(_.isEmpty($dialog)){
Give back;
}

$dialog.css("overflow", "hidden");

$dialog[0].open = true;

var $header = $dialog.css("background-color", "#fff").find(.coral-Dialog-header");

$header.find(".cq-dialog-actions").remove();

$dialog.find(.coral-Dialog-wrapper").css("margen","0").find(.coral-Dialog-content").css("relleno","0");

registerReceiveDataListener(postMetadata);

function postMetadata(event){
var message = JSON.parse(event.data);

if(message.action !== ACTION_CHECK_DATA_VALIDITY ){
Give back;
}

var $dialog = $(.cq-dialog"),
$fields = $dialog.find("[name^='./']"),
data = {}, $field, $fValidation, name, value, values,
isDataInValid = falso;

$fields.each(function(index, field){
$field = $(field);
name = $field.attr("name");
value = $field.val();

$fValidation = $field.adaptTo("validation-base");

if($fValidation && !$fValidation.checkValidity()){
isDataInValid = true;
}

$campo.updateErrorUI();

if(_.isEmpty(Wert)){
Give back;
}

name = name.substr(2);

if(!name.indexOf(METADATA_PREFIX) === 0){
give back
}

if(!_.isEmpty(data[name])){
if(_.isArray(data[name])){
data[name].push(value);
}andros{
values ​​= [];
values.push(data[name]);
valores.push (Wert);

data[name] = values;
data[name + "@TypeHint"] = "String[]";
}
}andros{
data[name] = value;
}
});

sendMessageValidity(isDataInValid, Daten);
}

Funktion sendValidityMessage(isDataInValid, data){
var message = {
Action: ACTION_CHECK_DATA_VALIDITY,
data: data,
isDataInValid: isDataInValid
};

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

Function handleFileAdditions(){
var $fileUpload = $("coral-chunkfileupload"),
$metadataIFrame, $subirBotón, validarSubirBotón,
metadata;

$fileUpload.on('coral-fileupload:fileadded', addMetadataDialog);

$fileUpload.on('coral-fileupload:loadend', postMetadata);

function sendMessageData(message){
$metadataIFrame[0].contentWindow.postMessage(JSON.stringify(mensaje), "*");
}

function addMetadataDialog(){
_.debounce(addDialog, 500)();
}

function addDialog(){
var $dialog = $(UPLOAD_LIST_DIALOG);

if(!_.isEmpty($dialog.find("iframe"))){
Give back;
}

var iFrame = '<iframe width="550px" height="450px" frameborder="0" src="' + METADATA_DIALOG + '"/>',
$dialogContent = $dialog.find("coral-dialog-content");

$metadataIFrame = $(iFrame).appendTo($dialogContent.css("max-height", "600px"));
$dialogContent.find("input").css("width", "30rem");
$dialogContent.closest(.coral-Dialog-wrapper").css("arriba", "30%").css("izquierda", "50%");

addValidateUploadButton($dialog);
}

Function addValidateUploadButton($dialog){
var $footer = $dialog.find("coral-dialog-footer");

$uploadButton = $footer.find("coral-button-label:contains('Upload')").closest("button");

validarUploadButton = nuevo Coral.Button().set({
Variant: 'primary'
});

validateUploadButton.label.textContent = Granite.I18n.get('Subir');

validarUploadButton.classList.add('dam-asset-upload-button');

$page pie[0].appendChild(validateUploadButton);

$uploadButton.hide();

validarUploadButton.hide();

validateBotónUp.on('click', function() {
verifyValidityOfData();
});

$metadataIFrame.on('load', function(){
validarUploadButton.show();
});

registrarseRecibirEscuchaDeDatos(esMetadataValid);
}

Function isMetadataValid(event){
var message = JSON.parse(event.data);

if( (message.action !== ACTION_CHECK_DATA_VALIDITY)){
Give back;
}

if(message.isDataInValid){
Give back;
}

metadata = message.data;

validarUploadButton.hide();

$subirBotón.click();
}

function checkDataValidity(){
var message = {
Action: ACTION_CHECK_DATA_VALIDITY
};

sendMessageData(message);
}

function postMetadata(event){
var detail = evento.originalEvent.detail,
folderPath = detail.action.replace(".createasset.html", ""),
assetMetadataPath = folderPath + "/" + detail.item.name + "/jcr:content/metadata";

//jcr:content/metadata created by the DAM update asset workflow may not be available when the next post is published
// the call is executed; Ideally, you post the parameters to aem, a scheduler runs and adds the metadata if the metadata
//The node becomes available again
$.ajax({
Type: 'POST',
URL: asset metadata path,
Data: metadata
})
}
}

})(jQuery, jQuery(Documento));

6) #212 is for demonstration purposes only; in real world implementations, the metadata node created byDAM Update AssetThe workflow may not yet exist when the ajax post metadata call is executed. Replace this direct call with a servlet that temporarily stores the form's metadata and updates the metadata node (when available) in a scheduler or listener

August 12, 2017 at 5:12 PM

Next AEM 63 - Touch User Interface Register Component Action Open dialog programmgesteuert

anterior AEM 63 – Touch Console UI Assets to add metadata when uploading files

Hill

expand productcomposite multifieldprovideexpand collapsefunction, for a better experience and easy reordering

demonstration | Install package | GitHub

All items collapsed

An expanded article

easy rearrangement

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-foldable-multifield

2) Example of dialog with composite multifield/apps/eaem-touchui-plegable-multifield/muestra-plegable-multifield/cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="63 Multicampo contraíble"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
< products
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
eaem-show-on-collapse="EAEM.showProductName"
fieldLabel="Products">
<Feld
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container"
name="./products">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<Product
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Name of products"
fieldLabel="product name"
name="./product"/>
<camino
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Select route"
field tag="path"
name="./path"
rootPath="/content"/>
< Start date
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Start Date"
name="./startDate"
type="datetime"/>
<show
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./show"
text="¿Display?"
value="y"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./size">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
</elements>
</column>
</elements>
</Feld>
</Products>
</elements>
</column>
</elements>
</content>
</jcr:root>

3) #14eaem-show-on-collapseproperty is for the function that creates a summary of items from multiple fields in collapsed mode; Here it isEAEM.showProductName, returns the first field value in a multi-field element (if empty or fails to create summary)click to enlargetext is displayed)

4) Create node/apps/eaem-touchui-collapsible-multifield/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.Dialog.all, String propertydependencieswith valueunderline

5) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/js.txt, add

Plegable-Multifield.js

6) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/collapsible-multifield.js, add the following code

(Function(){
if(EAEMtype === "undefined"){
EAEM = {};
}

//The function to be executed when the user clicks Collapse; returns a summary of article data with multiple fields
EAEM.showProductName = Function(Fields){
Return Object.Values(Fields)[0];
}
}());

(Function ($, $Document, gAuthor) {
var summaryCreators = {},
CORAL_MULTIFIELD = "Korallen-Mehrfeld",
CORAL_MULTIFIELD_ITEM = "Coral Multifield Item",
CORAL_MULTIFIELD_ITEM_CONTENT = "Coral Multi-Item Item Content",
EAEM_SHOW_ON_COLLAPSE = "eaem-show-on-collapse",
RS_MULTIFIELD = "granite/ui/components/coral/foundation/form/multifield";

$document.on("dialogbereit", addCollapsers);

function addCollapsers(){
var $multifields = $(CORAL_MULTIFIELD).css("right-padding", "2.5rem");

if(_.isEmpty($multifields)){
Give back;
}

$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);

$multifields.on('change', function(){
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
});

loadShowSummaryCreatorFunctions();

addExpandCollapseAll($multicampos);

function handler() {
var $mfItem = $(number);

if(!_.isEmpty($mfItem.find("[icon=accordionUp]"))){
Give back;
}

addAccordionIcons($mfItem);

addSummarySection($mfItem);
}
}

Function addSummarySection($mfItem){
var $summarySection = $("<div/>").insertAfter($mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT))
.addClass("Pozo de Coral").css("Cursor", "Zeiger").hide();

$summarySection.click(function(){
$mfItem.find("[icono='accordionDown']").click();
});
}

function addExpandCollapseAll($multifields){
var $mfAdd, ExpandAll, CollapseAll;

$multifields.find("[korallen-multifield-add]").each(handler);

function handler() {
$mfAdd = $(die);

expandAll = nuevo Coral.Button().set({
Variant: 'secondary',
inner text: "Expand all"
});

expandAll.$.css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionDown']").click();
});

collapseAll = new Coral.Button().set({
Variant: 'secondary',
inner text: "Collapse All"
});

collapseAll.$.css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionUp']").click();
});

$mfAdd.after(expandAll).after(collapseAll);
}
}

Función loadShowSummaryCreatorFunctions(){
var editable = gAuthor.DialogFrame.currentDialog.editable;

if (!editable) {
Give back;
}

$.ajax(editable.config.dialog + ".infinity.json").done(fillLabelCreatorFns);

function fillLabelCreatorFns(obj){
if(!_.isObject(obj) || _.isEmpty(obj)){
Give back;
}

_.each(object, function(value){
if(valor["sling:resourceType"] === RS_MULTIFIELD){
if(!_.isEmpty(Wert.Feld) && !_.isEmpty(Wert.Feld.Name)) {
SummaryCreators[value.field.name] = value[EAEM_SHOW_ON_COLLAPSE];
}
}andros{
if(_.isObject(valor) && !_.isEmpty(valor)){
llenarLabelCreatorFns(Wert);
}
}
});
}
}

Function addAccordionIcons($mfItem){
var up = new Coral.Button().set({
Variant: "calm",
Symbol: "Accordion up",
Title: "Breakdown"
});

up.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
arrive.$.on('click', controller);

$mfItem.append(arri);

var below = new Coral.Button().set({
Variant: "calm",
Symbol: "AkkordeonDown",
Title: "Expand"
});

down.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
down.$.on('click', controller).hide();

$mfItem.append(next);

function(event) handler {
event.preventDefault();

var mfName = $(this).closest(CORAL_MULTIFIELD).attr("data-granite-coral-multifield-name"),
$mfItem = $(east).closest(CORAL_MULTIFIELD_ITEM),
$summarySection = $mfItem.children("div");

$summarySection.html(getSummary($mfItem, mfName));

setUI.call(this, $summarySection);
}

function wrapUI($summarySection){
var icon = $(this).find("coral-icon").attr("icono"),
$contenido = $mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT);

if(icon == "accordion up"){
if($summarySection.css("display") !== "ninguno"){
Give back;
}

$summarySection.show();

$contenido.slideToggle( "schnell", function() {
$content.hide();
});

arrive.$.hide();
down.$.show();
}andros{
if($summarySection.css("display") === "ninguno"){
Give back;
}

$summarySection.hide();

$contenido.slideToggle( "schnell", function() {
$content.display();
});

top.$.show();
down.$.hide();
}
}
}

function getSummary($mfItem, mfName){
var summary = "Click to expand";

Attempt{
if(resumenCreadores[mfName]){
var-Campos = {};

$mfItem.find("entry").each(function(){
var $input = $(die);
campos[$input.attr("nombre")] = $input.val();
});

resumen = eval(summaryCreators[mfName])(campos);
}
}fang(err){}

if(!summary){
summary = "Click to expand";
}

return summary;
}
}(jQuery, jQuery(document), Granite.author));


August 15, 2017 6:54 a.m. m.

Next AEM 63: Clientlib to change dialog background to dark/light

anterior AEM 63: Collapsible and Expandable Composite Multifield with Touch User Interface

Hill

register aeditable component actionaopen dialogprogrammatic

You can find a similar extension for AEM 6 in this post

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/touchui-open-component-dialog-register-action

2) Create nodes/apps/touchui-open-component-dialog-register-action/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/apps/touchui-open-component-dialog-register-action/clientlib/js.txtand add

open.js

4) Create file (nt:file)/apps/touchui-open-component-dialog-register-action/clientlib/open.jsand add the following code

(Function ($Document, Author) {
var dialog open = {
icon: 'coral-Icon--game',
text: 'Open dialogue',
controller: function(editable, parameter, target) {
author.DialogFrame.openDialog(new author.edit.Dialog(editable));
},
condition: function (editable) {
//Show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
},
isNonMulti: true
};

$document.on('cq-layer-activated', function (ev) {
if (ev.layer === 'Edit') {
autor.EditorFrame.editableToolbar.registerAction('EAEM_OPEN_DIALOG', openDialog);
}
});
})($(document), Granite.author);


September 20, 2017 at 10:30 a.m.

Next AEM 63 - Touch UI Expand the Rich Text Link dialog, select Add Rel Attribute

anterior AEM 63 - Touch User Interface Register Component Action Open dialog programmgesteuert

Hill

add atoggle iconindialog headerto change itDark or light dialog background

demonstration| Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-dialog-dark-light-view

2) Create nodes/apps/eaem-dialog-dark-light-view/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/apps/eaem-dialog-dark-light-view/clientlib/js.txtand add

light-oscura.js

4) Create file (nt:file)/apps/eaem-dialog-dark-light-view/clientlib/dark-light.jsand add the following code

(Function ($, $Document) {
$document.on("dialogbereit", Handler);

function handler() {
var dialog = $("choral dialog"),
acciones = dialog.find(".cq-dialog-actions");

var bg = $(getButtonHtml()).prependTo(acciones);

bg.click(function(event){
event.preventDefault();
dialog.toggleClass("coral--oscuro");
});
}

getButtonHtml(){ function
return '<button class="cq-dialog-header-action coral-Button coral-Button--minimal" title="Background Dark/Light">' +
'<icon-coral-icon="bulb" size="S"/>' +
'</publish>';
}
})(jQuery, jQuery(Documento));

(Video) What is Adobe Experience Manager (AEM)?


September 26, 2017 at 11:50 a.m.

Next AEM 63: Content Fragment Editor Link Plugin for Touch UI

anterior AEM 63: Clientlib to change dialog background to dark/light

Hill

expandTouch UI Rich Text Editor Link Dialogto add the Coral Select widget to the selectionrel-Attribute of Anchor-Tags

For AEM 62 check this post

demonstration | Install package | GitHub


Selection of rel attribute in link dialog



rel Applied to the anchor tag



Anti-Samy considerations

Adding new attributes in the anchor tag can cause the attributes to be omitted during page rendering or when loading the link dialog; The following warning can be seen in error.log...

2017-09-26 12:40:42.804 *INFO* [0:0:0:0:0:0:0:1 [1506447642680] GET /content/we-retail/language-masters/en.html HTTP/1.1 ] org .apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy Warning: The a tag contained an attribute that we could not process. The rel attribute had the value "marker". For security reasons, this value could not be accepted. We decided to remove this attribute from the tag and leave everything else in place so we can process the input.

To closerealaccepted, make the following changes/apps/cq/xssprotection/config.xml(cover/libs/cq/xssprotection/config.xml), Prohandsome/htles/libs/sling/xss/config.xml


solution

1) Login to CRXDE Lite, create a folder (nt: folder)/apps/eaem-touchui-extend-rte-link-options

2) Create clientlib (typecq:ClientLibraryOrdner)/apps/eaem-touchui-extend-rte-link-options/clientliband set the propertycategoriesVonlinewrite tocq.Authoring.Dialog.allydependencies String[]aLodash

3) Create file (type nt:file)/apps/eaem-touchui-extend-rte-link-options/clientlib/js.txt, add the following

binding options.js

4) Create file (type nt:file)/Applications/eaem-touchui-extend-rte-link-options/clientlib/link-options.js, add the following code

(function ($) {
"use strictly";

var _ = window._,
class = window.class,
CUI = Ventana.CUI,
REL_FIELD = "rel",
RTE_LINK_DIALOG = "rtelinkdialog";

if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
Give back;
}

var EAEMLinkBaseDialog = new class ({
extender: CUI.rte.ui.cui.CQLinkBaseDialog,

toString: "EAEMLinkBaseDialog",

initialize: function(config) {
this.superClass.initialize.call(this, config);

this.$rteDialog = this.$container.find("[data-rte-dialog=link]");

this.$rteDialog.find(".rte-dialog-columnContainer:last").before(getLinkRelOptionsHtml());
},

dlgToModel: function() {
this.superClass.dlgToModel.call(this);

var relField = this.getFieldByType (REL_FIELD);

if(_.isEmpty(relField)){
Give back;
}

var relVal = relField.val();

si (_.isVacious(relVal)) {
Give back;
}

this.objToEdit.attributes["rel"] = relVal;
},

dlgFromModel: function() {
this.superClass.dlgFromModel.call(this);

if(_.isEmpty(this.objToEdit.attributes)){
Give back;
}

var relValue = this.objToEdit.attributes['rel'];

if(_.isEmpty(relValue)){
Give back;
}

var relSelect = this.$rteDialog.find("[tipo-de-datos='rel']")[0];

relSelect.items.getAll().forEach(function(item) {
elem.ausgewählt = (elem.value === relValue);
});
}
});

CUI.rte.ui.cui.CuiDialogHelper = new class({
erweitern: CUI.rte.ui.cui.CuiDialogHelper,

toString: "EAEMCuiDialogHelper",

instanciarDiálogo: function(dialogConfig) {
var tipo = dialogConfig.type;

if (write !== RTE_LINK_DIALOG){
this.superClass.instantiateDialog.call(this, dialogConfig);
Give back;
}

var $editable = $(this.editorKernel.getEditContext().root),
$contanedor = CUI.rte.UIUtils.getUIContainer($editable),
Dialog = new EAEMLinkBaseDialog();

dialog.attach (dialogConfig, $container, this.editorKernel);

return dialog;
}
});

Función getLinkRelOptionsHtml(){
var html = "<div class='rte-dialog-columnContainer'>" +
"<div class='rte-dialog-column'>" +
"<coral-select data-type='rel' placeholder='Elegir atributo \"rel\"'>";

var options = ["alternative", "author", "bookmark", "external", "help",
"license", "next", "nofollow", "noreferrer", "noopener", "previous", "find", "tag" ];

_.each(options, function(option){
html = html + getOptionHtml (Opción);
});

html = html + "</coral-select></div></div>";

devolver HTML;

function getOptionHtml(option){
return "<choral selection element>" + option + "</coral selection element>"
}
}

CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = verdadero;
})(jQuery);

October 8, 2017 7:35 a.m.

Next AEM 63: Touch UI to display date in list view of assets, sites, and OmniSearch Console

anterior AEM 63 - Touch UI Expand the Rich Text Link dialog, select Add Rel Attribute

Hill

Addlinks pluginaTouch UI Content Fragment Editor

See this post for an example extension for 62

demonstration | Install package | GitHub

links plugin

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-cfm-enlaces-complemento

2) Create nodes/apps/eaem-touchui-cfm-enlaces-plugin/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuedam.cfm.authorship.editors, String property[]dependencieswith valueunterstrich,granite.shared

3) Create file (nt:file)/apps/eaem-touchui-cfm-links-plugin/clientlib/js.txt, add

cfm-rte-enlaces-plugin.js

4) Create file (nt:file)/apps/eaem-touchui-cfm-links-plugin/clientlib/cfm-rte-links-plugin.js, add the following code

(Function ($, $Document) {
var EAEM_LINK = "eaemLink",
EAEM_REMOVE_LINK = "eaemRemoveLink",
PATH_BROWSER_ID = "eaemLinkPathBrowser",
POPOVER_BUTTONS = "eaemLinkPopoverButtons",
pluginAdded = false, bookmarks = {};

var EAEM_CFM_LINKS_PLUGIN = new class ({
toString: "EAEMCFMLinksPlugin",

extender: CUI.rte.plugins.Plugin,

getFeatures: function() {
Devuelve [ EAEM_LINK, EAEM_REMOVE_LINK ];
},

execute: function(pluginCommand, value, envOptions) {
var context = envOptions.editContext;

if (pluginCommand === EAEM_REMOVE_LINK) {
this.editorKernel.execCmd("unbind", undefined, context);
}andros{
bookmark.context = Kontext;
bookmark.selection = CUI.rte.Selection.createRangeBookmark(context);
openLinksPopover(contexto);
}
}
});

$document.on("cfm:content change", addLinksPlugin);

function addLinksPlugin(event, data) {
if (complement added) {
Give back;
}

var editor = data.editor;

if (!(Editor instance of Dam.CFM.StyledTextEditor)) {
Give back;
}

added plugin = true;

var ek = editor.rte.getEditorKernel(),
$toolbar = $(.editor-tools .toolbar .tools"),
linkPlugin = getLinkPlugin(yo),
linkRemovePlugin = getLinkRemovePlugin(ek);

$toolbar.append(getLinkHtml());

var linkElement = new CUI.rte.ui.stub.ElementImpl(EAEM_LINK, linkPlugin, true);

linkElement.notifyToolbar(ek.toolbar);

var linkRemoveElement = new CUI.rte.ui.stub.ElementImpl(EAEM_REMOVE_LINK, linkRemovePlugin, true);

linkRemoveElement.notifyToolbar(ek.toolbar);

createPathBrowser();

registerListeners(me);
}

function getLinkPlugin(Kernel editor){
return new EAEM_CFM_LINKS_PLUGIN(Kernel editor, EAEM_LINK);
}

function getLinkRemovePlugin(Kernel editor){
return new EAEM_CFM_LINKS_PLUGIN(Kernel editor, EAEM_REMOVE_LINK);
}

function createPathBrowser(){
var pathBrowser = new CUI.PathBrowser({
Elemento: $("#" + PATH_BROWSER_ID),
pickerTitle: "Pick Content",
crumbRoot: "Content",
Root path: "/Content",
pickerSrc: "/libs/wcm/core/content/common/pathbrowser/column.html/content/dam?predicate=hierarchyNotFile"
});

pathBrowser.$picker.data("pathbrowser-type", "content-browser");
pathBrowser.$picker.on("coral-pathbrowser-picker-confirm", fillPathBrowserInput);
}

function fillPathBrowserInput(event){
CUI.rte.Selection.selectRangeBookmark(bookmark.context, bookmark.selection);

var $pathBrowser = $(event.target), rutas = [],
selecciones = $pathBrowser.find(".coral-ColumnView").data("columnView").getSelectedItems();

if (_.isEmpty(selections)) {
Give back;
}

$.each(choice, function() {
Pfade.push(decodeURIComponent(this.item.data('value')));
});

$("#" + PATH_BROWSER_ID).find("input").val(rutas[0]);

abrirEnlacesPopover();
}

function registerListeners(ek){
var $botones = $("#" + POPOVER_BUTTONS),
$cancel = $buttons.children("button:first"),
$save = $buttons.children("button:last"),
pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");

$cancel.click(closeLinksPopover);

$save.click(driveSpeichern);

Function handleSave(){
CUI.rte.Selection.selectRangeBookmark(bookmark.context, bookmark.selection);

var $popoverContent = $popover.find("coral-popover-content"),
editContext = ek.getEditContext(), linksPlugin = ek.registeredPlugins["enlaces"],
linkAccessories = {
href: pathBrowserEle.find("entrada").val(),
Attribute: {
Title: $popoverContent.children("Input").val()
},
Ziel: $popoverContent.children("coral-select").val()
};

editContext.setState("CUI.SelectionLock", 1);

linksPlugin.linkDialog = { objToEdit : linkProps };

linksPlugin.applyLink(editContext);

closeLinksPopover();
}
}

function closeLinksPopover(){
setLinksPopoverVisibility(falso);
}

function openLinksPopover(){
setLinksPopoverVisibility(true);

SetTimeout (ApplyStyles, 100);

function applyStyles(){
var pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");

$popover.css("enlaces", "0").css("relleno", "10px")
.find("coral popover content").kids()
.css("Rand unten", "10px");

$(".editor-tools").css("Höhe", "600px");
}
}

function setLinksPopoverVisibility(open){
var pathBrowserEle = $("#" + PATH_BROWSER_ID),
$popover = pathBrowserEle.closest("coral popover");

$popover[0].open = open;
}

function getOptionHtml(option, value){
return "<coral-select-item value='" + valor + "'>" + opción + "</coral-select-item>";
}

function getPathBrowserHtml(){
return '<div id="' + PATH_BROWSER_ID + '" data-picker-multiselect="false" style="display:inline">' +
'<input class="js-coral-pathbrowser-input" is="coral-textfield" placeholder="Path" style="width: 69% ">' +
'<button class="js-coral-pathbrowser-button" is="coral-button" title="Pfad auswählen" style="margin-bottom: 10px; border-radius: 0; border-left:0">' +
'<coral-icon-icon="select" size="S"/>' +
'</publish>' +
'</div>';
}

getTargetHtml(){ function
var targetSel = "<coral-select data-type='rel' placeholder='Choose link \"target\" attribute...'>",
options = {"_self" : "Same Tab", "_blank" : "New Tab", "_parent" : "Parent Frame", "_top" : "Top Frame"};

_.each(options, function(option, value){
targetSel = targetSel + getOptionHtml(Option, Wert);
});

return (objetivoSel + "</coral-select>");
}

getButtonHtml(){ function
volver '<div style="float:right" id="' + POPOVER_BUTTONS + '">' +
'<button is="coral-button" title="Cerrar"variante="secundario" style="margin-right: 5px">' +
'<coral-icon-icon="close" size="S"/>' +
'</publish>' +
'<button is="coral-button" title="Speichern"variante="primary">' +
'<coral-icon-icon="verify" size="S"/>' +
'</publish>' +
'</div>';
}

function getLinkHtml(){
return '<div class="cfm-toolbar-section">' +
'<button id="eaemLink" is="coral-button"variante="quiet" icon="link" title="Agregar enlace" iconsize="S" data-rte-command="' +
EAEM_LINK + '">' +
'</publish>' +
'<coral popover location="bottom" target="#eaemLink">' +
'<coral popover content>' +
getPathBrowserHtml() +
'<input class="js-coral-pathbrowser-input" is="coral-textfield" placeholder="Alt text" value="">' +
getTargetHtml() + getButtonHtml() +
'</coral-popover-content>' +
'<cabezal-popover-coral oculto></header-popover-coral>' +
'</coral-popover>' +
'<button is="coral-button"variante="quiet" icon="linkOff" iconsize="S" title="Enlace entfernen" data-rte-command="'
+ EAEM_REMOVE_LINK + '">' +
'</publish>' +
'</div>';
}
}(jQuery, jQuery(Documento)));


October 17, 2017 7:49 a.m.

Next AEM 63: Touch UI Show full title in tag selector (and no ellipsis)

anterior AEM 63: Content Fragment Editor Link Plugin for Touch UI

Hill

show theDate and TimeinListening to assets, sites, OmniSearchconsoles

demonstration | Install package | GitHub

financial assets

websites

OmniSearch

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-list-view-show-date

2) Create nodes/apps/eaem-touchui-list-view-show-date/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valueGranit.utils, String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touchui-list-view-show-date/clientlib/js.txt, add

show-close.js

4) Create file (nt:file)/apps/eaem-touchui-list-view-show-date/clientlib/show-date.js, add the following code

(Function ($, $Document) {
var FOUNDATION_CONTENT_LOADED = "base-contenido cargado";

$document.on(FOUNDATION_CONTENT_LOADED, showDate);

function showDate(event){
var $times = $("td > time"), $time, datetime;

_.each($times, function(time){
$time = $(time);

closetime = $time.attr("closetime");

if(_.isEmpty(fechahora)){
Give back;
}

$hora.html((nueva Fecha(parseFloat(fechahora))).toLocaleString());
})
}
})(jQuery, jQuery(Documento));

November 3, 2017 12:42 p.m. m.

Next AEM 63: Add custom properties to DAM folders

anterior AEM 63: Touch UI to display date in list view of assets, sites, and OmniSearch Console

Hill

In the touch user interface, it displays theFull tag titlein the picker...

demonstration | Install package | GitHub

Product

renewal

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-tags-picker-show-full-title

2) Create nodes/apps/eaem-touchui-tags-picker-show-full-title/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.gui.common.tagspicker, String property[]dependencieswith valueLodash

3) Create file (nt:file)/apps/eaem-touchui-tags-picker-show-full-title/clientlib/js.txt, add

show-full-title.js

4) Create file (nt:file)/apps/eaem-touchui-tags-picker-show-full-title/clientlib/show-full-title.js, add the following code

(Function($, $Document) {
var expandido = falso, LETTER_COUNT = 22, INCREASE_BY = 1.5,
CV_ITEM_HEIGHT = 3, CV_LABEL_HEIGHT = 2;

$document.on("foundation-contentloaded", handlePathBrowser);

function handlePathBrowser(){
if (extended) {
Give back;
}

expanded = true;

var cuiPathBrowser = $(".coral-PathBrowser").data("pathBrowser");

if(!cuiPathBrowser){
Give back;
}

// Handle selector columns
extenderPicker(cuiPathBrowser);
}

function extenderPicker(cuiPathBrowser){
var cuiPicker = cuiPathBrowser.$picker.data("picker");

cuiPathBrowser.$button.on("clic", function() {
setTimeout(function() {
if(!cuiPicker.columnView){
console.log("EAEM - I couldn't initialize the column view");
Give back;
}

extenderColumnView(cuiPicker.columnView);
}, 200);
});
}

function extenderColumnView(columnView){
function handler(event, href, data) {
var $html = $(columnView._data[href]), height, increment,
$etiquetas = $html.find(.coral-ColumnView-label"),
$label, $cvElement;

$tags.each(function(index, tag){
$tag = $(tag);

$cvItem = $label.closest(.coral-ColumnView-item");

Erhöhen = (INCREASE_BY * Math.floor($label.html().length / LETTER_COUNT));

$cvItem.css("height", (CV_ITEM_HEIGHT + elevation) + "rem");

$label.css("height",(CV_LABEL_HEIGHT + elevation) + "rem").css("space", "normal");
});

columnView._data[href] = $html[0].outerHTML;
}

columnView.$element.on('coral-columnview-load', handler);
}
})(jQuery, jQuery(Documento));

December 5, 2017 12:54 p.m. m.

Next AEM 63 - Touch UI Add Images to Coral 3 Select Options.

anterior AEM 63: Touch UI Show full title in tag selector (and no ellipsis)

Hill

Addcustom propertiesa AEMprey folder....

demonstration | Install package | GitHub

renewal

Stored in CRX

(Video) Adobe Experience Manager (AEM) as a Cloud Service - Developers Edition.

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-carpeta-personalizada-properties

2) Create custom folder properties dialog/apps/eaem-touchui-carpeta-personalizada-properties/dialogwith the following xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http ://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<Layout
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<web title
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Enter title"
fieldLabel="Web Title"
nombre="./eaemWebTitle"
required="{Boolean}true"/>
<webDesc
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldDescription="Enter description"
fieldLabel="web description"
nombre="./eaemWebDesc"
required="{Boolean}true"/>
</elements>
</column>
</elements>
</jcr:root>

3) Create nodes/apps/eaem-touchui-carpeta-personalizada-properties/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategoriesWert[cq.gui.damadmin.foldershare.coral,cq.authoring.dialog.all], String property[]dependencieswith valueLodash

4) Create file (nt:file)/apps/eaem-touchui-carpeta-personalizada-propiedades/clientlib/js.txt, add

Folder Properties.js

5) Create file (nt:file)/apps/eaem-touchui-custom-folder-properties/clientlib/folder-properties.js, add the following code

(Function($, $Document) {
var FOLDER_SHARE_WIZARD = "/mnt/overlay/dam/gui/content/assets/foldersharewizard.html",
CUSTOM_DIALOG = "/aplicaciones/eaem-touchui-carpeta-personalizada-properties/dialog",
EAEM_GET_ADDN_PROPERTIES = "EAEM_GET_ADDN_PROPERTIES",
url = document.ubicación.ruta, $customTab;

if( url.indexOf(FOLDER_SHARE_WIZARD) == 0 ){
handleAssetConsole();
}else if(url.indexOf(CUSTOM_DIALOG) == 0){
handleDialogProperties();
}

Function handleAssetsConsole(){
$document.on("loaded-content-base", addProperties);
}

function addProperties(){
var cuiTabView = $("coral-tabview");

if(_.isEmpty(cuiTabView)){
Give back;
}

cuiTabView = cuiTabView[0];

$customTab = $(getCustomTab()).appendTo(cuiTabView.$.children("coral-tablist"));

var $panel = $(getCustomPanel()).appendTo(cuiTabView.$.children("coral-panelstack")),
$iFrame = $panel.find("iframe");

$customTab.on("click",function(){
if(!_.isEmpty($iFrame.attr("src"))){
Give back;
}

$iFrame.attr("src", CUSTOM_DIALOG + ".html?folder=" + ($("form")).attr("action"));
});

addDummySubmit($iFrame);
}

function addDummySubmit($iFrame){
var $submit = $("button[type=submit]"), $dummySubmit;

$dummySubmit = $("<button variación='primary' is='coral-button'>Speichern</button>").insertAfter($submit);

$send.hide();

$dummySubmit.click(handle);

function(event) handler {
event.preventDefault();

var message = {
Action: EAEM_GET_ADDN_PROPERTIES
};

$iFrame[0].contentWindow.postMessage(JSON.stringify(mensaje), "*");
}

registrarseReceiveDataListener (addAddnPropertiesToForm);
}

function addAddnPropertiesToForm(event){
var message = JSON.parse(event.data);

if(message.action!== EAEM_GET_ADDN_PROPERTIES){
Give back;
}

$customTab.find("coral-tab-label").css("color", message.isDataInValid ? "#e14132" : "#707070");

if(message.isDataInValid){
Give back;
}

var $form = $("form"), $enviar = $("button[tipo=enviar]");

$submit.click();

$.post ($form.attr("action") + "/jcr:content", message.data);
}

function handlePropertiesDialog(){
$(Function(){
_.defer(estiloCustomDialogIFrame);
});

registerReceiveDataListener (postAddnProperties);
}

function styleCustomDialogIFrame() {
var $dialog = $("Choral Dialog");

if (_.isEmpty($dialog)) {
Give back;
}

$dialog.css("overflow", "hidden");

$dialog[0].open = true;

$dialog.find(.coral-Dialog-header").remove();

Coral.commons.ready (korallenbereit);

function CoralReady() {
var top = ($(window).width() - 1140) + "px",
left = ($(window).height() - 1155) + "px";

$dialog.find(.coral-Dialog-wrapper").css("margin", top + " 0 0 " + left)
.css("Color de fondo", "#f5f5f5");

$.ajax(queryParameters()["folder"] + "/jcr:content.json").done(function(data){
var $fields = $dialog.find("[name^='./']"), $field, name;

$fields.each(function (index, field) {
$field = $(field);
$field.val(data[$field.attr("name").substr(2)] || '');
})
});
}
}

function postAddnProperties(event){
var message = JSON.parse(event.data);

if(message.action!== EAEM_GET_ADDN_PROPERTIES){
Give back;
}

var $dialogue = $("DialogueChoral"),
$fields = $dialog.find("[name^='./']"),
data = {}, $field, $fValidation, name, value, values,
isDataInValid = falso;

$fields.each(function(index, field){
$field = $(field);
name = $field.attr("name");
value = $field.val();

$fValidation = $field.adaptTo("validation-base");

if($fValidation && !$fValidation.checkValidity()){
isDataInValid = true;
}

$campo.updateErrorUI();

if(_.isEmpty(Wert)){
Give back;
}

data[name.substr(2)] = wert;
});

message = {
Action: EAEM_GET_ADDN_PROPERTIES,
data: data,
isDataInValid: isDataInValid
};

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

function getCustomTab(){
var title = "Custom";

$.ajax( { url: CUSTOM_DIALOG + ".json", asynchronous: false}).done(function(data){
Title = Data["jcr:Title"];
});

return '<coral-tab>' +
'<coral-tab-label>' + Título + '</coral-tab-label>' +
'</coral-tab>';
}

function getCustomPanel(){
var iFrame = '<iframe width="750px" height="750px" seamless="seamless" frameborder="0" />';

return '<coral panel>' +
'<div style="margin-top: 5px">' + iFrame + '</div>' +
'</panel-coral>';
}

function queryParameters(searchStr) {
var result = {}, parameter,
params = (searchStr ? searchStr.split(/\?|\&/) : document.location.search.split(/\?|\&/));

params.forEach(function(s) {
si (_.isVaccio(eso)) {
Give back;
}

param = it.split("=");
result[parameter[0]] = parameter[1];
});

return result;
}

Function registerReceiveListener(Handler) {
say (ventana.addEventListener) {
window.addEventListener("message", handler, false);
} else if (window.attachEvent) {
window.attachEvent("message", Handler);
}
}
})(jQuery, jQuery(Documento));

December 15, 2017 at 11:35 a.m.

Next AEM 63 - Create JPEG Renderings Workflow Process Step

anterior AEM 63: Add custom properties to DAM folders

Hill

AddPhotosinCoral 3 Select -granite/ui/components/coral/foundation/form/select

demonstration | Install package | GitHub

add image path

Image rendered in Select

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touch-ui-images-in-select

2) Add a sample component for testing purposes/apps/eaem-touch-ui-images-in-select/eaem-list-viewconloop:recursoSuperTiposet of property valuescore/wcm/components/lista/v1/lista(ie expansion of the list of basic components)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0"
jcr:description="example list view"
jcr:primaryType="cq:Componente"
jcr:title="Experience the AEM List View"
Schlinge:resourceSuperType="core/wcm/components/list/v1/list"
componentGroup="Try AEM"/>

3) Create nodes/apps/eaem-touch-ui-images-in-select/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.Dialog.all, String property[]dependencieswith valueunderline

4) Create file (nt:file)/apps/eaem-touch-ui-images-in-select/clientlib/js.txt, add

images-select.js

5) Create file (nt:file)/apps/eaem-touch-ui-images-in-select/clientlib/images-select.js, add the following code

(Function ($, $Document) {
var SELECT_RES_TYPE = "granite/ui/components/coral/foundation/form/select",
SLING_RES_TYPE = "sling:resourceType";

$document.on("dialogbereit", handleCoralSelect);

function handleCoralSelect(){
$.ajax(getDialogPath() + ".infinity.json").done(manejador);

function handler(data) {
var selectItems = {}, $widget;

fillItemsOfSelect ( Hide , selectItems );

_.each(selectItems, function(items, selectName){
$widget = $("[name='" + selectName + "']");

if(_.isEmpty($widget)){
Give back;
}

addImagesInCoralSelect($widget, elementos);
});
}
}

function getDialogPath(){
var gAuthor = Granit.Autor,
currentDialog = gAuthor.DialogFrame.currentDialog, DialogPath ;

if (current dialog instance of gAuthor.actions.PagePropertiesDialog){
var dialogSrc = actualDialog.getConfig().src;
dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
}andros{
var editable = gAuthor.DialogFrame.currentDialog.editable;

if (!editable) {
console.log("EAEM - editable not available");
Give back;
}

dialog path = editable.config.dialog;
}

return dialog path;
}

function addImagesInCoralSelect($widget, items){
var cssfit = false, $element;

_.each(elements, function(element){
if(!element.image){
Give back;
}

adjustarCss = true;

$elemento = $widget.find("coral-select-item[value='" + item.value + "']");

if(_.isEmpty($elemento)){
Give back;
}

$item.prepend("<img src='" + item.image + "' align='middle' width='30px' height='30px' style='margin-right: 5px; '/>" );
});

and (css adjuster) {
$widget.find("button").css("fill", "0 0 0 10px");
}
}

Function fillItemsOfSelect(data, selectItems){
if(!_.isObject(datos) || _.isEmpty(datos)){
return selected items;
}

_.each(data, function(value, key){
if(_.isObject(valor) && !_.isEmpty(valor)){
selectItems = fillItemsOfSelect (Wert, selectItems);
}andros{
if( (clave == SLING_RES_TYPE) && (valor == SELECT_RES_TYPE)){
selectItems[data.name] = data.items;
}
}
});

return selected items;
}
}(jQuery, jQuery(Documento)));

December 18, 2017 1:09 PM

Next AEM 63 - Coral 3 Multifield Element Listener Example

anterior AEM 63 - Touch UI Add Images to Coral 3 Select Options.

Hill

add aprocess stageaDAM-Update-Active-WorkflowcreatePlayback thumbnails in JPEG format(otb, thumbnails are created in PNG)

added workflow step in otbDAM-Update-Active-Workflow-/etc/workflow/models/dam/update_asset, for demonstration purposes only; In real implementations, the step must be added in the project-specific DAM update asset workflow

Many thanks to the unknown programmers for the snippets....

demo | Install package | source code | GitHub

process stage

Enter the width and height inprocess argumentseg width = 320, height = 320

JPEG playback


solution

1) Create OSGI bundleeaem-assets-jpeg-renderingto add the workflow step code (for example, using the Lazy Bones template eaem-simple-multimodule-project)

Lazybones erstellen aem-simple-multimodule-project 0.0.1-SNAPSHOT . -PgroupId=apps.experienceaem.assets
-PartifactId=eaem-assets-jpeg-renditions
-PprojectName="EAEM Asset JPEG Render Step"
-PappsFolderName="eaem-assets-jpeg-renditions"
-PpackageGroup="Experimente AEM"
-PaemVersion="6.3"

2) Create serviceapps.experienceaem.assets.impl.RenditionServiceImplto generate representations injpegformat, with the following code...

Paquete apps.experienceaem.assets.impl;

importar apps.experienceaem.assets.RenditionsService;
Import from com.adobe.cq.gfx.Gfx;
import com.adobe.cq.gfx.Instructions;
import from com.adobe.cq.gfx.layer;
com.adobe.cq.gfx.import plan;
com.day.cq.dam.api.Asset Import;
importar com.day.cq.dam.api.Rendition;
importar com.day.cq.dam.api.renditions.RenditionMaker;
importar com.day.cq.dam.api.renditions.RenditionTemplate;
importar com.day.cq.dam.api.thumbnail.ThumbnailConfig;
import com.day.cq.dam.commons.thumbnail.ThumbnailConfigImpl;
import com.day.cq.dam.commons.util.DamUtil;
import com.day.cq.dam.commons.util.OrientationUtil;
importar org.apache.commons.io.IOUtils;
importar org.apache.commons.lang3.StringUtils;
importar org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Property;
import org.apache.felix.scr.annotations.Reference;
import org.apache.felix.scr.annotations.Service;
importar org.apache.sling.api.resource.Resource;
import org.slf4j.Logger;
importar org.slf4j.LoggerFactory;

import java.io.InputStream;

/**
* Implementation of the reproduction service...
*/
@Components(
name="Experience the AEM Rendition Builder...",
metatype = true, immediate = true
)
@Property(name="service.description", value="Experience AEM Generate JPEG renditions for images")
@Service
public class RenditionServiceImpl implements RenditionsService {

end protected logger logging = LoggerFactory.getLogger(this.getClass());

@reference
privado RenditionMaker renditionMaker;

@reference
privados GFX-GFX;

public asset generateJpegRenditions(resource_resource, integer_width, integer_height) throws exception {
Active Asset = DamUtil.resolveToAsset(Resource);

log.info("Generate JPEG renditions for asset - " + asset.getPath());

RenditionTemplate[] templates = createRenditionTemplates(active, width, height);

renditionMaker.generateRenditions(activo, plantillas);

return active;
}

private RenditionTemplate[] createRenditionTemplates(active resource, integer width, integer height) {
ThumbnailConfig[] Thumbnails = new ThumbnailConfig[1];

thumbnails[0] = new ThumbnailConfigImpl(width,height,true);

RenditionTemplate[] templates = new RenditionTemplate[thumbnails.length];

for (int i = 0; i < thumbnails.length; i++) {
ThumbnailConfig thumb = miniaturas[i];

templates[i] = createThumbnailTemplate(asset, thumb.getWidth(), thumb.getHeight(), thumb.doCenter());
}

return templates;
}

private class JpegTemplate implements RenditionTemplate {
public plan plan;
public String representationName;
public string mimeType;

apply public game(active active) {
InputStream-Stream = nulo;
Attempt {
stream = gfx.render(plan, asset.adaptTo(Resource.class).getResourceResolver());
if(flow != null) {
return asset.addRendition (Wiedergabename, Stream, MimeType);
}
} Finally {
IOUtils.closeQuietly(flow);
}
return null;
}
}

private RenditionTemplate createThumbnailTemplate(Active Active, int width, int height, doCenter boolean) {
JpegTemplate template = new JpegTemplate();

final rendering = active.getOriginal();

template.renditionName = "cq5dam.thumbnail". + width + "." + height + ".jpeg";
template.mimeType = "Imagen/jpeg";
plantilla.plan = gfx.createPlan();

template.plan.layer(0).set("origin", interpretation.getPath());

applyOrientation(OrientationUtil.getOrientation(asset), template.plan.layer(0));

applyThumbnail(width, height, doCenter, template.mimeType, template.plan);

return template;
}

private static void applyThumbnail(int width, int height, boolean doCenter, String mimeType, Plan plan) {
Global instructions = plan.view();

global.set("width", width);
global.set("hey", height);
global.set("rszfast", Boolean.FALSO);

global.set("adjust", doCenter ? "adjust,1" : "restrict,1");

String fmt = StringUtils.substringAfter(mimeType, "/");

if ("png".equals(fmt) || "gif".equals(fmt) || "tif".equals(fmt)) {
fmt = fmt + "-alfa";
}

global.set("fmt", fmt);
}

private static void applyOrientation(short exifOrientation, layer layer) {
switch(exifOrientation) {
OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL case:
layer.set("flip", "lr");
interruption;
case OrientationUtil.ORIENTATION_ROTATE_180:
layer.set("rotate", 180);
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_VERTICAL:
layer.set("flip", "ud");
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL_ROTATE_270_CW:
layer.set("flip", "lr");
layer.set("rotate", 270);
interruption;
Fall OrientationUtil.ORIENTATION_ROTATE_90_CW:
layer.set("rotate", 90);
interruption;
Fall OrientationUtil.ORIENTATION_MIRROR_HORIZONTAL_ROTATE_90_CW:
layer.set("flip", "lr");
layer.set("rotate", 90);
interruption;
Fall OrientationUtil.ORIENTATION_ROTATE_270_CW:
layer.set("rotate", 270);
interruption;
}
}
}

3) Create a workflow processapps.experienceaem.assets.GenerateThumbnailsProcessimplementcom.adobe.granite.workflow.exec.WorkflowProcesswith the following code (internally callrenditionsService.generateJpegRenditions(recurso, ancho, alto))

Paquete apps.experienceaem.assets;

importar com.adobe.granite.workflow.WorkflowException;
importar com.adobe.granite.workflow.WorkflowSession;
importar com.adobe.granite.workflow.exec.WorkItem;
importar com.adobe.granite.workflow.exec.WorkflowData;
importar com.adobe.granite.workflow.exec.WorkflowProcess;
importar com.adobe.granite.workflow.metadata.MetaDataMap;
importar org.apache.commons.lang3.StringUtils;
importar org.apache.commons.lang3.math.NumberUtils;
import org.apache.felix.scr.annotations.*;
importar org.apache.sling.api.resource.Resource;
importar org.apache.sling.api.resource.ResourceResolver;
import org.slf4j.Logger;
importar org.slf4j.LoggerFactory;

importar javax.jcr.Session;
import java.util.Arrays;
import java.util.List;

@Components
@Service({com.adobe.granite.workflow.exec.WorkflowProcess.class})
@Properties({@Property(name = "process.label", value = "Experience AEM: Generate JPEG renditions")})
public class GenerateThumbnailsProcess implements WorkflowProcess {
end protected logger logging = LoggerFactory.getLogger(this.getClass());

@reference
private representation service representation service;

public void execution(WorkItem workItem, WorkflowSession workflowSession, MetaDataMap metaDataMap)
lanza WorkflowException {
Attempt {
ResourceResolver resourceResolver = workflowSession.adaptTo(ResourceResolver.class);

String path = getPayloadPath(workItem.getWorkflowData());

if (StringUtils.isEmpty(ruta)) {
throw new WorkflowException("Error getting path to payload asset");
}

List<String> processArgs = Arrays.asList(metaDataMap.get("PROCESS_ARGS", "").split(","));

if(processArgs.size() <2){
throw new WorkflowException("Specify the width and height in the process arguments, eg width=400,height=400");
}

Ganzzahlbreite = NumberUtils.createInteger(processArgs.get(0).substring(processArgs.get(0).indexOf("=") + 1));
Entero-Höhe = NumberUtils.createInteger(processArgs.get(1).substring(processArgs.get(1).indexOf("=") + 1));

session session = workflowSession.adaptTo(Session.class);
Ressourcenressource = resourceResolver.getResource(ruta);

renditionsService.generateJpegRenditions(recurso, ancho, alto);

session.save();
} catch (Exception e) {
log.error("Error executing thumbnail creation process", e);
}
}

protected string getPayloadPath(WorkflowData wfData) {
string payloadPath = null;

si (wfData.getPayloadType().equals("JCR_PATH")) {
payloadPath = (String)wfData.getPayload();
}

return payloadPath;
}
}

4) Add the process step to your workflow (usually DAM update active) and click save

December 21, 2017 12:16 p.m. m.

Next AEM 63 SP1: Touch UI extends rich text link dialog, removes parent frame option from target selection

anterior AEM 63 - Create JPEG Renderings Workflow Process Step

Hill

add atest listenerFor himtext box elementVonPage Properties Mnemonic URLCoral 3 multifield, changing background to #AAA on zoom

demonstration | Install package | GitHub

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touch-ui-multifield-item-listener

2) Create nodes/apps/eaem-touch-ui-multifield-item-listener/clientlibof type cq:ClientLibraryFolder, add the String propertycategorieswith valuecq.Authoring.dialog, String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touch-ui-multifield-item-listener/clientlib/js.txt, add

listener.js

4) Create file (nt:file)/apps/eaem-touch-ui-multifield-item-listener/clientlib/listener.js, add the following code

(Function ($, $Document) {
var PAGE_PROPS_PATH = "/mnt/overlay/wcm/core/content/sites/properties.html",
CORAL_MF_NAME = "data-granite-coral-multicampo-name",
CORAL_MF_NAME_VANITY = "./sling:vanityPath", listenerAttached = false;

if ( window . location . pathname . indexOf ( PAGE_PROPS_PATH ) !== 0 ) { ;
Give back;
}

$document.on("foundation-contentloaded", addListenerToVanityMF);

function addListenerToVanityMF(){
var $vanityMF = $("[" + CORAL_MF_NAME + "='" + CORAL_MF_NAME_VANITY + "']");

if(attached listener || _.isEmpty($vanityMF)){
Give back;
}

attached listener = true;

$vanityMF[0].on('change', function(){
var $mf = $(this), $text = $mf.find("[type=text]:last");

$text.focusout(function(){
$(esto).css("background color", "#AAA");
})
});

consola.log($vanityMF);
}
}(jQuery, jQuery(Documento)));


January 2, 2018 9:36 am

(Video) Enthink Taxonomy Manager® Demo for Adobe Experience Manager (AEM/CQ)

Next AEM 6.3.1: Add-on for alphabetic lists in Touch UI Rich Text Editor

anterior AEM 63 - Coral 3 Multifield Element Listener Example

Hill

expandTouch UI Rich Text Editor Link DialogaDelete parent framedisabled possibilitySelect target coralWidget

To add a new widget to the link dialog see this post

demonstration | Install package | GitHub

Product Link dialog box.

extended link dialog

Parent frame removed from target options list

solution

1) Login to CRXDE Lite, create a folder (nt: folder)/apps/eaem-touchui-extend-rte-remove-target-options

2) Create clientlib (typecq:ClientLibraryOrdner)/apps/eaem-touchui-extend-rte-remove-target-options/clientliband set the propertycategoriesVonlinewrite tocq.Authoring.Dialog.allydependencies String[]aLodash

3) Create file (type nt:file)/apps/eaem-touchui-extend-rte-remove-target-options/clientlib/js.txt, add the following

remove-target-options.js

4) Create file (type nt:file)/Applications/eaem-touchui-extend-rte-remove-target-options/clientlib/remove-target-options.js, add the following code (#27 removes parent frame option)

(function ($) {
"use strictly";

var _ = window._,
class = window.class,
CUI = Ventana.CUI,
RTE_LINK_DIALOG = "rtelinkdialog";

if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
Give back;
}

var EAEMLinkBaseDialog = new class ({
extender: CUI.rte.ui.cui.CQLinkBaseDialog,

toString: "EAEMLinkBaseDialog",

initialize: function(config) {
this.superClass.initialize.call(this, config);

this.$rteDialog = this.$container.find("[data-rte-dialog=link]");

var $objetivo = this.$rteDialog.find("coral-select"),
$padre = $target.find("coral-select-item[value='_parent']");

//Remove the main frame option
$target[0].items.remove($parent[0]);
}
});

CUI.rte.ui.cui.CuiDialogHelper = new class({
erweitern: CUI.rte.ui.cui.CuiDialogHelper,

toString: "EAEMCuiDialogHelper",

instanciarDiálogo: function(dialogConfig) {
var tipo = dialogConfig.type;

if (write !== RTE_LINK_DIALOG){
this.superClass.instantiateDialog.call(this, dialogConfig);
Give back;
}

var $editable = $(this.editorKernel.getEditContext().root),
$contanedor = CUI.rte.UIUtils.getUIContainer($editable),
Dialog = new EAEMLinkBaseDialog();

dialog.attach (dialogConfig, $container, this.editorKernel);

return dialog;
}
});

CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = verdadero;
})(jQuery);


January 11, 2018 10:12 AM m.

Next AEM 6.3.1.0: Extendable TouchUI side panel to add a new tab page structure

anterior AEM 63 SP1: Touch UI extends rich text link dialog, removes parent frame option from target selection

Hill

To createTouchUI-Rich-Text-EditorList complement (RTE) to aggregatealphabetical list

demonstration | Install package | GitHub

Complement en RTE

Plugin Settings: In-Place Editing

Plugin Settings - Dialog

solution

1) Login to CRXDE Lite, add nt: folder/apps/eaem-touch-rte-list-plugin-alphabetic

2) Createclientlib(cq:ClientLibraryOrdner)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlibset propertycategoriesacq.Authoring.Dialog.allydependenciesa[underline]

3) Create file (nt:file)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlib/js.txt, add the following content

list-plugin-alphabetically.js


4) Create file (nt:file)/apps/eaem-touch-rte-list-plugin-alphabetical/clientlib/list-plugin-alphabetical.js, add the following code

(function ($) {
"use strictly";

var _ = window._,
class = window.class,
GROUP = "aem-experience",
ALPHA_LIST_FEATURE = "AlphaListe",
ORDERED_LIST_CMD = "insert ordered list",
CUI = Ventana.CUI;

addPluginToDefaultUISettings();

var EAEMAlphaListCmd = new class ({
Expandir: CUI.rte.commands.List,

toString: "EAEMAalphaListCmd",

execute: function (execDef) {
this.superClass.execute.call(this, execDef);

var list = this.getDefiningListDom(execDef.editContext, execDef.nodeList);

if (! list) {
Give back;
}

$(List).attr("Type", "a");
}
});

CUI.rte.commands.CommandRegistry.register("_list", EAEMAlphaListCmd);

var EAEMAlphaListPlugin = new class ({
toString: "EAEMAalphaListPlugin",

extender: CUI.rte.plugins.Plugin,

pickerUI: null,

getFeatures: function() {
Devuelve [ALPHA_LIST_FEATURE];
},

initializeUI: function (tbGenerator) {
var plg = CUI.rte.plugins;

if (!this.isFeatureEnabled(ALPHA_LIST_FEATURE)) {
Give back;
}

this.pickerUI = tbGenerator.createElement(ALPHA_LIST_FEATURE, this, false, { title: "Lista alfabética..." });
tbGenerator.addElement (GROUP, plg.Plugin.SORT_FORMAT, this.pickerUI, 10);

var groupFeature = GRUPO + "#" + ALPHA_LIST_FEATURE;
tbGenerator.registerIcon(group characteristic, "abc");
},

execute: function(id, value, envOptions) {
if (! is a valid select()) {
Give back;
}

this.editorKernel.relayCmd (LISTA_ORDENADA_CMD);

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

updateState: function(selDef) {
var hasUC = this.editorKernel.queryState (ALPHA_LIST_FEATURE, selDef);

if (this.pickerUI != null) {
this.pickerUI.setSelected (hasUC);
}
}
});

function addPluginToDefaultUISettings(){
toolbar var = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.inline.toolbar;
toolbar.splice (3, 0, GRUPO + "#" + ALPHA_LIST_FEATURE);

Toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.fullscreen.toolbar;
toolbar.splice (3, 0, GRUPO + "#" + ALPHA_LIST_FEATURE);
}

CUI.rte.plugins.PluginRegistry.register(GRUPO,EAEMAlphaListPlugin);
})(jQuery);

January 12, 2018 11:22

Next AEM 6.3.1.0 – Touch UI adds min-max limit to Coral 3 multifield

anterior AEM 6.3.1: Add-on for alphabetic lists in Touch UI Rich Text Editor

Hill

add an nNew Page Tree tabFor himpanel lateralto write/editor.html

demonstration | Install package | GitHub


solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-panel-lateral-pagetree

2) Create nodes/Applications/equipment-touchui-sidepanel-pagetree/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/Applications/equipment-touchui-sidepanel-seitenbaum/clientlib/js.txtand add

pagetree.js

4) Create file (nt:file)/Applications/equipment-touchui-sidepanel-seitenbaum/clientlib/pagetree.jsand add the following code

(Function ($, $Document) {
var PAGE_BROWSER = "/aplicaciones/eaem-touchui-sidepanel-pagetree/page-browser/content/tree-wrapper.html",
pageTreeAdded = falsch;

$document.on('cq-layer-activated', addPageTree);

function addPageTree(event){
if(pageTreeAdded || (event.layer !== "Editar")){
Give back;
}

var sidePanel = Granite.autor.ui.SidePanel,
tabList = panel lateral._tabView.tabList;

tabList.items.add({
Title: "Page Tree",
Hang tags: {
Internal HTML: '<coral icon-icon="pages" size="S"/>'
}
});

var Panelstack = panel lateral._tabView.panelStack;

panelestack.items.add({
Content: {
HTML interno: getPageContent()
}
});

pageTreeAdded = wahr;
}

function getPageContent(){
volver "<div class='sidepanel-tab'>" +
"<span class='sidepanel-tab-title'>PageTree</span>" +
"<iframe src='" + PAGE_BROWSER + "' style='border:none' height='800px'></iframe>" +
"</div>";
}
})(jQuery, jQuery(Documento));

5) Create nt:folder for the tree HTML page/Applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapper

6) Create nt:file/Applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapper/html.jsp, add the following code

<%@page session="false" %>
<%@include file="/libs/foundation/global.jsp" %>

<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>
<Kopf>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Seitenbaum</title>

<style type="text/css">
#CQ .x-Tab-Panel-Body, #CQ .x-Panel-Body {
Background color: transparent !important;
}
</style>

<cq:includeClientLib-Kategorien="cq.compat.authoring.widgets"/>

<script type="text/javascript">
CQ.I18n.init({ "locale": "<%= request.getLocale() %>" });

CQ.Ext.onReady(Function () {
var pageTree = CQ.wcm.ContentFinderTab.getBrowseTree({
"Baumwurzel":{
"Text": CQ.I18n.getMessage("Content")
}
});

pageTree.on('beforedblclick', function(node){
ventana.open("/editor.html" + nodo.getPath() + ".html", '_blank');
});

var config = {
Article: [Page Tree],
xtype: "dialog wrapper"
};

var dialog = CQ.Util.build(config, null, null, false, null);

dialog.setWidth(300);
dialog.setHeight(700);
});

</script>
</head>
<body style="margin:10px 0 0 15px; overflow: hidden">
<div id="CQ"></div>
</body>
</html>

7) Create Sling: Sorted Folder/Applications/equipment-touchui-sidepanel-pagetree/page-browser/contenty nt: unstructured node/Applications/equipment-touchui-sidepanel-pagetree/page-browser/content/tree-wrapperwith propertyloop:resourceType=/applications/equipment-touchui-sidepanel-pagetree/page-browser/wrapperfor the HTML content of the page

January 19, 2018 2:56 PM

Next AEM 6.3.1.0 – Selected Visual Indicator for Touch UI Rich Text Plugin

anterior AEM 6.3.1.0: Extendable TouchUI side panel to add a new tab page structure

Hill

Addminimum, maximum limit settingextension toCoral 3 Multifield - Granit/UI/Komponenten/Koralle/Fundament/Form/Multifield

demonstration | Install package | GitHub

min configuration max

Maximum Validation

minimal validation

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-min-max-items-multifield

2) Create nodes/Applications/eaem-touchui-min-max-items-multifield/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuecq.Authoring.Dialog.all

3) Create file (nt:file)/Applications/eaem-touchui-min-max-items-multifield/clientlib/js.txtand add

min-max-multifield.js

4) Create file (nt:file)/Applications/eaem-touchui-min-max-items-multifield/clientlib/min-max-multifield.jsand add the following code

(Function ($, $Document, gAuthor) {
var EAEM_MAX_ITEMS = "eaem-max-items",
EAEM_MIN_ITEMS = "eaem-min-elements",
DATA_MF_NAME = "data-granite-coral-multicampo-name",
RS_MULTIFIELD = "granite/ui/components/coral/base/form/multifield",
SLING_RES_TYPE = "sling:resourceType";

$document.on("dialogbereit", addMinMaxCheck);

function addMinMaxCheck(){
$.ajax(getDialogPath() + ".infinity.json").done(manejador);

function handler(data) {
var mfProperties = {};

fillItemsOfMultifield ( Daten , mfProperties );

_.each(mfProperties, function(mfProps, mfName){
addValidator($("[" + DATA_MF_NAME + "='" + mfName + "']"),
mfProps[EAEM_MAX_ITEMS], mfProps[EAEM_MIN_ITEMS]);
});
}
}

Función addValidator($multifield, maxItems, minItems){
if (max elements) {
maxItems = parseInt(maxItems);
}

if (minItems){
minItems = parseInt(minItems);
}

$.validator.register({
Selector: "#" + $multifield.attr("id"),
validate: validate
});

validate function() {
var count = $multifield[0]._items.length;

if(maxItems && (recuento > maxItems) ){
return "Maximum allowed: " + maxItems + " items";
}

if(minItems && (count <minItems) ){
return "Minimum required: " + minItems + " items";
}

return null;
}
}

function getDialogPath(){
var gAuthor = Granit.Autor,
currentDialog = gAuthor.DialogFrame.currentDialog, DialogPath ;

if (current dialog instance of gAuthor.actions.PagePropertiesDialog){
var dialogSrc = actualDialog.getConfig().src;
dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
}andros{
var editable = gAuthor.DialogFrame.currentDialog.editable;

if (!editable) {
console.log("EAEM - editable not available");
Give back;
}

dialog path = editable.config.dialog;
}

return dialog path;
}

function fillItemsOfMultifield(data, mfProperties){
if(!_.isObject(datos) || _.isEmpty(datos)){
return mfProperties;
}

_.each(data, function(value, key){
if(_.isObject(valor) && !_.isEmpty(valor)){
mfProperties = llenarItemsOfMultifield (Wert, mfProperties);
}andros{
if( (clave == SLING_RES_TYPE) && (valor == RS_MULTIFIELD)){
mfProperties[data.field.name] = data;
}
}
});

return mfProperties;
}
}(jQuery, jQuery(document), Granite.author));


February 20, 2018 11:08

Next AEM 6.3.1.0 – Show custom banners in card, list, and column views of touch UI

anterior AEM 6.3.1.0 – Touch UI adds min-max limit to Coral 3 multifield

Hill

add avisual indication of background colorProselected plugininEnriched Text Editor

demonstration | Install package | GitHub

Product

renewal

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touch-rte-add-bgcolor-s selected-add

2) Create nodes/apps/eaem-touch-rte-add-bgcolor-selected-plugin/clientlibof the typecq:ClientLibraryOrdnerand add alinePropertycategorieswith valuerte.coralui3

3) Create file (nt:file)/apps/eaem-touch-rte-add-bgcolor-s selected-add/clientlib/js.txtand add

plugin-bg-color.js

4) Create file (nt:file)/apps/eaem-touch-rte-add-bgcolor-s selected-plugin/clientlib/plugin-bg-color.jsand add the following code

(Function ($, $Document) {
"use strictly";

var SEL_BG_COLOR = "#9999ff",
extended = incorrect;

if (extended) {
Give back;
}

expanded = true;

ExtendSetSelected();

function extendSetSelected(){
var elementoImpl = CUI.rte.ui.cui.ElementImpl;

if(!elementImpl){
Give back;
}

var origFn = elementImpl.prototype.setSelected;

elementImpl.prototype.setSelected = Function (isSelected, suppressEvent) {
origFn.call(this, isSelected, suppressEvent);
this.$ui.css("Hintergrundfarbe", isSelected ? SEL_BG_COLOR : "");
}
}
}(jQuery, jQuery(Documento)));

March 15, 2018 8:36 am

Next AEM 64: Added BlockQuote plugin to content snippet rich text editor

anterior AEM 6.3.1.0 – Selected Visual Indicator for Touch UI Rich Text Plugin

Hill

Showcustom bannersin the 3 views -Map, List, Column, if the size of the assets exceeds a certain limit, e.g. The following logic will add a red banner if the size is > 50 MB and a yellow banner if the size is > 4 MB

demonstration | Install package | GitHub

(Video) AEM Interview Questions And Answers | Adobe Experience Manager Interview Questions 2023 - MindMajix

map view

list view

column view

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-active-banner

2) Create nodes/apps/eaem-touchui-active-banners/clientlibof type cq:ClientLibraryFolder, add the String[] propertycategoriesWert[prey.gui.actions.coral], String property[]dependencieswith valueunderline

3) Create file (nt:file)/apps/eaem-touchui-assets-banners/clientlib/js.txt, add

banner.js

4) Create file (nt:file)/apps/eaem-touchui-assets-banners/clientlib/banners.js, add the following code

(Function ($, $Document) {
var FOUNDATION_CONTENT_LOADED = "base-contenido cargado",
FOUNDATION_MODE_CHANGE = "Base Mode Change",
FOUNDATION_COLLECTION_ID = "Stiftungssammlungs-ID",
LAYOUT_COL_VIEW = "Spalte",
LAYOUT_LIST_VIEW = "Lista",
LAYOUT_CARD_VIEW = "Carta",
COLUMN_VIEW = "Coral Column View",
EVENT_COLUMNVIEW_CHANGE = "coral column view:change",
FOUNDATION_COLLECTION_ITEM_ID = "Foundation Collection Item ID",
CORAL_COLUMNVIEW_PREVIEW = "Coral Column View Preview",
CORAL_COLUMNVIEW_PREVIEW_ASSET = "coral-column-view-preview-asset",
EAEM_BANNER_CLASS = "Eaem-Banner",
EAEM_BANNER = ".eaem-Banner",
FOUNDATION_COLLECTION_ITEM_TITLE = "Foundation Collection Item Title",
MED_SIZE_LIMIT = "4194304", //4mb
LARGE_SIZE_LIMIT = "52428800", //50mb
colViewListenerAdded = falso,
DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages";

$document.on(FOUNDATION_CONTENT_LOADED, checkFileSizes);

$document.on(FOUNDATION_MODE_CHANGE, function(){
colViewListenerAdded = false;
check FileSizes();
});

function checkFileSizes(){
var folderPath = $(DAM_ADMIN_CHILD_PAGES).data(FOUNDATION_COLLECTION_ID);

if(_.isEmpty(rutacarpeta)){
Give back;
}

$.ajax(carpetaPath + ".3.json").done(showLargeFileSizeBanners);
}

Función showLargeFileSizeBanners(pathsObj){
if(esColumnView()){
handleColumnView();
}

if(_.isEmpty(pathsObj)){
Give back;
}

if(isCardView()){
addCardViewBanner (rutaObj);
}else if(isListView()){
addListViewBanner(pathsObj)
}
}

handleColumnView(){ function
var $vistaColumna = $(COLUMN_VIEW);

if(colViewListenerAdded){
Give back;
}

colViewListenerAdded = true;

$columnView.on(EVENT_COLUMNVIEW_CHANGE, handleColumnItemSelection);
}

function handleColumnItemSelection(event){
var detail = evento.originalEvent.detail,
$active = $(detail.selection[0]),
routeAsset = $asset.data(FOUNDATION_COLLECTION_ITEM_ID);

if(_.isEmpty(assetpath)){
Give back;
}

$.ajax(asset path + ".2.json").done(addColumnViewBanner);
}

function addColumnViewBanner(assetObj){
getUIWidget(CORAL_COLUMNVIEW_PREVIEW).then(manejador);

function handler ($colPreview){
var $assetPreview = $colPreview.find(CORAL_COLUMNVIEW_PREVIEW_ASSET);

$assetPreview.find(EAEM_BANNER).remove();

$assetPreview.prepend(getBannerMissingLinksHtmlColumnView(assetObj));
}
}

function getBannerMissingLinksHtmlColumnView(assetObj){
var size = nestedPluck(assetObj,"jcr:content/metadata/dam:size");

if(!size || (nestedPluck(assetObj,"jcr:content/dam:assetState") == "Verarbeitung")){
Give back;
}

var ct = getColorText(Size);

if(!ct.color){
Give back;
}

return "<coral-tag style='background-color: " + ct.color + ";z-index: 9999; width: 100%' class='" + EAEM_BANNER_CLASS + "'>" +
"<i class='coral-Icon coral-Icon--bell coral-Icon--sizeXS' style='margin-right: 10px'></i>" +
ct.text +
"</coral-tag>";
}

function getBannerMissingLinksHtml(assetObj){
var size = nestedPluck(assetObj,"jcr:content/metadata/dam:size"), Farbe, Text;

if(!size || (nestedPluck(assetObj,"jcr:content/dam:assetState") == "Verarbeitung")){
Give back;
}

var ct = getColorText(Size);

if(!ct.color){
Give back;
}

return "<coral-alert style='background-color:" + ct.color + "'class='" + EAEM_BANNER_CLASS + "'>" +
"<coral alarm content>" + ct.text + "</coral alarm content>" +
"</coral alert>";
}

function getColorText(size){
tamaño = parseFloat(tamaño);

it was Farbe, Text;

si (tamaño > LARGE_SIZE_LIMIT){
color = "#ff7f7f";
text = "GROSS > 50 MB";
}if not (size > MED_SIZE_LIMIT){
color = "#FFBF00";
text = "MEDIA > 4MB";
}

Give back{
color: color,
Text: Text
}
}

function addListViewBanner(pathsObj){
var $contenedor = $(DAM_ADMIN_CHILD_PAGES), $item, clazz, assetPath, ct, size,
OrdnerPfad = $container.data(FOUNDATION_COLLECTION_ID);

_.each(pathsObj, function(assetObj, assetName){
if(_.isString(activeObject) && isJCRProperty(assetName)){
Give back;
}

AssetPath = folder path + "/" + AssetName;

$elemento = $contenedor.find("[datos-" + FOUNDATION_COLLECTION_ITEM_ID + "='" + assetPath + "']");

if(!_.isEmpty($item.find(EAEM_BANNER))){
Give back;
}

tamaño = nestedPluck(assetObj,"jcr:content/metadata/dam:size");

ct = getTextColor(size);

if(!ct.color){
give back
}

$item.find("td").css("background-color" , ct.color).addClass(EAEM_BANNER_CLASS);

$item.find(FOUNDATION_COLLECTION_ITEM_TITLE).prepend(getListViewMissingLinksHtml());
});
}

function getListViewMissingLinksHtml(){
return "<i class='coral-Icon coral-Icon--bell coral-Icon--sizeXS' style='margin-right: 10px'></i>";
}

function addCardViewBanner(pathsObj){
var $contanedor = $(DAM_ADMIN_CHILD_PAGES), $element, routeActivo,
OrdnerPfad = $container.data(FOUNDATION_COLLECTION_ID);

_.each(pathsObj, function(assetObj, assetName){
if(_.isString(activeObject) && isJCRProperty(assetName)){
Give back;
}

AssetPath = folder path + "/" + AssetName;

$elemento = $contenedor.find("[datos-" + FOUNDATION_COLLECTION_ITEM_ID + "='" + assetPath + "']");

if(_.isEmpty($elemento)){
Give back;
}

if(!_.isEmpty($item.find(EAEM_BANNER))){
Give back;
}

$item.find("coral card info").append(getBannerMissingLinksHtml(assetObj));
});
}

isColumnView(){ function
volver (getAssetsConsoleLayout() === LAYOUT_COL_VIEW);
}

function isListView(){
volver (getAssetsConsoleLayout() === LAYOUT_LIST_VIEW);
}

function esCardView(){
volver (getAssetsConsoleLayout() === LAYOUT_CARD_VIEW);
}

function getAssetsConsoleLayout(){
var $childPage = $(DAM_ADMIN_CHILD_PAGES),
FoundationLayout = $childPage.data("foundation-layout");

if(_.isEmpty(foundationLayout)){
give back "";
}

Devuelve FoundationLayout.layoutId;
}

function getUIWidget(selector){
if(_.isEmpty(selector)){
Give back;
}

var deferred = $.Deferred();

var INTERVAL = establishInterval(function(){
var $widget = $(Selector);

if(_.isEmpty($widget)){
Give back;
}

clearInterval(INTERVAL);

deferred.resolve($widget);
}, 250);

deferred. Promise ();
}

function starts with (val, start) {
Return value && start && (val.indexOf(start) === 0);
}

function isJCRProperty(property){
return (startsWith(property, "jcr:") || startedWith(property, "sling:"));
}

function nestedPluck(objeto, clave) {
if (!_.isObject(object) || _.isEmpty(object) || _.isEmpty(key)) {
give back[];
}

if (clave.indexOf("/") === -1) {
ReturnObject[Key];
}

var nestedKeys = _.reject(key.split("/"), function(token) {
volver token.trim() === "";
}), object or nested value = object;

_.each(nested keys, function(nKey) {
if(_.isUndefined(nestedObjectOrValue)){
Give back;
}

if(_.isUndefined(nestedObjectOrValue[nKey])){
nestedObjectOrValue = undefiniert;
Give back;
}

anidadoObjectOrValue = nestedObjectOrValue[nKey];
});

returns nested object or value;
}
}($, $(Document)));

April 5, 2018 4:04 PM

Next AEM 64: Collapsible and Expandable Composite Multifield with Touch User Interface

anterior AEM 6.3.1.0 – Show custom banners in card, list, and column views of touch UI

Hill

add theBlockzitatTouch UI PluginContent snippet rich text editor

demonstration | Install package | GitHub


solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create a folder/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin

2) Create nodes/aplicaciones/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlibof the typecq:ClientLibraryOrdner,add alinePropertycategorieswith valuedam.cfm.authoring.contenteditor.v2ydependenciesconstring[]Wert[lodash]

3) Create file (nt:file)/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlib/js.txtand add

pf-blockquote.js

4) Create file (nt:file)/apps/eaem-touchui-cfm-rte-pf-blockquote-plugin/clientlib/pf-blockquote.jsand add the following code

(Function ($, $Document) {
var plugin Added = false,
PARAFORMAT_PLUGIN = "Paraformat",
TB_TYPE_FULL_SCREEN = "multieditorPantalla completa",
BQ_FORMAT = { description: "blockquote", "tag": "blockquote"},
BQ_ACTION = "paraformato#cita en bloc";

$document.on("foundation-contentloaded", onContentLoad);

function inContentLoad(){
if (complement added) {
Give back;
}

added plugin = true;

var editorManager = $(.content-fragment-editor").data("multiEditorManager"),
$fullScreenBtn = editorManager.$_root.find("[data-action='cfm-fullscreen#start']");

$fullScreenBtn.on("clic", addBlockQuotePlugin);
}

function addBlockQuotePlugin() {
var editorManager = $(.content-fragment-editor").data("multiEditorManager"),
editor = editorManager._editorContainers[0].editor,
$tbContainer = editor._activeEditor.options.$rteToolbarContainer,
$popover = CUI.rte.UIUtils.getPopover(PARAFORMAT_PLUGIN, TB_TYPE_FULL_SCREEN, $tbContainer);

if(!_.isEmpty($popover.find("[data-action='" + BQ_ACTION + "']"))){
Give back;
}

$popover.find("lista-botones-coral").append(getBlockQuoteHtml($popover));

var $bqAction = $popover.find("[acción-datos='" + BQ_ACTION + "']"),
ek = editor._activeEditor.rte.editorKernel,
plugin = ek.getPlugin("paraformato");

plugin.formatUI.formatos.push (BQ_FORMAT);

plugin.formatUI.$ui = $popover.find('button[data-action^="' + PARAFORMAT_PLUGIN + '#"]');

$bqAction.on('click.rte-handler', handler);

function handler(s) {
var pluginUI = plugin.formatUI,
$goal = $(e.goal);

if (!$target.is('button')) {
$target = $target.closest('button');
}

pluginUI._resetSelection();
pluginUI._select(pluginUI._getFormatId($goal));

var editContext = yo.getEditContext();
editContext.setState('CUI.SelectionLock', 1);

plugin.run();

ek.enableFocusHandling();
me.focus(editContext);
}
}

function getBlockQuoteHtml($paraformat) {
var $bqButton = $($paraformat.find("button:last")[0].outerHTML);

$bqButton.attr("data-action", BQ_ACTION).find("coral-list-item-content").html(BQ_FORMAT.description);

Returns $bqButton[0].outerHTML;
}
}(jQuery, jQuery(Documento)));


April 19, 2018 4:31 PM

Next AEM 64: Touch UI Nested Composite Multifield with Coral 3

anterior AEM 64: Added BlockQuote plugin to content snippet rich text editor

Hill

expand productcomposite multifieldprovideexpand collapsefunction, for a better experience and easy reordering

For 63 check out this post

demonstration | Install package | GitHub

All items collapsed

a collapsed element

solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create a folder/apps/eaem-touchui-foldable-multifield

2) Example of dialog with composite multifield/apps/eaem-touchui-plegable-multifield/muestra-plegable-multifield/cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="64 Multicampo contraíble"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
< products
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
eaem-show-on-collapse="EAEM.showProductName"
fieldLabel="Products">
<Feld
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container"
name="./products">
<elements jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/container">
<elements jcr:primaryType="nt:unstructured">
<Product
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Name of products"
fieldLabel="product name"
name="./product"/>
<camino
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
fieldDescription="Select route"
field tag="path"
name="./path"
rootPath="/content"/>
< Start date
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/datepicker"
class="Feld"
displayed format="aaaa-mm-dd hh:mm"
fieldLabel="Start Date"
name="./startDate"
type="datetime"/>
<show
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./show"
text="¿Display?"
value="y"/>
<type
jcr:primaryType="nt:unstructured"
schlinge:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select size"
field tag="size"
name="./size">
<elements jcr:primaryType="nt:unstructured">
<def
jcr:primaryType="nt:unstructured"
text="Select size"
valor=""/>
<Klein
jcr:primaryType="nt:unstructured"
text="small"
valor="klein"/>
<medium
jcr:primaryType="nt:unstructured"
text="medium"
value="medium"/>
< grande
jcr:primaryType="nt:unstructured"
text="Large"
value="large"/>
</elements>
</Type>
</elements>
</column>
</elements>
</Feld>
</Products>
</elements>
</column>
</elements>
</content>
</jcr:root>

3) #18eaem-show-on-collapseproperty is for the function that creates a summary of items from multiple fields in collapsed mode; Here it isEAEM.showProductName, returns the first field value in a multi-field element (if empty or fails to create summary)click to enlargetext is displayed)

4) Create node/apps/eaem-touchui-collapsible-multifield/clientlibof type cq:ClientLibraryFolder, add string property categories with valuecq.Authoring.Dialog.all, String propertydependencieswith valueunderline

5) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/js.txt, add

Plegable-Multifield.js

6) Create file (nt:file)/apps/eaem-touchui-collapsible-multifield/clientlib/collapsible-multifield.js, add the following code

(Function(){
if(EAEMtype === "undefined"){
EAEM = {};
}

//The function to be executed when the user clicks Collapse; returns a summary of article data with multiple fields
EAEM.showProductName = Function(Fields){
Return Object.Values(Fields)[0];
}
}());

(Function ($, $Document, gAuthor) {
var summaryCreators = {},
CORAL_MULTIFIELD = "Korallen-Mehrfeld",
CORAL_MULTIFIELD_ITEM = "Coral Multifield Item",
CORAL_MULTIFIELD_ITEM_CONTENT = "Coral Multi-Item Item Content",
EAEM_SHOW_ON_COLLAPSE = "eaem-show-on-collapse",
RS_MULTIFIELD = "granite/ui/components/coral/foundation/form/multifield";

$document.on("dialogbereit", addCollapsers);

function addCollapsers(){
var $multifields = $(CORAL_MULTIFIELD).css("right-padding", "2.5rem");

if(_.isEmpty($multifields)){
Give back;
}

$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);

$multifields.on('change', function(){
$multifields.find(CORAL_MULTIFIELD_ITEM).each(manejador);
});

loadShowSummaryCreatorFunctions();

addExpandCollapseAll($multicampos);

function handler() {
var $mfItem = $(number);

if(!_.isEmpty($mfItem.find("[icon=accordionUp]"))){
Give back;
}

addAccordionIcons($mfItem);

addSummarySection($mfItem);
}
}

Function addSummarySection($mfItem){
var $summarySection = $("<div/>").insertAfter($mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT))
.addClass("Pozo de Coral").css("Cursor", "Zeiger").hide();

$summarySection.click(function(){
$mfItem.find("[icono='accordionDown']").click();
});
}

function addExpandCollapseAll($multifields){
var $mfAdd, ExpandAll, CollapseAll;

$multifields.find("[korallen-multifield-add]").each(handler);

function handler() {
$mfAdd = $(die);

expandAll = nuevo Coral.Button().set({
Variant: 'secondary',
inner text: "Expand all"
});

$(expandAll).css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionDown']").click();
});

collapseAll = new Coral.Button().set({
Variant: 'secondary',
inner text: "Collapse All"
});

$(collapseAll).css("left margin", "10px").click(function(){
event.preventDefault();
$(this).closest(CORAL_MULTIFIELD).find("[icon='accordionUp']").click();
});

$mfAdd.after(expandAll).after(collapseAll);
}
}

Función loadShowSummaryCreatorFunctions(){
var editable = gAuthor.DialogFrame.currentDialog.editable;

if (!editable) {
Give back;
}

$.ajax(editable.config.dialog + ".infinity.json").done(fillLabelCreatorFns);

function fillLabelCreatorFns(obj){
if(!_.isObject(obj) || _.isEmpty(obj)){
Give back;
}

_.each(object, function(value){
if(valor["sling:resourceType"] === RS_MULTIFIELD){
if(!_.isEmpty(Wert.Feld) && !_.isEmpty(Wert.Feld.Name)) {
SummaryCreators[value.field.name] = value[EAEM_SHOW_ON_COLLAPSE];
}
}andros{
if(_.isObject(valor) && !_.isEmpty(valor)){
llenarLabelCreatorFns(Wert);
}
}
});
}
}

Function addAccordionIcons($mfItem){
var up = new Coral.Button().set({
Variant: "calm",
Symbol: "Accordion up",
Title: "Breakdown"
});

up.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
up.on('click', controller);

$mfItem.append(arri);

var below = new Coral.Button().set({
Variant: "calm",
Symbol: "AkkordeonDown",
Title: "Expand"
});

down.setAttribute('style', 'position:absolute; top: 0; right: -2.175rem');
down.on('click', controller).hide();

$mfItem.append(next);

function(event) handler {
event.preventDefault();

var mfName = $(this).closest(CORAL_MULTIFIELD).attr("data-granite-coral-multifield-name"),
$mfItem = $(east).closest(CORAL_MULTIFIELD_ITEM),
$summarySection = $mfItem.children("div");

$summarySection.html(getSummary($mfItem, mfName));

setUI.call(this, $summarySection);
}

function wrapUI($summarySection){
var icon = $(this).find("coral-icon").attr("icono"),
$contenido = $mfItem.find(CORAL_MULTIFIELD_ITEM_CONTENT);

if(icon == "accordion up"){
if($summarySection.css("display") !== "ninguno"){
Give back;
}

$summarySection.show();

$contenido.slideToggle( "schnell", function() {
$content.hide();
});

up.hide();
down.show();
}andros{
if($summarySection.css("display") === "ninguno"){
Give back;
}

$summarySection.hide();

$contenido.slideToggle( "schnell", function() {
$content.display();
});

top.show();
below. hide ();
}
}
}

function getSummary($mfItem, mfName){
var summary = "Click to expand";

Attempt{
if(resumenCreadores[mfName]){
var-Campos = {};

$mfItem.find("entry").each(function(){
var $input = $(die);
campos[$input.attr("nombre")] = $input.val();
});

resumen = eval(summaryCreators[mfName])(campos);
}
}fang(err){}

if(!summary){
summary = "Click to expand";
}

return summary;
}
}(jQuery, jQuery(document), Granite.author));


All 483 articles are displayed.

Browse Latest see live

(Video) Adobe AEM/CQ Interview Questions

FAQs

What is CQ in Adobe AEM? ›

cq:Component. Current component. A component is of node type cq:Component . componentGroup.

Is it hard to learn Adobe Experience Manager? ›

Introduction to AEM development

Understanding AEM and building the best AEM website is as challenging as building a difficult product within a short time. You need to get a grip on the technology before you start exploring the most awaited methodologies.

Is Adobe Experience Manager easy to use? ›

Easy-to-use CMS

Adobe Experience Manager is a powerful and easy-to-use CMS that enables your marketing team to manage web and mobile content from a single platform. It incorporates inline editing and drag-and-drop functionality into a modern interface that makes it easy to create and deploy content quickly.

What are the skills required for AEM? ›

AEM Front End Developer Skills
  • Working knowledge of AEM Developer tools like as: ...
  • Understanding of the Java Content Repository API.
  • Understanding of OSGi and its Declarative Services.
  • Familiarity with building tools, including Maven.
  • Knowledge of version control tools, particularly Git.
Jan 18, 2023

What is cq template in AEM? ›

cq:template has the type nt:unstructured , it allows you to define a complex node with a set of properties and children. It's a node you create as a child of your component definition. This content will be used as default values whenever you drop a new instance of the component from the sidekick.

Does AEM require coding? ›

In order to carry out the duties and tasks listed above, AEM developers need to be proficient in certain technical skills. These include, first and foremost, excellent knowledge of programming languages, and experience in areas such as CMS development, Java content repositories, and web service creation.

How much time will it take to learn AEM? ›

If you are a student, it may take three months to be an AEM analyst, as you also need to learn the programming languages. If your IT professional already knows programming languages, it may take four weeks to complete the course.

Does Adobe Experience Manager require coding? ›

While you need to know how to code, that isn't where the bulk of AEM work is performed. The real expertise in working with AEM is to understand how to properly configure it. The subtle intricacies of the software make it so you can just use simple HTML, CSS, and Javascript.

What is the salary of Adobe Experience Manager? ›

Adobe Experience Manager and Content Author salary in India ranges between ₹ 3.5 Lakhs to ₹ 8.5 Lakhs with an average annual salary of ₹ 4.8 Lakhs.

What is AEM in simple terms? ›

AEM (Adobe Experience Manager) is a combination of digital asset management and content management system to give best customer experiences across all platforms like mobile, web, email and social media. It simplifies the flow of management and delivery of a website's content.

What Adobe program is best for beginners? ›

It's easy with Creative Cloud. You don't have to be a professional designer or photographer to get great results. Creative Cloud gives you access to all our desktop and mobile apps, plus step-by-step tutorials to get you up to speed. Just open an app, watch a tutorial, and get started.

What are the job duties of an Adobe Experience Manager? ›

Work with business, design teams, and delivery teams on a regular basis to understand timelines. Working with Brand, design, and digital copy and external agencies to ensure excellent online copy and design. Publishing online updates and coordinating delivery of activities.

Which language is used in AEM? ›

For custom development for the front end, AEM uses HTL (HTML Template Language). HTL is JSP-like in that it mixes HTML and special directives.

What does Adobe Experience Manager do? ›

Adobe Experience Manager Forms is an end-to-end digital document solution that makes it easy to create responsive forms that customers can easily complete and securely e-sign, making a seamless customer journey from acquisition through retention.

How do you answer CQ? ›

How to answer a CQ: First, use the callsign of the station you're calling. Follow that by your own callsign, and your approximate whereabouts. If the station you're calling is very strong, just once will do. If he's very weak, you might double up the call.

How do I use CQ template in AEM? ›

If you want to share the same default values across multiple components, you can create a node with any name, put all the properties there and add the path of that node as a value in the cq:templatePath property.It works exactly like cq:template but with the help of cq:templatePath, the same values can be shared across ...

What is CQ components? ›

CQ combines head (knowledge and understanding), body (actions), and heart (confidence and commitment).

What is the role of dispatcher in CQ AEM? ›

The Dispatcher stores the cached files on the web server as if they were part of a static website. If a user requests a cacheable document the Dispatcher checks whether that document exists in the web server's file system: if the document is cached, Dispatcher returns the file.

What is difference between AEM and CQ5? ›

I have seen AEM 6.0, the core of it is the same as CQ5. I checked out the examples, all the examples are the same, the only difference I found was the UI of WCM i.e. there is a new look and feel for it but you can still switch to the classic mode. CQ5 still encourages coding in JSP i.e. it still uses scriplets.

What is the salary of AEM front end developer? ›

Average starting Salary for AEM Developer in India is around ₹4.0 Lakhs per year (₹33.3k per month). 2 years of minimum experience is required to be a AEM Developer. What is the highest salary for a AEM Developer in India? Highest salary that a AEM Developer can earn is ₹11.5 Lakhs per year (₹95.8k per month).

Does Amazon use AEM? ›

This Partner Solution deploys an Adobe Experience Manager (AEM) OpenCloud architecture on the Amazon Web Services (AWS) Cloud with high-availability features, which includes Amazon Elastic Compute Cloud (Amazon EC2) Auto Scaling, Elastic Load Balancing, and Amazon CloudFront.

How to learn AEM from scratch? ›

Basic AEM Developer
  1. Create a Template.
  2. Create a component in classic ui.
  3. Create a component in touch ui.
  4. Switch between Classic ui and Touch ui.
  5. Convert Classic ui dialog to Touch ui Dialog.
  6. Create a Dialog.
  7. Create a Design Dialog.
  8. Create a Page in AEM.
Nov 29, 2016

Is AEM front-end or back end? ›

frontend Module. The AEM Project Archetype includes an optional dedicated front-end build mechanism based on Webpack with the following features. All JS and CSS files can now be added to each component. No .

Why is AEM so popular? ›

AEM Modules and Functionalities. AEM comes loaded with five modules—Sites, Assets, Mobile, Forms, and Community—which together make it a top-notch CMS platform to create and deliver high-traffic websites, forms, and mobile applications.

What is the first step in the AEM workflow? ›

Steps to create a workflow:

Navigate to the Workflow Models console in AEM: AEM Start Page > Tools > Workflow > Models.

Is AEM low code? ›

Is Adobe Experience Manager really a low-code / no-code platform? Sometimes. The truly low-code parts are digital asset management, content translation/localization, and maintenance on AEM cloud.

Do Adobe employees work from home? ›

A flexible workplace, Adobe has previously offered hybrid to 100% remote opportunities. The award-winning employer also provides benefits to help employees live well, take time to recharge, fuel their creativity, focus on their future, never stop learning, and give back.

How popular is Adobe Experience Manager? ›

Adobe Experience Manager is used by 0.1% of all the websites.
...
Usage statistics and market share of Adobe Experience Manager.
Adobe Systems1.1%
W3Techs.com, 28 February 2023
Percentage of websites using Adobe Experience Manager
1 more row

Is Adobe AEM good? ›

AEM provides a nicely managed structure that can really help you to scale your marketing efforts. With this tool, you can manage multiple sites at once and you can also actually increase the traffic on your website if Adobe Experience Manager is used properly.

What is workflow in AEM? ›

AEM Workflows allows you to automate a series of steps that are performed on (one or more) pages and/or assets. For example, when publishing, an editor has to review the content - before a site administrator activates the page.

How many types of authoring tools are available in AEM? ›

AEM provides you with two environments: Author. Publish.

What are AEM template types? ›

Templates are used at various points in AEM: When creating a page you need to select a template; this will be used as the base for the new page. The template defines the structure of the resultant page, any initial content and the components that can be used (design properties).

What is the hardest Adobe software to learn? ›

Adobe Premiere Pro

Premiere Pro is probably one of the most challenging programs to master. A tip from a pro: hit “Command + S” or “Ctrl + S” often to make sure you save your work. If you want to make videography part of your creative career, and are passionate about video editing, Premiere Pro is a must-learn.

Can I teach myself Adobe? ›

Can I teach myself Adobe Illustrator? Yes! You can definitely learn Adobe Illustrator on your own! There are so many self-taught graphic designers today, and they learn from online resources like online tutorials, online courses, and books.

What is the most used Adobe? ›

Adobe Photoshop has been, for some time now, the most widely used raster graphics editor software in the world.

What are the products of Adobe Experience Manager? ›

  • Adobe Experience Manager.
  • Products. Content Management. Asset Management. Digital Forms. Digital Screens. Adobe Learning Manager.
  • Cloud Service. Cloud Service overview. Cloud Acceleration Manager. Developer App Builder.
  • Solutions. Headless CMS. Work anywhere. Connected commerce.
  • What's new.
  • Get started.

Is Adobe AEM SAAS or PaaS? ›

Adobe Experience Manager Forms as a Cloud Service offers a cloud-native, Platform as a Service (PaaS) solution for businesses to create, manage, publish, and update complex digital forms while integrating submitted data with back-end processes, business rules, and saving data in an external data store.

How much does an AEM developer earn in the US? ›

How much does an AEM Developer make in the United States? The average AEM Developer salary in the United States is $67,487 as of February 27, 2023, but the salary range typically falls between $59,801 and $77,008.

What is adobe CQ used for? ›

Adobe CQ is the foundation of the Adobe Experience Manager solution. It provides digital marketers with web-based applications for creating, managing, and delivering personalized online experiences.

What is cq component? ›

cq:component is the primary type of a node that you want to act as a component. If you dont declare a node as cq:component then basically its not a component and you cannot reuse it in any other of the page. You can think jcr:primary types as the data types used in java or any other programming language.

What is CQ in Adobe CQ5 CMS? ›

CQ5 is a version of Day CQ portfolio developed by a Swiss-based software company Day Software in 2008, following Day CQ 3.5, 4.0, 4.1 and 4.2. Adobe Systems renamed Day CQ5 as Adobe CQ5 after acquiring Day Software in 2010.

Is AEM a good career? ›

Is AEM developer a good career choice? A career as an AEM developer is not only a good idea but also very rewarding and lucrative because of the growing demand and need for AEM developers in a company. You will even get a high salary and job security in this field.

Is AEM front end or back end? ›

frontend Module. The AEM Project Archetype includes an optional dedicated front-end build mechanism based on Webpack with the following features. All JS and CSS files can now be added to each component. No .

What are the core components in AEM? ›

Core Content
  • AEM Forms Container.
  • Accordion.
  • Button.
  • Carousel.
  • Container.
  • Content Fragment.
  • Content Fragment List.
  • Core Form Container.

What is AEM components? ›

AEM components are used to hold, format, and render the content made available on your webpages. When authoring pages, the components allow the authors to edit and configure the content. When constructing a Commerce site the components can, for example, collect and render information from the catalog.

How do you write sling models in AEM? ›

Sling Models

Open the file HelloWorldModel. java , which is the Sling Model used with the HelloWorld component. Update the @Model annotation to use a DefaultInjectionStrategy : @Model(adaptables = Resource.

How do I start learning AEM? ›

Basic AEM Developer
  1. Create a Template.
  2. Create a component in classic ui.
  3. Create a component in touch ui.
  4. Switch between Classic ui and Touch ui.
  5. Convert Classic ui dialog to Touch ui Dialog.
  6. Create a Dialog.
  7. Create a Design Dialog.
  8. Create a Page in AEM.
Nov 29, 2016

What are cq listeners? ›

The cq:listeners node (node type cq:EditListenersConfig) defines what happens before or after an action on the component. So you must have been seen many values corresponding to actions (i.e., afterinsert, afterdelete, aftermove,afteredit) of a component. The following table defines its possible properties: Properties.

What is a CQ page? ›

cq:page is a nodetype of a page (root node of a page). cq:pagecontent is a nodetype of the node jcr:content of a template where all the content/properties of a template is stored.

Videos

1. AEM What is Adobe Experience Manager AEM CMS
(Content Management Systems Learning AEM and others)
2. Setting Up CQ Adobe Experience Manager
(Westcon DCOM)
3. Intro to Adobe Experience Manager
(ExpandTheRoom)
4. Adobe Experience Manager A to Z
(Brain Station 23)
5. Using packages in Adobe Experience Manager
(CQ Cram)
6. Understanding Adobe Experience Manager (AEM) Dispatcher
(Learn with Satish Choudhary)

References

Top Articles
Latest Posts
Article information

Author: Jeremiah Abshire

Last Updated: 06/25/2023

Views: 6394

Rating: 4.3 / 5 (54 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Jeremiah Abshire

Birthday: 1993-09-14

Address: Apt. 425 92748 Jannie Centers, Port Nikitaville, VT 82110

Phone: +8096210939894

Job: Lead Healthcare Manager

Hobby: Watching movies, Watching movies, Knapping, LARPing, Coffee roasting, Lacemaking, Gaming

Introduction: My name is Jeremiah Abshire, I am a outstanding, kind, clever, hilarious, curious, hilarious, outstanding person who loves writing and wants to share my knowledge and understanding with you.