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>