Adobe CQ5/AEM (Adobe Experience Manager ): 2017

How to check AEM server runmode in Sightly/HTL Using server-side JavaScript

How to check AEM server runmode in Sightly/HTL Using Server-side JavaScript

Server-side JavaScript

"use strict";

use(function () {

var myRunmode = this.runmode;

var isValidRunmode = false;

var slingSettingsService = sling.getService(Packages.org.apache.sling.settings.SlingSettingsService);

var runModes = slingSettingsService.getRunModes().toString();

if (runModes && myRunmode) {

isValidRunmode = (runModes.indexOf(myRunmode) >= 0);

}

return {

hasRunmode : isValidRunmode,

runmodes:runModes

};

});

HTL / Sightly

<div data-sly-test="${checkRunmode.hasRunmode}">Author runmode</div>

${checkRunmode.runmodes}

</div>

<div data-sly-test="${checkRunmode.hasRunmode}">Publish runmode</div>

</div>

How to read custom Touch UI multifiled values in Sightly

Global java implementation for sightly to read TOUCH UI custom multifield values which are stored in Json format

Sample storage of Custom multifield values in repository

{

jcr:primaryType: "nt:unstructured",

products: ["{"productImagePath":"path1","productImgAltText":"altText","cssClass":"test-class"}",

"{"productImagePath":"productImagePath2","productAltText":"","altText2":"test-class2"}"],

jcr:createdBy: "admin",

jcr:lastModifiedBy: "admin",

jcr:created: "Mon Feb 20 2017 20:36:27 GMT+0530",

jcr:lastModified: "Thu Mar 02 2017 18:02:01 GMT+0530",

sling:resourceType: "<component-path>"

}

Crete a class multiFieldJsonHelper

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.adobe.cq.sightly.WCMUsePojo;
public class MultiFieldJsonHelper extends WCMUsePojo {
private String[] json;
private static final Logger LOG = LoggerFactory.getLogger(MultiFieldJsonHelper.class);
@Override
public void activate() throws Exception {
String resPath = get("resPath", String.class);
String prop = get("prop", String.class);
if (resPath != null && prop != null) {
Resource res = getResourceResolver().getResource(resPath);
ValueMap vm = res.getValueMap();
json = vm.get(prop, String[].class);
}
}
public List<Map<String, String>> getValues() {
List<Map<String, String>> results = new ArrayList<Map<String, String>>();
if (json != null) {
for (String value : json) {
Map<String, String> column = parseItem(value);
if (column != null) {
results.add(column);
}
}
}
return results;
}
private Map<String, String> parseItem(String value) {
Map<String, String> columnMap = new HashMap<String, String>();
JSONObject parsed;
try {
parsed = new JSONObject(value);
for (Iterator<String> iter = parsed.keys(); iter.hasNext();) {
String key = iter.next();
String innerValue = parsed.getString(key);
columnMap.put(key, innerValue);
}
return columnMap;
} catch (JSONException e) {
LOG.info("JSONException occured {}", e.getMessage());
}
return null;
}
}

Reading in HTL (Sighlty) Component

How To iterate over map in HTL(sightly) Component

Sample Code Snippet

HTL(Sightly) Component Snippet

<div data-sly-use.mapIterator="MapIterator">

<div> Value of Key - 'key1' - ${mapIterator.mapItems['key1']}</div

<ul data-sly-list=${mapIterator.mapItems}>
<li>${item} - ${mapIterator.mapItems[item]}</li>
</ul>

<ul data-sly-list.key=${mapIterator.mapItems.keySet}>
<li>${key}</li>
</ul>
</div>

Java Snippet

import com.adobe.cq.sightly.WCMUsePojo;

import java.util.Map;

import java.util.HashMap;

