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-use.checkRunmode="${'check-runmode.js' @ runmode='author'}">

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

    ${checkRunmode.runmodes}

</div>

<div data-sly-use.checkRunmode="${'check-runmode.js' @ runmode='publish'}">

    <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

<ul data-sly-use.multiFieldJsonHelper="${'MultiFieldJsonHelper' @resPath=resource.path,prop='products'}">

   <sly data-sly-list.product="${multiFieldJsonHelper.values}">
<li class="${product['cssClass']} col-lg-6 col-xs-6">
<img src="${product['productImagePath']}" alt="${product['productImgAltText'] @ i18n}" />
</li>
<sly>
</ul>

How To iterate over map in HTL(sightly) Component

Sample Code Snippet

HTL(Sightly) Component Snippet

<div data-sly-use.mapIterator="MapIterator">
 <!--/*  Get value of  key */-->
<div> Value of Key - 'key1' - ${mapIterator.mapItems['key1']}</div
<!--/*  Iterate over map */-->
<ul data-sly-list=${mapIterator.mapItems}>
<li>${item} - ${mapIterator.mapItems[item]}</li>
  </ul>
  <!--/*Iterate over key set*/ -->
    <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"); <!-- return array of editables -->

var cmp = cmpEditables[0];<!-- get you component editable -->

cmp.refresh(); <!-- refresh you component--->


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

<rtePlugins jcr:primaryType="nt:unstructured">

        <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="*">

            <formats jcr:primaryType="cq:WidgetCollection">

                <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"/>

                <i

                    jcr:primaryType="nt:unstructured"

                    description="I (ai)"

                    tag="i"/>

            </formats>

        </paraformat>

        <styles

            jcr:primaryType="nt:unstructured"

            features="*">

            <styles jcr:primaryType="cq:WidgetCollection">

                <fa-map-marker

                    jcr:primaryType="nt:unstructured"

                    cssName="fa fa-map-marker"

                    text="Font Awesome Map Marker"/>

            </styles>

        </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>

    <uiSettings jcr:primaryType="nt:unstructured">

        <cui jcr:primaryType="nt:unstructured">

            <inline

                jcr:primaryType="nt:unstructured"

                toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#paraformat,#styles,-,misctools#sourceedit,-,fullscreen#start,-,control#close,control#save]">

                <popovers 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]">

                <popovers 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>

            </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">

                    <rtePlugins jcr:primaryType="nt:unstructured">

                        <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="*">

                            <formats jcr:primaryType="cq:WidgetCollection">

                                <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"/>

                                <i

                                    jcr:primaryType="nt:unstructured"

                                    description="I (ai)"

                                    tag="i"/>

                            </formats>

                        </paraformat>

                        <styles

                            jcr:primaryType="nt:unstructured"

                            features="*">

                            <styles jcr:primaryType="cq:WidgetCollection">

                                <fa-map-marker

                                    jcr:primaryType="nt:unstructured"

                                    cssName="fa fa-map-marker"

                                    text="Font Awesome Map Marker"/>

                            </styles>

                        </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>

                    <uiSettings jcr:primaryType="nt:unstructured">

                        <cui jcr:primaryType="nt:unstructured">

                            <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]">

                                <popovers 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]"/>

                        </cui>

                    </uiSettings>

                </rte-in-dialog>