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
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
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
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
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.
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.
- 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.
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? ›- Create a Template.
- Create a component in classic ui.
- Create a component in touch ui.
- Switch between Classic ui and Touch ui.
- Convert Classic ui dialog to Touch ui Dialog.
- Create a Dialog.
- Create a Design Dialog.
- Create a Page in AEM.
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 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? ›...
Usage statistics and market share of Adobe Experience Manager.
Adobe Systems | 1.1% |
---|---|
W3Techs.com, 28 February 2023 | |
Percentage of websites using Adobe Experience Manager |
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 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.
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? ›- AEM Forms Container.
- Accordion.
- Button.
- Carousel.
- Container.
- Content Fragment.
- Content Fragment List.
- Core Form Container.
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.
- Create a Template.
- Create a component in classic ui.
- Create a component in touch ui.
- Switch between Classic ui and Touch ui.
- Convert Classic ui dialog to Touch ui Dialog.
- Create a Dialog.
- Create a Design Dialog.
- Create a Page in AEM.
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.