Posts

Sling Dynamic Include (SDI)

In CQ or AEM, most of the pages remain static. Hence, caching of the pages is very useful with dispatchers or any other available AEM plugins/connectors. Imagine a scenario where homepage of news agency must show the hot news which is different for different regions, however, because of caching it is displaying the same news in all the regions. Strange! To rescue from these, live scenarios, the application may require certain elements/components of the page to be dynamically included. In AEM, Sling Dynamic Include (SDI) provides this functionality.

 

Let’s elaborate SDI integration with AEM 6.4, Dynamic Include 3.0.0 and Dispatcher 2.4.

 

Please note that Step 1 and Step 2 need to be performed on publish instance.

 

Step 1:

 

Install Sling Dynamic Include Bundle using the following steps:

  1. Download the Dynamic Include bundle.
  2. Open the bundles using http://<host>:<port>/system/console/bundles
  3. Click on install/update button in the right corner of the screen

      4. Check the Start Bundle checkbox and browse the location where the bundle is downloaded and Click on install/update button

Once the installation of the bundle is completed, verify it by searching Dynamic Include. It should be in an active state.

Step 2:

 

After installation of the SDI bundle, the next step is to configure the component to be dynamically included.

Please find below the brief description of each OSGI config used above:

  • enabled – set it to true to enable SDI.
  • path – SDI configuration will be enabled only for this path.
  • resource-types – which components should be replaced with tags
  • include-type – type of include tag (Apache SSI, ESI or Javascript)
  • Apache SSI – Apache Server Side Includes

Apache HTTP Server is set up as a caching proxy in front of the AEM. This means that the include will be done by the http server and not by the sling engine.

  • ESI – Edge Site Includes

Edge Site Includes can be used as an alternative to SSI, it is evaluated by CDN. ESI has to have some proxy that is able to process its tags and often made available as part of CDN.

  • JavaScript – Ajax

Using JSI will replace dynamic components with ajax tags, so they are loaded by the browser. If included component has some JS code, it may not work properly, as it won’t be initialized immediately after a page is loaded.

  • Add comment – adds debug comment: <!– SDI include (path: %s, resourceType: %s) –> to every replaced component.
  • Filter selector – selector added to HTTP request for particular component and is used to get actual content.
  • TTL – time to live in seconds, set for rendered component. This property is supported for dispatcher version 4.1.11+
  • Required header – SDI will be enabled only if the configured header is present in the request. By default it’s Server-Agent=Communique-Dispatcher header, added by the AEM dispatcher. You may enter just the header name only or the name and the value split with =.
  • Ignore URL params – SDI normally skips requests containing any GET parameters. This option allows to set a list of parameters that should be ignored.
  • Include path rewriting — enable rewriting link (according to sling mappings) that is used for dynamic content including.

 

Step 3:

 

After completion of Step 1 and Step 2 on publishing instance, Dispatcher configurations need to be updated as explained below:

1. Include(If already present, make sure uncommented) the mod_include module in Apache Web server’s httpd.conf file:

2. Update virtual host configuration file

a. Find the following lines in the dispatcher.conf file

modify as below

b. Add Includes to Options directive:

3.  Update the httpd.conf to enable SDI.

a. Add “Includes” to Options directive to enable SSI includes used by Sling Dynamic Include

b. Specify what file types are to be processed by Includes filter.

4. Update rules.any or dispatcher.any depending where the cache rules are defined for the publish instance.

Make sure the selector ‘nocache’ used here is same as defined in OSGI config (include-filter.config.selector = ‘nocache’) explained in Step 2.

5. Restart the server using any of the below commands:

 

Verification

After setting up the SDI, it’s time to verify the changes. Follow the below steps:

 

  1. Right click and open the page source on the webpage where the component is dynamically included.
  2. In the page source, search for SDI includes tag.
  3. A component configured for SDI will be replaced with SDI tags as shown below:

How to Change Data Type (Typecast) in AEM, Use @TypeHint

Problem Statement:

How to convert a variable from one data type to another data type in AEM.