public class MapIterator extends WCMUsePojo{

Map<String, String> mapItems = new HashMap<String, String>();

@Override

public void activate()throws Exception{

mapItems.put("key1","value1");

mapItems.put("key2","value2");

mapItems.put("key3","value3");

mapItems.put("key4","value4");

}

public Map<String,String> getMapItems(){

return mapItems;

}

How to create JSON file in AEM/Adobe CQ5 Repository

Sample Java code Snippet

Resource metadataOptionJson = ResourceUtil.getOrCreateResource(
resolver,
parentPath+ "/sample.json",
Collections.singletonMap("jcr:primaryType",(Object) "nt:file"),
null, false);
Resource metadataOptionJsonJcrContent = ResourceUtil.getOrCreateResource(
resolver,
metadataOptionJson.getPath() + "/jcr:content",
Collections.singletonMap("jcr:primaryType",(Object) "nt:resource"),
null, false);

final ModifiableValueMap metadataOptionJsonProprties = metadataOptionJsonJcrContent.adaptTo(ModifiableValueMap.class);
if (metadataOptionJsonProprties.get("jcr:data") != null) {
// Remove the property first in case Types differ
metadataOptionJsonProprties.remove("jcr:data");
}

metadataOptionJsonProprties.put("jcr:mimeType", "application/json");
metadataOptionJsonProprties.put("jcr:encoding", "utf-8");
final ByteArrayInputStream bais = new ByteArrayInputStream(yourjsonString.getBytes(StandardCharsets.UTF_8));
metadataOptionJsonProprties.put("jcr:data", bais);
LOG.debug(String.format("%s : %s", "Options Json ", metadataOptionJson.getPath()));
resolver.commit();

How to open component dialog through Javascript in Touch UI AEM/Adobe CQ5

1) You need to get the editable of the component which you want to open dialog

var cmpEditables = Granite.author.store.find("<component content node path");

var cmp = cmpEditables[0];

2)Pass the editable to the execute method

Granite.author.EditorFrame.editableToolbar.config.actions.CONFIGURE.execute(cmp);

How to refresh component through Javascript in Touch UI AEM/Adobe CQ5

How to refresh component through Javascript in Touch UI

All the editable will store at Granite.author.store

You can find editables for you component by using find method

var cmpEditables = Granite.author.store.find("<component content node path"); 

var cmp = cmpEditables[0];

cmp.refresh(); 

Or to refresh you can also use

Granite.author.editableHelper.doRefresh(cmp)

How to add rtePlugins for Touch UI Rich Text in Dialog / Inplace Edit In AEM 6.2

Rich Text rtePlugins configurations for the inplace edit

<format

jcr:primaryType="nt:unstructured"

features="*"/>

<justify

jcr:primaryType="nt:unstructured"

features="*"/>

<lists

jcr:primaryType="nt:unstructured"

features="*"/>

<links

jcr:primaryType="nt:unstructured"

features="*"/>

<subsuperscript

jcr:primaryType="nt:unstructured"

features="*"/>

<paraformat

jcr:primaryType="nt:unstructured"

features="*">

<paragraph

jcr:primaryType="cq:WidgetCollection"

description="Paragraph"

tag="p"/>

<heading1

jcr:primaryType="cq:WidgetCollection"

description="Heading 1"

tag="h1"/>

<heading2

jcr:primaryType="cq:WidgetCollection"

description="Heading 2"

tag="h2"/>

<heading3

jcr:primaryType="cq:WidgetCollection"

description="Heading 3"

tag="h3"/>

<heading4

jcr:primaryType="cq:WidgetCollection"

description="Heading 4"

tag="h4"/>

<strong

jcr:primaryType="nt:unstructured"

description="Strong"

tag="strong"/>

<em

jcr:primaryType="nt:unstructured"

description="Em"

tag="em"/>

jcr:primaryType="nt:unstructured"

description="I (ai)"

tag="i"/>

</formats>

</paraformat>

<styles

jcr:primaryType="nt:unstructured"

features="*">

<fa-map-marker

jcr:primaryType="nt:unstructured"

cssName="fa fa-map-marker"

text="Font Awesome Map Marker"/>

</styles>

<edit

jcr:primaryType="nt:unstructured"

features="*"/>

<findreplace

jcr:primaryType="nt:unstructured"

features="*"/>

<undo

jcr:primaryType="nt:unstructured"

features="*"/>

<spellcheck

jcr:primaryType="nt:unstructured"

features="*"/>

<table

jcr:primaryType="nt:unstructured"

features="*"/>

<fullscreen

jcr:primaryType="nt:unstructured"

features="*"/>

<misctools

jcr:primaryType="nt:unstructured"

