Multi Site Management using AEM

 

MULTI SITE MANAGEMENT

AEM gives us the ability to easily create a new site, or multiple sites, based on an existing site.

MSM enables us to create a copy (called a Live Copy)  of an existing site (called a Blueprint) and to actively manage the relationships between the Blueprint and the Live Copy (using Rollout Config).

The Blueprint defines structure and content centrally. The structure and content can then be used on the Live Copy.

For each Live Copy, a Rollout Config determines how content is automatically updated.

We use MSM in following cases:

ü Sites are in multiple countries.

ü Sites are in multiple languages.

ü Need to reuse/replicate same content in multiple websites.

ü Maintain consistent branding and content across websites.

Advantages of using MSM:

ü Easily manage multiple websites that share common content.

ü MSM allows aem developers to define relations between the sites so that content changes in one site are automatically replicated in all other sites.

ü Reduces the time to manage your websites and increases the re-use of common content.

ü Maintain common look and feel across all websites.

 

The biggest advantage of using MSM over internationalization is ease to add new languages to websites. To leverage MSM functionality a website must follow below structure:

·        The web site should have a single page as the root.

·        Each child page is the root page of each language version.

·        The name of the child page is the language code.

 

We can see the list of default language code that comes with AEM at following location in CRXDE:

/libs/wcm/core/resources/languages

Blueprint Control Center

Managing a number of sites may become a burden some time, even if the sites are all Live Copies. The Blueprint Control Center (MSM Control Center) can help us stay organized with all of these Live Copies. The Blueprint Control Center is located in the tools section of site admin.

http://localhost:4502/etc/blueprints.html (Classic UI)

http://localhost:4502/libs/wcm/msm/gui/content/blueprintconfig.html (Touch UI)

Here we can get a detailed overview of all of the Live Copies that a specific site has, as well as detailed information on each page of each Live Copy.

We can see if the Live Copy capabilities of a specific page have been turned off, if the page has been altered and currently has different content from its Live Copy, or whether a page is a Live Copy at all.

We can also manage our Live Copies from within the Blueprint Control Center, creating, removing or re-rolling them.

 

Migration to Touch UI

 

MIGRATION TO TOUCH UI

AEM introduced a new user interface for the first time in AEM 5.6 (2013) referred to as the "touch-enabled UI" (simply as "touch UI") that is aligned to Adobe user interface guidelines.

They have provided Improved Touch UI Authoring interface (usable) with lots of improvements from AEM 6.1 onwards.

With near feature parity reached, this has become the standard UI in AEM with the legacy, desktop-oriented interface referred to as “classic UI”.

Note: It will take some time to adopt Touch UI, but once u get used to of it, you will love Touch UI, as this is designed to provide consistency in the user experience across multiple products.

Currently AEM does not provide configuration support to disable any of the UI (Touch or Classic) but soon Adobe will deprecate the classic UI.

 

The basic principles of the touch-enabled UI are:

 

·         Responsive design

·         Context relevant display

·         Reusable

·         Bottom-up design to ensure these principles are applied to every element and component

·         Mobile first (with desktop in mind)

 

 

 

Developer needs to make sure that their components are using Touch UI Dialog along with Classic Dialog. If you are trying to enable existing components to support Touch UI, then follow following practice:

1.     Use Dialog Conversion tool to convert existing EXTJS dialogs to Touch Dialogs.

2.     For any customization you did in Classic dialog (custom xtypes) you need similar widget for Touch UI.

3.     It’s not necessary that Classic UI & Touch UI dialog is always same (classic ui dialog can have multiple tabs, but for touch UI, you can have all fields in same tabs), but in ideal case they should be.

4.     Unlike Classic UI, Touch UI build complete dialog in single request (all CQ: include) and return complete dialog html.

5.     Use/Create “Datasource” to dynamically populate any element value in Touch UI dialog.

6.     Show/Hide rules in touch UI is simplified, and can be done by adding some class name in dialog’s attribute property, and is managed by Jquery.

7.     Custom Show/Hide rules can be easily created and used by creating clientlibs.

8.     If a component do not have Touch dialog, then Touch UI can use classic dialog.

 

Difference Between Classic UI and Touch UI dialog

