Posts

Magical Marketing Mechanism

Custom Xtype For Pathfield BrowseDialog

Sometimes the xtypes provided by AEM doesn’t fulfill our requirements. So we need to design our custom xtypes on regular basis.

Problem

While working with xtype pathfield, I stumbled upon a use case/problem. I wanted a pathfield so that  I can choose the product under /etc/commerce/products/accunity/en_us/products hierarchy by a productName property.

Note: Generally, pathfield can show the nodes by its name or jcr:title.

Steps I followed:

  1. I created a widget of xtype:pathfield
  2. If I opened my  dialog, I could select any values under /content.
  3. So needed to set rootPath in the widget.
    rootPath:/etc/commerce/products/accunity/en_us/products
  4. The nodes under products are of type nt:unstructured. By default, pathfield doesn’t allow this types of nodes in the tree hierarchy.
  5. So added a property predicate: nosystem

 

Now the pathfield looked like this:

But still, it is a very tedious task for the author to select a particular product. I wanted pathfield to show the productName in place of node-name. So I decided to write custom xtype.

But how?

The first question here is how this tree structure shows up here:

So while debugging my dialog, I found, it calls currentPath.ext.json and shows the “name”property of  JSON in the tree hierarchy. 

So next step for me was to change this servlet.

The Next Question was from where this servlet is getting called.

The answer is browserDialog widget. Inside pathfield widget, it is calling browserDialog to show this tree structure.

Note: Go to browseDialog.js

Change this part:

Here is the updated browseDialog.js

We can’t make this change in the /libs section. So, I made my own xtype as productPathfield and add a custom browseDialog in pathfield.js with this modification.

Note: xtype pathfield doesn’t fulfill my requirements so needed to change it with productPathfield.

After all the changes, we can see our desired results here:

Please leave your precious comments of what you think about this approach. Happy to learn better solution for the same problem.

The Performance Guidepost

Imagine on a bright sunny day you open up your analytics dashboard and you notice the visitors graph going high and high and high and suddenly drops all of a sudden.

You will be wondering what is happening, only to find that your colleague had started a nice promotion and due to the promotion the website load increased multifold.

But what happened all of a sudden? Why the drop in visits? Ah… the promotion became too popular as it had gone viral in the social network and print media. And due to the heavy demand more number of users visited and the site could not take up the anticipated load and crashed.

A poor show, in spite the excellent job by marketing team.

What could have been done to avoid such situation and do not let the customer suffer and the drop in sales and site visitors?

Performance testing is the answer on anticipated site load.

What is Performance Testing?

Triple “S” check is a must for the public facing websites.

  • Speed – Determines whether the application responds quickly.
  • Scalability – Determines maximum user load the software application can handle.
  • Stability – Determines if the application is stable under varying loads.

And all three can be measured using performance testing.

Performance testing is the investigation done either to determine or to prove the response time, scalability and performance of the website to ensure that they will perform well under their expected regular workload, at peak load and uncover inconsistencies across different operating systems/devices.

The goal of performance testing is not to find bugs but to eliminate performance bottlenecks and tune the system for maximum load. This is also to determine the maximum threshold the website can take.

Common Performance Problems

  • Poor Response Time: Once the user performs an action and user has to wait for so long before the response is provided. This can lead to poor user experience.
  • Poor Load Distribution: Poor load distribution can cause slow response time by incorrectly assigning new site visitors to hanged up servers. If too many people are on the same server, they’re going to experience difficulties, even if the overall system is well under capacity. Check the sites of some of the big players and you will notice the site loads in a flash of moments.

Types of Performance Testing

  • Load Test: Generally a load test is conducted to understand the behaviour of a system under the specific expected load. It helps to identify the maximum operating capacity of an application as well as any bottlenecks and determine which element is causing degradation. E.g. If the number of users are increased then how much CPU, memory will be consumed, what is the network and bandwidth response time.

It also helps in measuring the response time, throughput rates, and resource-utilization levels, and to identify the breaking point, and the peak load the website can handle.

This can answer questions like, what is the maximum number of users that can use the system without any impact on performance and acceptable response time.

  • Stress Test: Stress testing refers to the testing of website to determine whether its performance is satisfactory under any extreme and unfavourable conditions, which may occur as a result of heavy network traffic, process loading and maximum requests for resource utilization. Stress testing enables to identify how the website behaves under extreme load conditions.

This will answer questions like, what is the maximum peak load the system can handle and determine if the system will perform sufficiently if the current load goes well above the expected maximum limits.

  • Soak / Endurance Test: This is usually done to determine if the system can sustain the continuous expected load, this helps in detecting potential memory leaks and utilization. Also to check the performance degradation when the system is being used for long duration.