For a use case where a number field is used in dialog and further data will be utilized in Sightly (HTL) for numeric comparison operations. Problem can come up as data will be stored in String format and comparison can only be made on same data type elements.

Solution:

@TypeHint: It is used to forcefully define the data type of a property. It can be used as following:

Scenario:

I have a number field in my dialog with name ‘sponsoredPosition’, by default it’s value is stored in String format and I wanted it to be stored in Long format instead of String.

Steps:

In the component add a node, parallel to the ‘sponsoredPosition’ node (The one of which data type needs to be changed) of the type nt:unstructured.

  1. In the new node add following properties:
  2. ignoreData{Boolean} = true
  3. value{String} = Long
  4. Name{String} [email protected]
  5. sling:resourceType{String} =   granite/ui/components/foundation/form/hidden.

Here,

(a) ignoreData, as the name suggests tells value of this field should not be stored.

(b) In value field you must define the data type in which you want your data to be stored.

(c) In Name field add ‘@TypeHint’ suffix to the property name of original node whose value was stored in string(by default) .

(d) Resource type hidden is used for hiding it in dialog.

 

BLOG SUMMARY & BUSINESS GOAL

This blog is intended to provide technical AEM users a solution to an asked question and tactical training on the topic: How to Typecast in AEM.

Conclusion

Adding @TypeHint solved the issue, now value is being stored in Long format instead of String.

Interested in more training and support for your organisation using AEM CMS? Request a consultation to discuss Argil DX managed services.

AEM Dispatcher Setup for Linux

Installing dispatcher for AEM in Apache Web-server in Linux may get little tricky, as documentation provided by Adobe on Installation of Dispatcher in Linux is not sufficient, and if we take it in analogy and try doing same way we do in Windows, then we face some issues locating the appropriate files.

Prerequisites for Dispatcher Setup
  • Apache 2.2 web-server – In Ubuntu 12.0 and higher, Apache 2.2 web-server is pre-installed, but in case it is not there, you can find the installation instructions here.
  • Dispatcher Module – Appropriate dispatcher module can be downloaded from Adobe Package Share.
Installation Instructions
  1. Considering Apache web-server is already setup in system, go ahead and extract dispatcher module using following command:
  2. Once you have extracted the files, now you have to move the appropriate files to their respective apt path.
  3. Move “dispatcher-apache2.x-4.1.x.so” to “/usr/lib/apache2/modules”. There you will find all the modules already being loaded by apache 2 webserver.
  4. Adobe recommends to give a soft name to your dispatcher module, but you don’t need it as once setup is done, you will be hardly using it again.
  5. Now go ahead and create a folder conf under “/etc/apache2/”, and move “dispatcher.any” file under this folder. Make sure that you don’t move your dispatcher.any file to ‘conf.d’ folder which is already present.
  6. Now is the time to edit and map module file that you added and map the dispatcher.any file. Go ahead and edit apache2.conf file present under “etc/apache2/”.
  7. Scroll to the end, put some nice comments about you adding some new configs, and add following:
  8. Also add the following config to the end of apache2.conf file, which loads the dispatcher in web-server.
    Comments given above are self explanatory but, you can still go and edit configs if needed as per following descriptions:

    • DispatcherConfig: Location and name of the configuration file (Can be given as an absolute or relative path)
    • DispatcherLog: Location and name of the log file (Can be given as an absolute or relative path)
    • DispatcherLogLevel: Log level for the log file
    • DispatcherNoServerHeader: Whether to use the Apache or CQ server header
    • DispatcherDeclineRoot: Defines whether to decline requests to the root “/”
    • DispatcherUseProcessedURL: Defines whether to use the original request URL or to use one already processed by other handlers (ie: mod_rewrite)
      • Note: This is essential for rewriting incoming links (stripping away the ‘content/{site_name}’)
    • DispatcherPassError: Defines whether CQ or Apache will handle HTTP 40x error codes
    • SetHandler (Apache parameter): Forces all matching files to be processed by a handler
  9. Make sure, that path that is provided for load module, matches with the path where you placed your dispatcher module. Also match the name and version of dispatcher module, and change the config as required.
  10. Now configure dispatcher.any file. Edit /renders section in dispatcher.any.
    By default you may find port set to 8000 or 8080, change it to 80.
    Give whatever soft-name you want to give to your cache folder in place of “cqcache”
  11. Restart the apache server to let webserver take effect. You can restart apache server by using following command:
  12. Once server is restarted and you get [OK] message, go and check /var/log/apache2/dispatcher.log file. If it says dispatcher initialized with correct cache path, it means dispatcher is successfully setup and ready to be used.