features="*"/>

</rtePlugins>

<inline

jcr:primaryType="nt:unstructured"

<format

jcr:primaryType="nt:unstructured"

items="[format#bold,format#italic,format#underline]"

ref="format"/>

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

<styles

jcr:primaryType="nt:unstructured"

items="styles:getStyles:styles-pulldown"

ref="styles"/>

</popovers>

</inline>

<tableEditOptions

jcr:primaryType="nt:unstructured"

toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-, table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow, table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing]"/>

<fullscreen

jcr:primaryType="nt:unstructured"

toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#styles,#paraformat,-,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-default,edit#paste-wordhtml,-,undo#undo,undo#redo,-,findreplace#find,findreplace#replace,-,spellcheck#checktext,-,misctools#sourceedit,-,table#createoredit,-,fullscreen#start,-,control#close,control#save]">

<format

jcr:primaryType="nt:unstructured"

items="[format#bold,format#italic,format#underline]"

ref="format"/>

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

<styles

jcr:primaryType="nt:unstructured"

items="styles:getStyles:styles-pulldown"

ref="styles"/>

</popovers>

</fullscreen>

</cui>

</uiSettings>

Rich Text rtePlugins configurations for the dialog

<rte-in-dialog

jcr:primaryType="nt:unstructured"

sling:resourceType="cq/gui/components/authoring/dialog/richtext"

fieldLabel="Footer right"

name="./footerRight"

useFixedInlineToolbar="{Boolean}true">

<format

jcr:primaryType="nt:unstructured"

features="*"/>

<justify

jcr:primaryType="nt:unstructured"

features="*"/>

<lists

jcr:primaryType="nt:unstructured"

features="*"/>

<links

jcr:primaryType="nt:unstructured"

features="*"/>

<subsuperscript

jcr:primaryType="nt:unstructured"

features="*"/>

<paraformat

jcr:primaryType="nt:unstructured"

features="*">

<paragraph

jcr:primaryType="cq:WidgetCollection"

description="Paragraph"

tag="p"/>

<heading1

jcr:primaryType="cq:WidgetCollection"

description="Heading 1"

tag="h1"/>

<heading2

jcr:primaryType="cq:WidgetCollection"

description="Heading 2"

tag="h2"/>

<heading3

jcr:primaryType="cq:WidgetCollection"

description="Heading 3"

tag="h3"/>

<heading4

jcr:primaryType="cq:WidgetCollection"

description="Heading 4"

tag="h4"/>

<strong

jcr:primaryType="nt:unstructured"

description="Strong"

tag="strong"/>

<em

jcr:primaryType="nt:unstructured"

description="Em"

tag="em"/>

jcr:primaryType="nt:unstructured"

description="I (ai)"

tag="i"/>

</formats>

</paraformat>

<styles

jcr:primaryType="nt:unstructured"

features="*">

<fa-map-marker

jcr:primaryType="nt:unstructured"

cssName="fa fa-map-marker"

text="Font Awesome Map Marker"/>

</styles>

<edit

jcr:primaryType="nt:unstructured"

features="*"/>

<findreplace

jcr:primaryType="nt:unstructured"

features="*"/>

<undo

jcr:primaryType="nt:unstructured"

features="*"/>

<spellcheck

jcr:primaryType="nt:unstructured"

features="*"/>

<table

jcr:primaryType="nt:unstructured"

features="*"/>

<misctools

jcr:primaryType="nt:unstructured"

features="*"/>

</rtePlugins>

<inline

jcr:primaryType="nt:unstructured"

toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#paraformat,#styles,-,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-default,edit#paste-wordhtml,-,undo#undo,undo#redo,-,findreplace#find,findreplace#replace,-,spellcheck#checktext,-,misctools#sourceedit,-,table#createoredit]">

<format

jcr:primaryType="nt:unstructured"

items="[format#bold,format#italic,format#underline]"

ref="format"/>

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

<styles

jcr:primaryType="nt:unstructured"

items="styles:getStyles:styles-pulldown"

ref="styles"/>

</popovers>

</inline>

<tableEditOptions

jcr:primaryType="nt:unstructured"

</cui>

</uiSettings>

</rte-in-dialog>