This can answer questions like, if the promotion becomes very popular and the load of system is way beyond for a very long duration, can the system handle such situations?

  • Spike Test – Spike testing is a subset of stress testing.  A spike test is a type of performance test focused on determining reaction to a sudden large spikes in the load generated by users.

This can answer questions like, if the competitor, runs a promotion and we are unaware of it, due to such situations users visiting the site for similar promotions on our site, there could be sudden spike of users and if the system can handle such situations.

Tools

Lot of performance testing tools are available for different types of tests and it is quite difficult to cover all types of test using one.

Jmeter is one of the renowned open source tool designed to load test functional behaviour and measure performance.

Lets explore more about Jmeter and its functioning in the upcoming blog.

Conclusion

Performance Testing is a must before the website goes to market, as poor performance and inconsistent behaviour of the site may lead to inadequate reputation, poor user experience and will not meet the sales goals.

Hence its concluded that it’s a must to perform performance testing at initial stage of building website and regularly in different intervals. Analytics can help monitor the peak loads and help plan for performance testing. This can go a long way building customer trust, relation and not only retain but expand customer base. Lets read about that too in another upcoming blog.

Sling Models with Sightly Part – V (Key Annotations – III)

In this post, I will answer some of the queries asked by my blog readers. This blog will also help you in getting knowledge of How you access cq:defined Object in Sling Model classes?
Before answering these question, I want to make sure that you guys are using latest Sling Model dependency and AEM version 6.x. So let’s start-

Q1. How will I get properties object in Sling Model Class?
I think there is no need to get this properties object as you can directly inject the resource properties ( already described in my previous blog) but if you still want to do that then, you have to make two changes.

First use adaptable as SlingHttpServletRequest.class as shown below-

Then you can directly inject properties as shown below-

Q2. During the build time, I am getting a Maven build error as shown below-

How to resolve this issue?
For resolving this issue,  you need to add one more maven dependency into your project the dependency name is
cqcommens and it’s Maven dependency is-

Q3. How will I get inherited page properties object in Sling Model class?
For getting this object in your Sling Model class, you need to inject a field as shown below-

With SlingHttpServletRequest.class as an adaptable value.

Q4. Can I use Resouce.class as well as slingHttpServletRequest.class as adaptable in the same class?
Yes, you can do that. Here is the syntax-

Q5. How will I get page object in Sling Model class?
For getting this object in your Sling Model class, you need to inject a field as shown below-

With SlingHttpServletRequest.class as an adaptable value.

Q6. Do you have any working Sling model class example that implements all these properties?
Yes, here it is-

Q7. How am I testing these annotations in Sling Model class?
I have created a dummy component and that component calls these Sling Model classes. Sightly code snippet is-

Happy Coding..!!

Ankur Chauhan
Tech Lead

Sling Models with Sightly Part – III (Key Annotations – I)

The title of this blog is “Key Annotations – I” because In this post, I will explain two important annotations related to Sling Models and continue explaining other annotations in my coming posts. So for explaining two annotations, I have selected following two questions for this post.

1). How to include OSGI Services in Sling Model?
2). What is the use of @ResoucePath annotation?

I am assuming that you are using the latest versions of Sling Model APIs that I described in my previous blog.
For Answering first question, I have created an OSGi Service that have a dummy method as follows-

Now, You can include OSGi Services in your Sling Models using two annotations, these are-

1. @OSGiService Annotations
2. @Inject Annotation

Here is the Sling Model class, that shows how to use these annotations?

When you call this Model class then you will see that both of these two annotations working in the same manner.

Q1. What is the use of @ResoucePath annotations?
@ResoucePath annotation is a very handy annotation provide by Sling and using this annotation, you can convert a path into its resource object without writing any code. Let’s suppose you have a predefined path (e.g. /content/geometrixx/en) of the resource and want to convert that path into resource object then you can use @ResourcePath annotation.

Q2. How to use @ResoucePath annotation?
Here the code snippet that shows you the use of this annotation-

Q3. How am I testing these annotations?
I have created a dummy component and that component calls these Sling Model classes. Sightly code snippet is-

For complete working code, I am sharing the Git repository link.
https://bitbucket.org/accunitysoft/accunity-blog-snippets

Happy Coding..!!

Ankur Chauhan
Tech Lead

Sling Model with Sightly Part – I

In this post, I will explain, how to use sling models with Sightly in AEM6.x?

For doing this, I have created a project using maven archetype for AEM6. If you want to use any existing project, then you need to check two things-

1. Dependency for Sling models in your project’s pom.xml file. You can find this maven dependency in you AEM instance package finder tab as shown in fig-

1.1

Now search for this dependency in your Maven project parent pom.xml file. If it’s already there then it’s fine else add this dependency into your project.

