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.