Touch UI is responsive, supports desktop & touches devices and uses mobile first approach

 Classic UI Text Component Dialog                         Touch UI Text Component Dialog

 Touch UI is based on CORAL UI + GRANITE UI

·        CORAL UI has been used to provide widgets (CSS+JS)

·        GRANITE UI provides the foundation components

 

Currently the components are located in the Granite repository at:

·        Coral UI 2: /libs/granite/ui/components/foundation

·        Coral UI 3: /libs/granite/ui/components/coral/foundation

 

Migration of functionality from Classic UI to TOUCH UI that are deprecated/missing and which are completed are found at below URL:

https://helpx.adobe.com/in/experience-manager/6-3/release-notes/touch-ui-features-status.html

AEM have two sets of Granite UI components based on Coral UI 2 and Coral UI 3, below are the differences mentioned:

1.     A new set of Sling components of Granite UI Foundation is created for Coral3 under /libs/granite/ui/components/coral/foundation

2.     A new clientlib of Granite UI Foundation, named granite.ui.coral.foundation is also created

3.     The new set will not be just a copy-paste of the old set, rather it will be cleaned up (e.g. streamlining, removing deprecated feature)

4.     It is recommended that a page only use either CoralUI 3-based or CoralUI 2-based set (i.e. not mixed)

          5.     The new set will not use the layout concept anymore. This is to increase the                         simplicity of the understanding of Granite UI. Each layout component thus becomes             a standard component.

          6.     The layout mechanic itself is still there for other to use if needed.

Before

     

After

Reasons to upgrade to higher versions of AEM

Adobe Experience Manager 6.4 continues to enhance the system's stability, performance and support ability via: 

·         A system overview dashboard.

·         New health checks and maintenance tasks.

·         Improved online compaction.

·         Use of oak-run.jar to re/indexing Oak indexes without impacting system performance.

·         Improvements to upgrade tooling allowing for easier and quicker upgrades, including the pattern detector, compatibility package, and repository restructuring to facilitate easier upgrades.

·         A variety of usability improvements including the return of tree-based navigation, keyboard shortcuts, updates Omnisearch experience, and virtual scroll in AEM Assets.

 

Ø Website Creation made easy

AEM Sites introduces a number of features designed to accelerate the creation and build-out of websites:

·         Core Components v2 adds to and extends AEM's suite of ready-to-use components.

·         The Style System allows components to be easily styled to suit every need.

·         Translations enhancements easily translates AEM Sites into multiple language in one go.

  

Ø Asset Management

AEM Assets continues building on its rich set of Asset management capabilities to improve using, managing and understanding the DAM.

·         AEM Assets can be accessed directly from within Adobe Creative Cloud tools using Adobe Asset Link.

·         Metadata Import and Export allows asset metadata to be exported in bulk to CSV, updated in data management tools like Microsoft Excel, and re-imported into AEM.

·         Permissions, via Closed User Groups (CUGs), can be applied to Assets folders.

Ø Introduction of Machine Learning and artificial intelligence

 

AEM continues to build its integration with smart technologies to improve all experiences.

·         AEM Assets' Enhanced Smart Tags (via Feature Pack) allows the Smart Tags service to be trained with custom tags.

·         AEM Assets' Dynamic Media Smart Crop uses Adobe Sensei to automatically crop images while retaining both the focal point and overall image composition.

·         Smart Translation Search supports the automatic translation of search terms, allowing increased discoverability of content in AEM across languages.

 

Ø Integrations

 

AEM grows its ability to integrate with other Adobe services:

·         Experience Fragments integration with Adobe Target.

·         Adobe Launch cloud service, allowing AEM Sites to leverage the latest in tag management technology.

 

Key features introduction to various versions of AEM can be found here:

 

https://helpx.adobe.com/experience-manager/kt/platform-repository/using/upgrade-aem-article-understand.html

 

Introduction to HTL

 

The HTML Template Language has been introduced with AEM 6.0, and takes the place of JSP (JavaServer Pages) as the preferred and recommended server-side template system for HTML. For web developers who need to build robust enterprise websites, the HTML Template Language helps to achieve increased security and development efficiency.

 

HTL or JSP?

 

It is recommended for new AEM projects to use the HTML Template Language, as it offers multiple benefits compared to JSP. For existing projects though, a migration only makes sense if it is estimated to be less effort than maintaining the existing JSPs for the coming years.

 