2. In whatever java packages, you want to add your Sling Model classes, add these java packages information into your maven-bundle-plugin.
For example, I am using two java package for adding my Sling Model classes, these packages are-
sling.models and com.blog.sling.models, so I have to place these package information into my maven-bundle-plugin, as shown below-

Q1). What will happen, If I don’t add these entries?

If you don’t add these entries, then maven will not add
“Sling-Model-Packages: sling.models, com.blog.sling.models”
header entry in your bundle Manifest file. So that these classes will not behave as sling models and will work as simple java classes and, If you try to run your code without this entry, then you will not get desired output as well as there will be no error message in error.log file.

In this post, I will create a very basic example where I will get a name from the component dialog and print that value using Sling Model. So Let’s start-

Create a Sling model class.

Here I am using @Inject annotation on “firstName” property, it means that this property will be looked up from the resource (after first adapting it to a ValueMap) and it is injected.
@PostConstructor annotation defines that this method will run after injecting all field (having @Inject annotation) from the resource.

Create the component as shown below-

1.2
In slingModel.html file add these lines.

My dialog properties are as shown below: –

dialog Properties

Build your maven project and drop this component on your page. You will see a screen as-
1.3Open the dialog of this component and add any entry (For example “Ankur Chauhan”) you will see the desired output as-
1.5

Q2). Why are we creating Sling Model class for this example even we can directly use ${properties.firstName} in our slingModel.html file?

You are right, We can do that or you can say, we must do that. But as I already mention that, in this post I am going to show you a very basic use of Sling Model. So I think this is the simplest example for this post. You will see must better examples in my coming blogs.

I am also sharing the Git repository link.
Git repository link is –

https://bitbucket.org/accunitysoft/accunity-blog-snippets

Happy Coding..!!

Ankur Chauhan
Tech Lead

Dynamic Options values in AEM dialog dropdown Using $PATH

In this post, I will explain a real project use-case, where I need to populate a Dropdown in my component dialog with dynamic values, but the condition are-

1. These values can only be fetched from the current resource or current page object.
2. Another condition is that this dropdown must be auto-populated when the dialog opened.

For example,  The drop down values can be the list of all parent pages of the page where this component was dropped.

Q1). How will you go for it?
You will think about ajax call because the dropdown can be filled with dynamic values using options property.

Q2). Yes, you are right then, what will you call from the options property?
Sling Servlet

If your answer is Sling Servlet then, I have some questions for you-

Q1). How will you get the current resource  or current page object in that servlet?
Q2). If you  are trying to pass the path of current resource then How will you do that?

OK, I think you are well understood what am I trying to say. How to get current resource or current page object into the called Sling Servlet.

Maybe you can do it using some other approach but in this post I will explain, How I complete this task?

In place of servlet I have created a JSP file under same component node with some selector (For ex. options.json). For Ex. My component structure is-
Component structure

Now, I have set some properties on my drop-down dialog node. These properties are shown in figure-

3

Here you will notice that, I have used $PATH, this will return the path of the component wherever it is dropped. Then I used Sling Script Resolution Principle to call my options.json.jsp file.

For writing this blog, I had created dummy data but in actual, I had created a Sling Service and from one of it’s methods, I was getting the JSON values.

Here, you should follow standard coding practices and should remove these scriptlets from JSP file to some java file. But the key point is that this JSP must return the values in JSON format. If you are using Sightly then same code will work or if you want to use HTML in place of JSP then it will work perfectly fine.

I am also sharing the Git repository link where you can find demo examples for these properties.
Git repository link is –

https://bitbucket.org/accunitysoft/accunity-blog-snippets

Happy Coding..!!

Ankur Chauhan
Tech Lead

 

SLing

Understanding Sling Models in AEM

ResourceResolver Object in AEM6.1/6.0 Sling Services

As we know that getAdministrativeResourceResolver() method has been deprecated from ResourceResolverFactory interface in AEM6 and above versions. Then the question is-

Q1). How to get ResourceResolver object in Sling services in AEM6.0 and above versions?
If you are working with AEM6 or AEM6.1 then you have two options-

  1. If you know the credentials of an User and want that user credential in your service then go with getResourceResolver() method.
  2. If you don’t have user credentials and want to access ResourceResolver object then you have to use
    getServiceResourceResolver() method. as shown below –

    Note : – In this case you have to add a configuration in your Felix Console to your AEM instance.

