Skip to main content

Handle bar & AEM server side integration

In AEM 6.0 version, as part of social communities’ project AEM implemented a handlebar script files in place of JSP scripts.  As part of this project AEM SCF community implemented a handle bar engine which in turn uses handlebars.java(jknack) library to compile and execute handlebar templates.
Example:
Let’s say I have a component called helloworld and the path of component  is /apps/mysite/components/content/helloworld.
Below three steps we need to do to implement header component.

1.      Register a HBS component
To register HBS component we need to implement SocialComponentFactory interface and then we need to override methods. In “getSupportedResourceType” method we need to return component path to register it to handlebar engine.  Once we register a component json response will automatically available to handlebar script file.

Example:





















The key aspect is to override getSocialComponent method(Resource).

2.      Create a POJO class and extend the BaseSocialComponent class.

POJO class represents the json response that needs to be sent. We can define custom json attributes that are needed in handlebar script file.

Example:


3.      Handlebar script file:
Handlebar script needs to written in .hbs file.
Json response that is returned from step2 will be automatically available to hbs file as a context object.
 Logo {{logoUrl}}
Application Url {{appUrl}}

 Please refer following documentation to get more insight in the subject.
http://aem-docs.tostring.me/?d=/docs/ko/aem/6-1/develop/communities/scf/server-customize.html

 Please leave any comments or feed back ,if you have any question or run into any issues.
Labels:

Comments

Post a Comment

Popular posts from this blog

How to remove hardcoding .html from pathfield in AEM/CQ

In our project we have a pathfield in quite a lot of dialog for various custom components which refers/links to pages. After getting the value of this pathfield in the sightly template we were  adding the html extension manually on it. e.g.                 <a class="navbar-brand" href="${properties.homepagePath @ context='unsafe'}">${properties.headerAuthTitle}</a> We can avoid hardcoding the path by adding property in dialog link  linkPattern The  pathfield  xtype has a config option called  linkpattern . This allows you to configure the widget to automatically add an extension  in case the browsefield is used  to select the link. If a user types the text , the extension is not added. Use this option to add '.html' and all internal links will have .html appended (assuming the content authors always use the pathfield's browse option to select the link [which they should be doing ] ). This wa...
1 comment
Read more

Proxy Design Pattern

We use this Pattern when we require don't want to give a direct access to object under some scenario and rather offer a surrogate object  or proxy object which  provides the functionality in place of the real object. There could be several scenario where we would want this kind of functionality. The  real object  has some sensitive operation which would be risky to expose. The real object creation is memory extensive so we want to control the behavior of its creation. The real object is remotely located and rather we want to interact through a local copy using proxy which is actually   aware of it location. So lets look at the UML diagram of the same. So here we have Subject interface which is implemented by both the Proxy and RealObject  and proxy object has  reference to the real object , now the client will  instantiate Proxy object to perform some action and , proxy object will delegate the call to RealSubject to perform the ...
Post a Comment
Read more