Now you just need to configure your CQ replication agent, and point dispatcher flush agents to correct port.

I tested this today itself i.e. 14th Oct 2013 on Ubuntu 13 64 bit debian based OS. It worked like wonder for me. Please post your comments and queries if you have any issues with it, and also if there are better ways to do it. Cheeeerz.

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-

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

 

Magical Marketing Mechanism

You are munching your most loved hot hot crispy samosa, while checking your emails on mobile, you receive an email from your favorite e-commerce site and you spot your chosen “jeans” which you have been looking for some time now, is available at a steep discount. You were following that “jeans” on web and social for quite some time and always wished you get some discount on it. You had seen ads of it in your social networking and media sites and were always thought of buying it. You had in fact added it into your shopping cart but always felt it to be expensive.

You click the link in the email and see some nice photos of it and also some more suggestions based on your interest and find more attractive options.

You call you friend and tell the same but your friend has not received any such email or see any reduction in price or discounts on the site.

You are provoked more to buy it immediately as you do not want to lose the opportunity and don’t want to risk the out of stock scenario.

You go ahead get you credit card and buy it immediately. WOW, that’s the feeling you get and you are excited about your purchase for the next party you are going to have over the weekend. You feel thankful to the e-commerce site to give, only you the discounted price and feel great about your quick decision to purchase. You quickly share and tweet about your purchase and your friends are liking it.

WHAT HAPPENED BEHIND THE SCENES?

  • How your favorite e-commerce site knew you were looking for “jeans” from quite some time now?
  • How could only you could get the email and the discounts?
  • How could you see more suggestions and options which you had tried searching but could not get?
Adobe Marketing Cloud is one such solutions which is the answer for above questions.

Lets suppose, e-commerce site was using the Adobe Marketing Cloud to achieve this. Here is how they must have used different tools available in the suite.

Adobe Audience Manager consolidate audience information from all available sources and create profiles of audience segment to send email only to you.

 Adobe Campaign used analysis done by Adobe Social and Audience Manager to send you a personalized email. Adobe  Target and Personalization provided you with more suggestions and compelling offers and options. 

You shared your purchase through social sites and the e-commerce site could do more promotions based on the links and shares and could get more people know about the purchase and could listen to the social activity using Adobe Social.

Nice looking website and all the graphics, content along with the personalized options were hosted on Adobe Experience Manager.

Adobe Media Optimizer helps e-commerce site to get maximum return on their investments.

e-commerce site benefited by acquiring the customer by providing a good experience and it can go a long way retaining the customer.

It helped converting a potential user to a customer and sold the product and also received a good follow on social networking sites, which can only lead to more users getting converted to loyal customers.

It is very important to not just reach customers but also need to know them and Adobe Marketing Cloud solutions helps in the same.

Adobe Marketing Cloud is a comprehensive marketing solution which enables marketers to measure, personalize and optimize marketing campaigns and digital experiences for optimal marketing performance. Adobe Marketing Cloud includes a set of analytics, social, advertising, media optimization, targeting, Web experience management and content management aimed at digital marketing.

 It is the most comprehensive & integrated marketing solution for digital marketers.

 Adobe Marketing Cloud Solution consists of –

  1. Adobe Analytics
  2. Adobe Audience Manger
  3. Adobe Campaign
  4. Adobe Experience Manger
  5. Adobe Media Optimiser
  6. Adobe Primetime
  7. Adobe Social
  8. Adobe Target

 We will explore each product in detail in upcoming blogs.