Q2). What configuration I need to do for AEM6.0?
For AEM6.0,  configuration steps are –

  1. Go to Felix Console configuration tab i.e. http://localhost:4502/system/console/configMgr
  2. Search for User Mapping as shown in figure-
    User Mapping Search
  3. Click on this service to edit it’s configuration.
  4. Here you have to add one entry and the syntax of the entry is –
    “Bundle symbolic Name”:”SubServieName”=”User Name”

    1. “Bundle symbolic Name :-  Here you have to add the bundle symbolic name where you are creating service.
    2. “SubServieName”:- This is the name you provided as a value of  ResourceResolverFactory.SUBSERVICE property i.e. “testService”.
    3. “User Name” :- This  is the user name for ex. “admin”So in my case this configuration field value becomes “com.blog.blog-bundles:testService=admin”
    After adding this entry your configuration looks like-
    second
  5. Now everything is set for AEM6.0.

Q3). will these configurations work for AEM6.1?
No

Q4). What configuration, do I need for AEM6.1?
If you are working with AEM6.1 that you have to complete all steps explained for AEM6.0. To make these configurations  working for AEM6.1, you have to ensure that the “jcr:PrimaryType” of your user is “rep:SystemUser” i.e if you are trying to use “admin” user. Then it will not work as it’s “jcr:PrimaryType” value is  “rep:User”.

Q5). What do you mean by “jcr:PrimaryType” as “rep:SystemUser”?
It means that user is just not a repository user. It must be system user.

Q6). How to create System User in AEM6.0?
For creating System User, follow these steps-

  1. Go to CRX Explorer http://localhost:6502/crx/explorer/index.jsp
  2. Login as Administrator i.e. using “admin:admin”
  3. Click on “User Administration”, you will see a screen just like this –
    4
  4. Here you will see a option of “Create System User”, Click on this button.
  5. Add a value for User Id field for ex. “testUser”
  6. Click on green button.
  7. Close the window.
  8. Go to CRXDE Lite, your “testUser” will be created under /home/system directory. If you are not able to find then search for “testUser” in home screen. You will get the location.

Q7). How to use this user?
In your “Apache Sling Service User Mapper Service” configuration change your entry from –
com.blog.blog-bundles:testService=admin to com.blog.blog-bundles:testService=testUser

Q8). Should I do this configuration at “Apache Sling Service User Mapper Service” configuration or should I create a “Apache Sling Service User Mapper Service Amendment” service configuration?
You can do it by both ways. But as “Apache Sling Service User Mapper Service” is a service factory in AEM6.1 so as best practices you should create another service configuration by clicking on plus button at the front of “Apache Sling Service User Mapper Service Amendment”.
When you click on “+” button, one new configuration will be created at the end. Click on that service and do this configuration there. Your code will work in same manner as working before.

Happy Coding..!!

Ankur Chauhan
Tech Lead.

Secure Apache from Clickjacking

In this post, I will explain an important Apache2 configuration, this configuration is used to stop clickjacking. I got to know about clickjacking when I was working with security checklist in AEM.

Q1. What is clickjacking?
Clickjacking, also known as a “UI redress attack”, is when an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link to another page when they were intending to click on the top level page. Thus, the attacker is “hijacking” clicks meant for their page and routing them to another page, most likely owned by another application, domain, or both. If it is still not clear to you then I am attaching a video URL that will explain it in a much better way.

Q2. How to stop clickjacking in the AEM using Apache2 Server?
There is a header configuration named as X-Frame-Options, using this configuration, you can stop the clickjacking.

Q3. What is the syntax of this configuration?
Header set X-Frame-Options: “sameorigin”

Q4. Where do we find this configuration?
In Apache2.4 you have a security.conf file in conf-available directory. In this file, search for X-Frame-Options, it is already present there but commented by default. Now you have two options.
  1. Uncomment this setting and restart your Apache2 server. 
  2. Copy and paste this setting in apche2.conf file, uncomment it, and restart your Apache server.

In my case, I copied and pasted this setting in apche2.conf file, uncommented it and restarted my Apche2 server.

Q5. Apache Server is throwing error when restarting after this configuration?
It may be possible that you will get an error  at the time of starting the Apache2 server, after adding this configuration, the reason is, this configuration requires mod_headers.so module enabled, which is by default disabled. So enable mod_headers.so module and your Apache server will start running successfully.

Q6. How to enable Headers.mod in Apache2 server?
For enabling this module you have a headers.load file present in mods-available directory in your Apache2 server. In my case, it is present at /etc/apche2/mods-available. Just do one thing, create a softlink in your mods-enabled folder. If you are an Ubuntu user execute this command-

Now you will see this soft link in your mods-enabled folder. Restart your Apache2 Server.

Q7. How to check whether it’s working or not?
After restarting your Apache2 server, just hit a non cached page via Apache2 Server. Open debugger and check the response header. You will  see X-Frame-Options header field, as shown below

If you get this option on your page it means your configuration is working.

Happy Coding..!!

Ankur Chauhan
Tech Lead.