Features provided by HTL are:

 

1.     Increased security - The HTML Template Language increases the security of sites that use it in their implementation, as compared to JSP and to most other template systems, because HTL is capable of automatically applying the proper context-aware escaping to all variables being output to the presentation layer.

 

2.     Simplified development - The HTML Template Language is easy to learn and its features are purposely limited to ensure that it stays simple and straight-forward. This allow HTML developers without Java knowledge and with little product-specific knowledge to be able to edit HTL templates, allowing them to be part of the development team.

 

3.     Reduced Costs - Increased security, simplified development and improved team collaboration, translates for AEM projects in reduced effort, faster time to market (TTM), and lower total cost of ownership (TCO).

 

To get more info about HTL go to below link:

https://docs.adobe.com/content/help/en/experience-manager-htl/using/getting-started/getting-started.html

 

 

 

 

 

 

Sling Servlets in AEM

 

SLING SERVLETS IN AEM

 

Writing a Sling Servlet in AEM is one of the basic building block to start working with AEM.

Sling servlet are basically used when developers need to make ajax call and want to get response in form of json. There are two ways in which a developer can register a servlet:

 

1.    Using path (“/bin/custom/path”)

2.    Resource type and Selector (“geometrixx/components/homepage”)

 

Servlet in AEM can be registered as OSGi service: we can extend SlingSafeMethodsServlet for read-only implementation or SlingAllMethodsServlet in order to implement all RESTFul operations.

 

SlingSafeMethodsServlet - Used for HTTP methods that are idempotent.

SlingAllMethodsServlet – Used for write operations.

1. Using Path

 

@SuppressWarnings("serial")

@SlingServlet(paths = "/bin/socialservlet")

public class RolloutUrlServlet extends SlingAllMethodsServlet{

       protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {

              JSONArray jsonArray = new JSONArray();

              JSONObject obj = new JSONObject(); 

              try {               

                     obj.put("url1","www.linkedin.com");

                     obj.put("url2","www.facebook.com");

                     obj.put("url3","www.instagram.com");

                     jsonArray.put(obj);

                     response.setContentType("application/json");

                     response.getWriter().write(jsonArray.toString());

                    

              } catch (JSONException e) {

                     e.printStackTrace();

              }            

       }

       }

 

Open http://localhost:4502/bin/socialservlet to get the json response.

 

 

2. Using resource type and selector

 

@SuppressWarnings("serial")

@SlingServlet(resourceTypes = "geometrixx/components/homepage",

selectors = "data",

extensions = "html",

methods = "GET",

metatype =true)

public class SimpleServlet extends SlingSafeMethodsServlet {

@Reference     

private Repository repository;     

@Override     

protected void doGet(final SlingHttpServletRequest req, final SlingHttpServletResponse resp) throws ServletException, IOException {         

resp.setContentType("application/json");         

String keys[] = repository.getDescriptorKeys();

JSONObject jsonobject = new JSONObject();            

for(int i=0;i<keys.length;i++) {

try {

Jsonobject.put(keys[i], repository.getDescriptor(keys[i]))

} catch(JSONException e) {

       e.printStackTrace();

}

       }

Resp.getWriter().write(jsonobject.toString());

}

}

 

Developer can hit http://localhost:4502/content/geometrixx/en.data.html to get the json response.

Adobe recommends using resourceType instead of using path because of following reasons:-

 

1.     When we register a servlet using path, we must be specific what all paths are allowed, If we define something randomly, our servlet might not be function properly.

Only a limited set of paths are allowed and the rest are blocked. We can add more path using Apache Sling Servlet / Script Resolver and Error Handler as follow:

 

Go to http://localhost:4502/system/console/configMgr, and search for apache sling servlet/Script Resolver and Error Handler

 

 

Here we can add more paths but,

 

2.     Allowing more paths to execute servlet make you application vulnerable. That’s why you should not open more doors for servlets to run until and unless it is required.

 

3.     You might also need to tell specific paths to your consumers, who are consuming servlet response using ajax and any change in that path could have a serious affect. This might not be the case when you use resourceType.

      4.     Sling Engine will take care of permissions if you register servlet using Resource Type. Users who cannot access a particular resource will not be able to invoke the servlet.