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) - partials for AngularJS

When developing Single page app in aem, You would have to include partials inside the master page and at the same time you would want that to be author-able  on its own. So You can use the concept of partials as follows:

Create a main page component which would be serving as a master page and for angular partial includes , You can create another content page component and keep 2  html or jsp pages one with same name and other as partial.html. In the contentpage.html keep all the libraries as per the main master page. But in case of partial.html, you can only keep only one parasys component.

<div class="page__par" data-sly-resource="par"></div>

no other other libabry include will be there as in contentpage.html.

So in the angularjs code you can use that partial.html as follows:

.when('/routename', {
templateUrl: function (urlattr) {
return '/content/projectname/locale/siteadminpagename.partial.html';
}
})

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) - re-init editable overlay layer for touch ui

In case single page apps with aem on touch ui , When we insert partials (aem page) in paren aem page,  page does not become editable, So we have to intiate the edit layers mannualy.

if (typeof parent.window.Granite != "undefined" && typeof parent.window.Granite.author != "undefined" && typeof parent.window.Granite.author.overlayManager != "undefined") {
parent.window.Granite.author.overlayManager.destroy(parent.window.Granite.author.ContentFrame.loadEditables());
if (!parent.$(".js-editor-GlobalBar-previewTrigger").hasClass("is-selected")) {
parent.$(".js-editor-GlobalBar-previewTrigger").trigger("click");
parent.$(".js-editor-GlobalBar-layerCurrent").trigger("click");
}
}

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

AEM (cq5) - reading cookie in sightly with granite server side javascript use api

var cookies_collection = request.getCookies();

if (cookies_collection != null) {
 for (index in cookies_collection) {
   if (cookies_collection[index].getName().equals("cookie_Name")) {
               //concat with string to typecast from object , so as we can return as string
cookie_val = cookies_collection[index].getValue()+"";
   }
 }
}

Read More

include same widget for dialogfieldset and panel for reuse in aem component dialog

For a component having multiple widgets with same structure but different name and save locations :

To use the same cq:WidgetCollection for them , You need to use xtype : cqinclude for that and add a property with name path and value  as a "infinity.json" path to the common widget like :

/apps/........./widgetname/items.infinity.json

For each item in common widget create a listeners node  with primary type as "nt:unstructured".

In the listeners node add the following properties :

added : function(object,container,index){for(item in object.items.items){object.items.items[item].name=object.items.items[item].name.replace("widget name",container.name)}}

beforeadd: function(object,container,index){object.initialConfig.name =  object.initialConfig.name.replace("widgetname",object.ownerCt.name);object.name =  object.name.replace("widgetname",object.ownerCt.name);object.optionsConfig.name =  object.optionsConfig.name.replace("widgetname",object.ownerCt.name);

}

You would be able to use same widget at multiple places like a include file without installing any extra plugin.

Read More

How to add listener to refresh angular code of component on dialog save in AEM CQ5

To refresh/ re - compile the angular code on dialog save button pressed, You should add "cq:editConfig" node under the component. Under this node create a node with name "cq:listeners"  with primary type as "cq:EditListenersConfig".

On this listener node add a property "afteredit" with following value :

function(path, definition) {
var s=window;var frameObj = document.getElementById('ContentFrame');
if(typeof frameObj !== "undefined" && frameObj !== null){
s = frameObj.contentWindow;
}else{path.refreshSelf();};
var el = this.dom;
if(typeof el === "undefined" || el === null){el = this.el.dom};  s.angular.element(s.document.body).injector().invoke(function($compile) { var scope = s.angular.element(el).scope(); $compile(el)(scope);});
}

Read More