AEM (CQ5) - placeholder text for component using use api

There is no property in AEM for text components to show placeholder (watermark) or default text for un authored empty component on page.

I will give a work around with which you achieve the above and can get and set request parameters for other use also.

There is global request object available in sightly or server side javascript, So we are going to use that as a medium to pass information.

We can create 2 files one to set the parameters and one to return or get the parameters in your common utility location as follows:

setAttributes.js :

use(function () {
    var key;
    for (key in this) {
        request.setAttribute(key, this[key]);
    }
});

getAttributes.js :

use(function () {
    var o = {}, c, l, name;
    for (c = 0, l = this.names.length; c < l; c += 1) {
        name = this.names[c];
        o[name] = request.getAttribute(name);
    }
    return o;
});

So above is code to set the key pairs in request object and to get them back from request object with help of server side javascript.

We can use above code  as use api in any sightly component include as follows:

<div data-sly-use="${'../utils/setAttributes.js' @ placeholder = 1, nextvar = 2}"
     data-sly-resource="path to component"></div>

So above code will save passed variables in request object which is globally available.

So in the components code (html in case of sightly), we can use use-api  to get back those parameters. If you knows the name of parameter you can simply read it by following line

request.getAttribute("placeholder");

Then you can check if there is nothing saved in dialog of component, we can simply print that value as placeholder or watermark text.

Read More

AEM (cq5) - 404 / error handler page

To add custom 404 page in aem, Follow following steps :

Go to Apps > Sling > Servlet > errorhandler >  404.html

By default In errorhandler node 404.html and Responsestatus.java files are present. So when ever a page does not exist this 404 page is served to the end user (browser).

You can simply modify 404.html page and can point to 404 component from your apps folder as follows:

<sly data-sly-resource="${'404' @resourceType='/apps/projectname/components/404'}" data-sly-unwrap/>

Sling 404 / errorhandler page

Read More

AEM (CQ5) - reading JSON file in sightly with granite use api

Reading json file from i18 folder  and return from server side javascript and use as "use api" in sightly :

"use strict";
use([], function () {
  var resourceResolver = resource.getResourceResolver();
  var resourceContent = resourceResolver.getResource(file path in project + ".json/jcr:content");
  var jsonText = "";
  if (resourceContent != null) {
    var WCMUtils = Packages.com.day.cq.wcm.commons.WCMUtils;
    var stringWriter = java.io.StringWriter;
    var rd = new java.io.BufferedReader(new java.io.InputStreamReader(resourceContent.properties["jcr:data"], java.nio.charset.Charset.forName("UTF-8")));
    var sb = new java.lang.StringBuilder();
    var cp;
    while ((cp = rd.read()) != -1) {
      sb.append(java.lang.Character(cp));
    }
    jsonText = sb.toString();
  }
  if (jsonText == "") {
    jsonText = "{}";
  }
return {
  items : JSON.parse(jsonText);
  json : jsonText;
};
});

Read More