How to Get Started with AEM Components in Eclipse?
Below are the steps to set up workspace and start development of Adobe CQ5 components in Eclipse:
Prerequisites:
- CQ5 Installation
- File Vault (VLT)
- Eclipse
- Apache Maven
Step 1
- Create a project in CQ5 using CRXDE LITE
- Under the /apps folder, create the nt:folder myApp.
- Under the myApp folder, create the nt:folder components.
- Under the myApp folder, create the nt:folder templates.
- Under the myApp folder, create the nt:folder install.
- Click save button after creating the above things.
Step 2 – Installing File Vault (FLT)
- In our file system, go to <cq-installation-dir>/crx-quickstart/opt/filevault. The build is available in both tgz and zip formats. Extract either of this two archives.
- Add <cq-installation-dir>/crx-quickstart/opt/filevault/vault-cli-<version>/bin to your environment PATH so that the command files vlt or vlt.bat are accessed as appropriate. For example, <cq-installation-dir>/crx-quickstart/opt/filevault/vault-cli-1.1.2/bin
- Open a command line shell and execute vlt –help. Make sure it displays the following help screen:
Step 3
- Open eclipse by double clicking eclipse.exe
- Create a new workspace for your project and name it myApp.
- install maven plugin through eclipse market place
- After installation, restart Eclipse.
Step 4
In this section, we create two Maven projects: One called UI (after User Interface) which contains the CQ5 project structure with the JSP scripts and the other called Core which contains the Java code (source and compiled). The compiled code is stored in a jar file. The advantage of such a structure is that it adds modularity and autonomy to the logic of your application because each jar file (bundle) can be managed separately. Follow the below steps:
- In Eclipse, click File > New > Other.
- In the dialog, select Maven > Maven Project and click Next.
- Select the Create a simple project option and the Use default Workspace location option, then click Next.
- Specify the following property values for the Maven project, and accept the default values for all other properties:
- Group Id: com.day.cq5.myapp
- Artifact Id: ui
- Name: CQ5 MyApp UI
- Description: This is the UI module
- Click Finish.
Now, set the Java Compiler to version 1.5:
- In the Project Explorer view, right-click the ui project and click Properties.
- Select Java Compiler and set following properties to 1.5:
- Compiler compliance level
- Generated .class files compatibility
- Source compatibility
- Click Ok
Now, create the filter.xml file that defines the content that VLT exports:
- In the Project Explorer view, in the ui/src/main folder, create the content folder.
- Under content, create the META-INF folder.
- Under META-INF, create the vault folder.
- Under vault, create the filter.xml file.
In filter.xml, copy the following code to filter.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!– Defines which repository items are generally included –>
<workspaceFilter version=”1.0″>
<filter root=”/apps/myApp” />
<filter root=”/etc/designs/myApp” />
</workspaceFilter>
- Now, save filter.xml.
Step 5
Use VLT to check out the CQ5 content into your ui project:
- In the system command line, change the current directory to the following directory in your Eclipse workspace: <eclipse>/<workspace>/myApp/ui/src/main/content.
- Execute the command: vlt –credentials admin:admin co http://localhost:4502/crx
- This command creates the folder jcr_root under <eclipse>/<workspace>/myApp/ui/src/main/content. This maps to the CRX root (/). Under jcr_root the following files and folders are created, as defined in filter.xml:
- apps/myApp
- etc/designs/myApp
- It also creates two files, config.xml and settings.xml in //myApp/ui/src/main/content/META-INF/vault. VLT uses these files.
- In the ui Eclipse project, create a link to the apps folder that you just checked out. This link enables your JSP scripts to reference the files.
- Right-click ui, select New, and then Folder.
- In the dialog box, click Advanced and select Link to alternate location.
- Click Browse, specify <eclipse>/<workspace>/myApp/ui/src/main/content/jcr_root/apps, and then click OK.
- Click Finish.
For any queries, please feel free to contact – aem@nextrow.com
Marketers Latest Strategy for Success – Adobe CQ5/AEM
As customer expectations are reaching higher altitudes consistently, marketers are looking for ways to optimize their digital platforms on a high priority in order to meet their customers’ needs. For this, marketers need to have the right strategies to offer customer experience and need to break organizational barriers. They must adopt and leverage high-end digital experience delivery platforms to stand out from the competition.
According to “The Forrester Wave: Digital Experience Delivery Platforms, Q3 2014” report, Adobe is in the top place in the list of companies that offer digital experience delivery platforms. The reason behind this is the Adobe content management system, Adobe Experience Manager. Adobe AEM enables marketers to expand their brand presence by delivering personalized web experiences to their customers across different digital devices and channels.
How Can Marketers Benefit from Adobe AEM?
Using Adobe Experience Manager, marketers can:
- Design and manage multiple sites with single instance using the Multi Site Manager (MSM).
- Integrate the platform with Adobe Marketing Cloud to optimize the platform and reach more target audience.
- Design and optimize digital marketing campaigns using the Adobe Campaign, part of the Adobe Marketing Cloud.
- Integrate the platform with other marketing and e-Commerce solutions to convert leads into sales.
Adobe AEM Multi-Site Manager (MSM):
This functionality of Adobe CQ5/AEM enables marketers to automatically create and manage multiple sites such as multinational and multi-lingual. This functionality allows marketers to maintain corporate branding and increase their brand’s digital presence globally across multiple channels. They can also offer access to digital assets of the brand as a common library using the Digital Asset Management (DAM) functionality.
Figure 1: A screenshot showing the capabilities of the AEM Multi Site Manager
AEM, Adobe Marketing Cloud Integrations:
Adobe Experience Manager can be integrated with other Adobe Marketing Cloud solutions to optimize the platform and offer personalized experiences to customers.
Figure 2: Integration of Adobe Experience Manager with Adobe Marketing Cloud
Marketers can integrate Adobe AEM with:
- Adobe Scene7 to synchronize digital assets between AEM and Scene7 by creating a synchronization folder in both platforms. Marketers can also view published AEM assets in different viewers like Basic Zoom, DHTML Flyout Zoom, Flash Flyout Zoom, Video and more.
- Adobe Analytics to track the visitor data from website and drive traffic using conversion variables. Marketers can also map author and publish modes in AEM with different report packages.
- Adobe Social to store the data of social communities in the cloud. This enables marketers to use the benefits like optimized cross-channel moderation, updating data from communities to the cloud. Even though the data is in the cloud, marketers can control author and publish instances from the platform. Marketers can also moderate user data using Unified Moderation and Trusted User Moderation features of Adobe Social.
- Adobe Target to create campaign using AEM and can manage them using Target. Marketers can implement campaigns on landing pages, can perform A/B testing. They can also track user generated data, access it to optimize the platform and increase conversion rates. Based on the data, they can create and run digital campaigns.
Adobe Campaign:
Adobe Campaign (formerly known as Neolane) enables marketers to design and automatically run marketing campaigns, from one-off campaigns to one-to-one messages, across different marketing channels. This allows marketers to establish individual profiles for customers to know their preferences and offer them before they request it.
- Integration with AEM: The integration of AEM with Adobe Campaign allows marketers to leverage content from AEM authoring environment to design inbound and outbound campaigns. Marketers can use the marketing assets in AEM to publish in a campaign and run it across different channels using Adobe Campaign. Marketers can also optimize customer experiences by engaging in personalized communications with them using customers’ profiles shared on AEM and Adobe Campaign solutions.
AEM Integration with Marketing/E-Commerce Tools:
By integrating Adobe CQ5/AEM with marketing/e-Commerce tools, Marketers can convert leads and lists into sales. Some of these integrations include:
- ExactTarget integration with AEM will enable marketers to optimize digital marketing campaigns through emails and newsletters by distributing them in ExactTarget platform.
- Hybris integration with AEM will allow marketers to listen to their audience responses by connecting and accessing data from an e-Commerce platform. This will allow them to market their products.
AEM can also be integrated with other marketing/ e-Commerce tools like Eloqua, Marketo and Endeca to optimize online business.
NextRow is system integrator and an Adobe solution partner that offers web experience and digital marketing services using Adobe Experience Manager. NextRow’s services include consulting, implementation and upgrading Adobe CQ5; migrating other CMS platforms into AEM; AEM maintenance and support services for existing Adobe AEM platforms; and integrating AEM with other tools of Adobe Marketing Cloud as well as third-party applications. NextRow is also offering Adobe Experience Manager integrations with different marketing tools such as Eloqua, Adobe Campaign, Hybris, and more.
Why Do Adobe CQ5/AEM Implementations Fail and How to Prevent It?
Adobe CQ5/AEM is arguably the industry-leading WEM platform. Implementing Adobe CMS requires careful planning and masterful execution. The process, from planning to launching Adobe Experience Manager, might encounter several obstacles like any other implementation. These problems may have the potentiality to derail the implementation process with increased costs and performance issues, if not carefully executed.
Implementing Adobe Experience Manager (to that fact, any CMS), involves careful planning, involving all stakeholders in the project, in defining project goals and requirements. A project can fail for various reasons, most notably communication gaps among key stakeholders. Engaging all stakeholders including marketing teams, IT teams, infrastructure team is the key for AEM implementation success. Below are some of the factors that may lead project implementation to failure if there is no proper alignment among your teams.
- Gathering project requirements: This is the first phase of a CQ5 implementation project where certain fundamentals like schedule, budget, and quality are defined. For this, all the teams should be involved and their opinions should be taken into consideration before starting the project. Creating a unified user experience instead of breaking down into multiple silos is critical for marketing teams to understand the complete user behavior and to offer a better user experience.
- Understanding size and complexity: Before implementing a CQ5 project, understanding the size, complexity and capabilities of the system will help an organization to define the scope of the project. So, every member involved in the implementation should understand the scope of the project to avoid confusion and incorrect assumptions, which may lead to project failure. Remember that complex projects like Adobe CQ5 implementations may tend to have changes even after the launch.
- Divergent strategies: When an organization plans to implement a project, say using CQ5, opinions of all the teams (marketing, IT, and more) should be taken into consideration. Each team has its own strategy based on their area of expertise and will differ with other teams. The outcome of this will be undefined project requirements, inadequate strategies and more, which leads to project failure.
- Disorganized roles/responsibilities: Allocating project roles to in-house teams is a key factor in defining business requirements for the project. These roles should be defined clearly and ensure they are known to everyone in the project. And each member of the project must understand their responsibilities in the project to avoid confusion. If these roles/responsibilities are not organized properly, then a member or team involved in the project can be the reason for project failure.
- Theory vs Reality: While implementing a project, an organization should consider the environment in which the end solution will be run and the end users who will use it. This will help organizations to determine the requirements for the project and to launch it as per the schedule. Projects that are implemented without any of these requirements will tend to fail in reality.
- Engaging a right partner is the key: It is quite impossible to hire all FTEs for the project implementation, especially when it is a new implementation. It may take time to build the expertise internally and build the team. While you do that, engage a qualified Adobe partner who is small but nimble to gain maximum efficiency in the deliverables.
Figure1: An example screenshot of a successful CQ5 implementation
Why engage an outside partner for implementations?
Do you have enough talent in-house? That should be the first question to ask yourselves. When it is a new implementation, I bet you may not have much talent in-house. While you breed your talent, you can’t put the project on hold, rather engage an Adobe implementation partner like NextRow to implement your CQ5 project. NextRow can bring in a different perspective to your team that will enable you to think outside the box to achieve best results.
NextRow will be a perfect partner for your outsourcing projects because we can guide you with our unique CQ5 services from strategic consulting and implementation to deploying the platform and offering training. As an Adobe solution partner, NextRow has Adobe certified CQ5 developers/architects to implement your Adobe Experience Manager projects leveraging their deep experience in working with the platform. To ensure strong relationship with our clients, we offer flexible business models including Fixed Price Model, Time and Material Model and Hybrid Business Model.
As a trusted service provider, we also offer our clients maintenance and support services (fixed development hours and L1/L2/L3 support) for your Adobe Experience Manager platforms. According to Adobe, a CQ5 platform must respond to 70% of the requests in less than 100ms; 25% requests in less than 100ms-300ms; and no page should take less than 1 second. So to monitor your CQ5 instances, NextRow has developed a tool, Remote Monitoring Center (RMC). This cloud-based solution will monitor your CQ5 platforms in multiple servers and notifies you of any issues in the platform before your audience notice them.
Figure2: A screenshot of NextRow’s RMC tool dashboard monitoring a CQ5 platform
Master Mobile Apps Domination With Adobe Experience Manager
The usage of mobile apps in smartphones and on tablets dominated the usage of web browsers globally. Most of the smart users prefer to use mobile apps than browsing on mobile websites. According to “The US Mobile App Report” released by comScore in August, 2014, mobile app usage among Americans increased to 52% of the total internet usage in 2014, which is a rise of 24% compared to the usage in 2013. The report also said that almost 57% of all the smartphone users in the US use mobile apps on a daily basis.
Figure1: The US Mobile App Report showing comparison of usage of mobile apps in the US between 2013 and 2014.
The usage of mobile apps is not only in the Americas but also with most of the smartphone users across the globe. This change in the users’ mindset to prefer mobile apps over mobile sites is because of the rich and personalized experiences provided by the apps compared to mobile sites. This scenario clearly shows that organizations must deploy mobile apps to increase customer engagement. Developing and launching might be easy but providing rich and personalized experiences to customers using these apps involves implementing a robust platform which can deliver personalized mobile app experiences. Adobe Experience Manager is in the top of the list because it has an integrated mobile app development platform (MADP) that bridges the gap between developers and marketers.
Adobe Experience Manager Apps – a perfect solution for marketers
Adobe Experience Manager Apps is an integrated MADP platform that enables organizations to design and develop new apps, individualize content and deliver them across multiple platforms including iOS, Android and Windows. It is developed to allow marketers to work collaboratively and offer high end mobile app experiences for target audience(AAM).
With AEM Apps, marketers can:
- Enhance app experience consistently: Using the drag-and-drop interface in the platform, marketers can update the app experience without any assistance from IT teams. The platform enables the app to review the updates to the app and instantly publish them. So, there is no need for users to update the app manually.
- Create platform independent apps: Marketers can develop a single app for one platform and use that design to deliver the app across different platforms. They can also increase updating time by including cross-platform content in their native apps.
- Personalized apps for brands: Marketers can develop new apps for every brand and for every marketing campaign in each region. They can also author content between apps to maintain brand consistency.
- Analyze app performance: Marketers can analyze the performance of their apps by using the pre-built Adobe Mobile Services SDK (Analytics) integration.
Figure2: A sample screenshot of creating an app using Adobe Experience Manager
Apart from these features, AEM Apps enables developers and marketers to use Adobe PhoneGap Enterprise, a cross-platform app development solution, to develop and maintain hybrid apps. This integrated solution enables marketers to manage the website content on their apps.
NextRow’s team of AEM developers/architects has the expertise in mobile app development. They have developed several mobile apps that are compatible with different platforms including Android, iOS, and Windows. At NextRow, we support our teams by offering them the freedom and environment to make use of their expertise in implementing projects resulting in quality deliverables. That is why we maintain consistency in project delivery adhering to budget, schedule, and quality. Anything from the creation of mobile apps, to expanding the app to other platforms or developing a new product, NextRow is just a click away to serve your needs.
Developing and Authoring a basic mobile application using adobe AEM 6.1
It’s a mobile app development and management platform within Adobe Experience Manager that helps you create and deliver mobile apps for all consumers and devices. From a single view, integrate your apps into your overall marketing strategy.
How does Adobe Experience Manager Apps build and deploy?
- AEM integrates with the Adobe PhoneGap Build service to simplify the application build and deploy process.
- ContentSync enables users to download page and content updates Over-the-Air (OTA) to their devices without having to re-install the application or download from the appStore, Google Play, or other app sources.
- Adobe Analytics is fully integrated into AEM apps and allows detailed tracking of distribution, geolocation, operating systems, devices, click-streams, time in app, crash reports, iBeacon tracking and more.
Why should we use Adobe Experience Manager Apps?
Adobe PhoneGap Enterprise uses AEM as a platform and, leverages both Apache
Cordova and Adobe PhoneGap to create and manage content-rich cross-platform mobile applications that take full advantage of both HTML and Native Device Features:
- Manage all your company’s mobile apps in one place. Whether they’re 100% native or a hybrid application, they can be managed within PhoneGap Enterprise.
- Review apps in development and staging environments without the complexities of provisioning profiles and the extra effort to build and upload your app for sharing. See the PhoneGap Enterprise App in both the AppStore and PlayStore for how this is easily done.
- Use the AEM page authoring environment to create and manage rich content for your apps, including single page app (SPA) reference implementations.
- Use the HTML with Adobe PhoneGap to create a mobile app container, page templates and components with device-native capabilities (including for example, native transitions between pages for a smoother and more performant experience).
- Build and manage mobile content into new or pre-existing native apps through Cordova Web View integration with Adobe Experience Manager (AEM).
- Share content across all delivery channels including, web, mobile-web, mobile-app, and print. Content is managed within Assets and through Adobe S7 capabilities one can very easily stream (online) or package (offline) images and videos targeting all viewports (size and quality of images and video to support all screen sizes and bandwidth limitations).
Below are the steps to create a basic sample app in AEM: –
For creating a basic app you can start with basic starter kit provided by Adobe in the link here
All the requirements and prerequisites are stated in the above link: –
After cloning the repository you can customize the app name and title: –
For installing the project onto the AEM instance: –
After installation onto AEM instance you will find your project in apps folder: –
Folder structure for mobile apps in AEM
Content for the app should be in content/PhoneGap folder for best practices
You can author the created AEM app from Mobile Apps list console
From the AEM Mobile Apps Control Center, you can manage your application, view statistics, build, deploy and manage your mobile app content.You can drill into each tile in the Control Center to view or edit details by clicking the ‘…’ in the bottom right corner.
The Manage App Tile displays your applic ation icon, name, description, supported platforms, call home for updates URL and version information. You can drill into this tile to edit and maintain the PhoneGap Application Configuration (config.xml) and, prepare your application for submission to the various application stores for distribution.
Content can be created, updated and deleted in AEM Apps in much the same way you do the same within AEM Sites. The Content Tile displays the number of pages of managed content and last modified. You can drill into content to create, copy, move, delete and update pages by clicking on each record in the tile.
Apart from managing content from Mobile App List Console you can also manage it through crxde Lite
The PhoneGap Build Tile connects with the PhoneGap URL to build and host remote builds.
To connect to the PhoneGap you need to configure this tile by creating or using existing Adobe ID
After configuring you can build the app remotely or build by downloading the source
Once built remotely, the build is made available either as a download or directly to your device via a QR code.
How to make your AEM sites Web Accessibility Compliant?
Introduction:
This is a brief overview of the Web Accessibility features for websites developed with Adobe Experience Manager. The most commonly faced accessibility issues on AEM developed websites are discussed herein, along with several examples of the best approaches you should take to resolve these issues.
Why Accessibility is important for your site?
Developers tend to assume that websites are accessible by everyone who can see and use the pointer interface (for example, mouse pointer on the screen and touchscreen experience); however, users with any disabilities may find a website difficult to navigate. The goal of a website developer is to make this less challenging of an experience for the normal, everyday user. Websites should be user specific when user experience is taken into consideration and must accommodate individuals with impairments, whether they be situational, temporary or permanent. Therefore, developers must be very specific when writing the website code to achieve accessibility standards.
How to find Accessibility recommendations and implement in AEM?
Web accessibility evaluation requires a combination of semi-automated evaluation tools and manual evaluation.
Your website can be tested for web accessibility with one of the following tools:
- WAVE Evaluation Tool Please click on WAVE tool plugin to download this plugin on Google Chrome. To test your websites with the WAVE tool on browsers other than Google Chrome, please click here and follow the instructions.
- NVDA Screen Reader (NonVisual Desktop Access) Please click here to download this software.
Working with WAVE Tool on AEM sites:
We use WAVE software to test the accessibility errors on AEM sites. WAVE is an open source web accessibility evaluation tool available as a plugin download only for Google Chrome. Once we enable this tool on any published site, we can observe/view the red tags on the site. These tags describe the type of accessibility error which has occurred. The following examples address some of the commonly occurring web-accessibility issues that users may experience. Their respective solutions are followed by the issue explanation.
How to use WAVE tool on your AEM website?
A simple form component is included on the geometrixx-media website and WAVE is activated on the published page. It is important that you remember to switch to Preview Mode to enable WAVE to test on author instance.
Once the WAVE tool is enabled, it addresses the accessibility errors on the page.
For example, in this case, the error was as follows:
This diagram shows the approach of WAVE in addressing the errors on the page.
WAVE not only displays the web accessibility errors but also suggests solutions to solve them. However, most of the suggestions are vague and may not guide the developer into attaining an immediate solution. Therefore, the following explanation has been provided, in brief, to overcome accessibility issues and gives you an idea of the methods you must implement to approach these errors.
Click on the “i” icon to view the information related to the errors.
EXAMPLES OF THE FEW MOST COMMON ACCESSIBILITY ISSUES:
A form control does not have a corresponding label: The solution for this error requires the label attribute to the form element. Label attributes identify all form controls like text fields, radio buttons, checkboxes and drop-down menus.
Approach: <label> tag can be included to identify the form controls as follows:
A) Using label
<form>
<label for= “my-name”> Name: </label>
<input type=”text” id=”my-name”>
</form>
“for” should be addressing the ID used for the referral tag.
B) Hiding the label element
When the label should not be displayed on the page, CSS/WAI-ARIA attributes can be used to resolve this issue.
<form>
<label for= “my-name” class=”hide-label”> Name: </label>
<input type=”text” id=”my-name”>
</form>
Although the styles for the class can be configured as per the requirement, to hide the label it can simply be
.hide-label {
display: none;
}
C) Using aria-label attribute
This approach is very accessible by screen readers. However, aria-label does not convey the information to the visual users like the title attribute option.
Code:
<form>
<input type = ”submit” id=”my-name” aria-label=”submit button”>
</form>
Input field is missing a description: Every input field requires a description so that any area on the page is accessible for visually impaired website visitors. Approach:
A) Using title attribute
Using a title attribute can visually display the description of the field when the element is hovered over by the mouse pointer.
Example code:
<input title=”Please enter your first name ” type=”text” name=”first-name”>
NOTE: This approach is generally less reliable to be used as a label (previous example) because some of the screen reader’s assistive technologies do not interpret the title attribute as a replacement for the label element as title attribute frequently used to provide information of the field. Therefore, this method is not recommended to resolve label accessibility error.
B) Using aria-label / aria-labeled by
Aria-label attribute can also be used to provide the description of a field. This can be done when the description is not needed to be displayed for the screen readers but still serves the purpose.
Example code:
<input type=”submit” id=”submit-button” aria-label=”submit-button”>
(Or)
aria-labelled by can address the Id of the group to describe the purpose of the field.
<div id=”test”>Testing Accessibility</div>
<div>
<div id=”One”>One </div>
<input type=”text” aria-labelledby=”test”/>
</div>
CLICK ON ARIA ATTRIBUTES TO UNDERSTAND MORE . Missing Button in form: Every form requires a submit button, which is a very important element of the form. The following approach can be implemented for form buttons to be accessible:
Approach:
A) Add correct type in the input field
Example code:
<form>
<input title=”search” type=”submit”>Search</input>
</form>
“type” attribute should be set to “submit” to enable the screen readers to understand the
B) Using role and wai-aria attributes
Example code:
<form>
<input role=”button” type=”submit” aria-pressed=”false”></input>
</form>
WAI-ARIA role for the drop down button in a form The correct Aria-role attributes should be used for the form fields. The drop down functionality roles may vary depending on its purpose. The following example is the role that should be used for a form element <select> which displays all the countries in the list.
Example Code:
<select role=”listbox” name=”state”>
<option></option>
<option></option
…..
…..
</select>
CLICK HERE TO GET MORE INFORMATION ON ROLES. Image missing alternative text Image link requires an alternative text describing the purpose of the link. Every image that is used in the page should be presented with an alternative text because the users will understand the purpose of the image with or without the image being displayed on the page.
Adding the alternative text in the image link that states the topic of the page can resolve this issue.
Approach:
Example code:
<a href=”/home/personal/mobile-app.html” class=””><img src=”/content/dam/geometrixx-media/sample.png”
class=”” alt=”Sample image for the accessibility test”></a>
The above description of the image within the alternative image attribute (alt) should be meaningful and precise to the images used within the respective tags. Avoid using <bold> tags The ‘bold’ tag is used to highlight text. Consider the following:
The text should be emphasized semantically, use the ‘strong’ tag instead.
If the text is a heading, an ‘H’ tag (such as H1, H2, H3…) should be used instead.
If the text is highlighted as a visual effect, CSS should be used to do this.
Approach:
A) Using Strong tags:
<strong> This is a way to avoid using bold tags </strong>
B) Using appropriate styles:
<p style=”font-weight: bold”>This is another way of avoiding the bold text</> Avoid using <font> tags The font tags should be avoided to style the text on the page. Many authors tend to use font tags to configure the content on the page through dialog box; this approach will be the root cause of inaccessibility of content on the page for a visually impaired visitor.
Approach:
Example code:
<font color=”#fff”>This is an example</font>
The above content should be replaced with the appropriate tags and the styles should be given separately as follows.
A) Using Appropriate tags with styles:
<p style=”color: #fff”>This is another way of avoiding the bold text</p>
Presentational Attributes used error:
In the event that presentational attributes such as ‘border’, ‘align’, or ‘bgcolor’ are used then CSS should be used for styling instead.
It is important to review these issues and determine if they can be fixed by moving the presentational attributes to your CSS. Furthermore, it is not always practical to make these changes; however, they should be made whenever possible and considered a best practice. Approach: Inline styles can be included for fixing this issue when the issue has occurred because of the dialog box content configuration.
Example code:
<iframe style=”height: 200px; width: 200px; border: 0px”>”this is an iframe”</iframe>
Conclusion: As clients focus more on making websites accessible for everyone, many of you will start working on accessibility issues sooner than later. I hope this blog helps you “jump start” the process of finding and implementing accessibility items for websites.
A Detailed Overview of Slightly Language
SIGHTLY (A BEAUTIFUL TEMPLATE LANGUAGE)
Sightly, Beautiful Markup Language and More
Sightly is a Hypertext Template Language (HTL) specifically designed for AEM. It was introduced with AEM version 6.0 about two years ago. Now-a-days, slightly has been gaining importance because of its various advantages for developing websites in AEM.
Although languages like of JSP (Java Server Pages) and ESP (ECMA Script Server Pages) serve well for website development in AEM, sightly is emerging to be a preferred templating language for HTML because HTML developers can participate better in AEM project without any JAVA knowledge.
In addition, this language seems pleasing to the eye of any web developer. It is made easily understandable with its simple syntax, and efficient maintainability. Therefore, it is called “Sightly”.
Sightly, is also referred as server side template language, it enables development teams to distinctly separate logic and markup. This flexibility allows faster and easier CMS customization. It helps businesses to pursue not only broader but also comprehensive business strategy and faster time to market.
During the last two years, with an increased support base for tools, Sightly has become more performant and standardized. After successfully completing the migration of a site to AEM using Sightly, one can view results such as a reduction in developments efforts over traditional JS based development. The code came out to be cleaner and the maintenance is much easier. This blog describes Sightly’s advantages, its implementation factors, and its Cost reduction features.
The following are the main advantages of Sightly.
Advantages
- New AEM developers have a shorter learning curve
- Easy to maintain the project with cleaner code
- Introduces, the new way of component development
- Elimination of UI/AEM integration issues
- Increased developer productivity
- Secure: URL Externalization and XSS Protection
- Finally helps you forget about JSP Scriptlets, with embedded business logic.
- Offers pure view and help move the business logic to Java classes (externalizing the business logic)’
- Addresses problems in AEM such as lack of separation of concerns
On the other hand, sightly shows its significance in enabling Java developers to focus on the backend code independently. This specific feature distinguishes sightly from other templating systems where Java developers should have little front-end knowledge of integration. Therefore, sightly often reduces coordination issues, as the frontend development might not be a primary skill for every Java developer.
SAMPLE CODE IN JSP
<% %>
<%@include file=”/libs/foundation/global.jsp”%><% %>
<%@page session=”false” %>
<% %>
<cq:includeClientLib css=”test.css” />
<cq:includeClientLib js=”test.js” />
<div>
<h1>Hello World!!</h1>
<h2>I am using JSP!!</h2>
<h2>properties</h2>
<%
String title = properties.get(“jcr:title”, “default title”);
String text = properties.get(“jcr:text”, “default text”);%>
Title: <%= title %> <br/>
Text: <%= text %> <br/><br>
<h2>currentPage</h2>
Title: <%= currentPage.getTitle() %><br>
Name: <%= currentPage.getName() %><br>
Path: <%= currentPage.getPath() %><br>
Depth: <%= currentPage.getDepth() %><br>
<h2>currentNode</h2>
Name: <%= currentNode.getName() %><br>
Path: <%= currentNode.getPath() %><br>
Depth: <%= currentNode.getDepth() %><br><br>
<c:if test=”${properties.name}”>
<c:set var=”test” value= “target=’_blank’”/>
</c:if>
<a class=”btn btn-primary-outline”
href=”<%=testurl%>”
${test} role=”button”>${properties.name}
</a>
</div>
SAMPLE CODE IN SIGHTLY
<div>
<sly data-sly-use.clientlib=”/libs/granite/sightly/templates/clientlib.html”
data-sly-call=”${clientlib.js @ categories=’clientlib1,clientlib2′}”
data-sly-call=”${clientlib.css @ categories=’clientlib1,clientlib2′}” >
</sly>
<div data-sly-include
script=”/libs/foundation/global.jsp”>
</div>
<h1>Hello World!!</h1>
<h2>I am using Sightly!!</h2>
<h3>Properties</h3>
<!—fetch property values from the dialog — >
<p>Title: ${currentPage.properties.jcr:title}</p>
<h3>Page Details</h3>
<p>Title: ${currentPage.Title}</p>
<!—fetch property values with currentPage object– >
<p>Name: ${currentPage.Name}</p>
<p>Path: ${currentPage.Path}</p>
<p>Depth: ${currentPage.Depth}</p>
<h3>Node Details</h3>
<!—fetch property values with currentNode object– >
<p>Name: ${currentNode.Name}</p>
<p>Path: ${currentNode.Path}</p>
<p>Depth: ${currentNode.Depth}</p>
<!—testing if the properties are present (similar to if condition)– >
<div data-sly-test.valid=”${pageProperties.name}”>
${pageProperties.name}
</div>
</div>
Tricks with Sightly:
- How to print Url of the current page in sightly: Although we can fetch URL using javascript model, it is preferable to directly use it in sightly as it improves the performance.
Example: You can print the URL using ${request.requestURL.toString} Url can be composed and printed as below:
<sly data-sly-test.scheme=”${request.scheme}”/> <sly data-sly-test.servername=”${request.serverName}”/> <sly data-sly-test.serverport=”${request.serverPort}”/> <sly data-sly-test.val=”${request.requestURI}”/> ${scheme}://${servername}:${serverport}${val}
Access Values from a String[] in Json:
Example:
<div
data-sly-use.multi=”${‘com.project.sightly.MultiField’ @ json=properties.items}”>
<div data-sly-repeat=”${multi.values}”>
<h2>${item} – ${item}</h2>
</div>
</div>
Where MultiField is a class and uses an identifier called ‘json’ to map the properties stored in an Jason object.
multi.values – will fetch all the keys from the json object.
Item: will iterate key value pair within the json object.
Coding Standards in Sightly
Sightly allows the developers to leverage its wider choice of a global variable as well as flexible Use of API. It also enables the developers to prepare customized data for the templates utilizing both Java and JavaScript.
Sightly Implementation Overview
Beyond the MVC (Classic Model-View-Controller), the above architecture does have the following characteristics
- Presence of a sling post servlet does mean that no code must be written to handle POST requests
- The client not necessarily should know about structuring data for the Sling Post Servlet
- A simple server-side JavaScript file is essential to trigger the specific template handling that part of the view. To retrieve the HTML fragment of what must be updated on the page.
Few points to know about Sightly, ranging from technical odds and ends to more general considerations
Integrations with sling models:
Sightly does not require Sling models, there are different ways to get your logic into Sightly. Still, the sling models are considered as the perfect way to set the Java logic up.
Templates-Define reusable:
In Sightly, Templates tend to define re-usable and potentially recursive methods that can be defined locally or in separate files.
Separation of concerns:
Separation of concerns defines the separation of the frontend from the business logic in different files. Initially, business would require writing all templates in JSTL, because JSP logic tends to sneak into the views. Another disadvantage is, JSTL can become rather unwieldy and produce lots of clutter. This was very much reduced in Sightly and it helps bridge the gap between back end as well as front-end development.
Localizing Terms:
Sightly localize terms provided in dictionaries in an easy and beautiful manner by just adding the context i18n.
Version diffing:
This is a core feature of AEM and it is used on many websites. It does include HTML to highlight changes in different versions of the page directly in the author environment. By inserting HTML into text, the text becomes enriched with content, that is automatically escaped by Sightly. So, one must skip all encoding, which again takes away a core feature of Sightly. Abode is working to find a solution.
Easy to adopt:
Sightly is easy to adapt because it allows the front-end developers to directly work with templates in Abode Experience Manager and not have the visual clutter of JSTL or the power (and responsibility) of JSP. Thus, it becomes much easier to use it, in all the projects for web development on AEM.
How to add
Help Reduce Total Cost of Ownership(TCO) and Time-to-Market”
Sightly is preferred by numerous technical managers because of its templating system that allows to separate the business logic from the front end markup. It also enabled the users to leverage JCR’s extensive features for flexible sling integration.
Potentially 25% of the development cost is saved utilizing Sightly.
The front-end designs need not be implemented separately from the AEM project anymore as Sightly(HTL) provides and environment for HTML developers to work directly on HTL template without any back-end knowledge. The java development is benefitted as Sightly provides a simple to use USE-API to separate logic from the markup.
In conclusion, Sightly templating engine is a powerful, versatile tool with many benefits for web development in AEM platforms. Additionally, it improves time-to market and reduces the Total Cost of Ownership of Your AEM 6.x projects. It also helps in introducing a clean separation of concerns and prevents developers from writing business logic and the markup, thus reduces the load time of the webpage.
Adobe Experience Manager 6.4 Launched: Know Some Major Highlighting Features
Latest Features of AEM 6.5 Released in April 2019
From the grand stage of the Adobe Summit 2018, held from 25th – 29th March at Las Vegas, the curtain from the latest Adobe Experience Manager 6.4 version was unfolded. The latest Adobe CMS has been launched with many amazing features and here we are going to look at some major highlights of AEM 6.4.
Some salient features of AEM 6.4 are :
1.
Advanced Fluid Experience Integration
Advanced Fluid Experience integration ensures the fast flowing of content across owned, earned and paid media channels. The unique combination of data and content in Adobe Experience Manager 6.4 helps brands to take customers on a variety of personalized journeys.
2.
Integration Of The Adobe Sensei To Experience Manager 6.4
This integration helps you to customize the design and content based on the individual customer preferences along with 360-degree view feature.
3.
Advanced Security Along With Cloud Scale
Today we live in a digital world which is highly fragile and prone to the hackers and so keeping this in mind the AEM 6.4 has been integrated with the SLA management, which is mandatory for the enterprise-grade security and architectural guidance. Apart from this, the various security levels are included for Sites, Assets, and Forms, to scale and adapt to the growing customer base of the organization.
4.
Parallel Handling Of Marketing, Creative, And IT Operations
The integration of the new user interface has made it possible to work freely at marketing, creative, and IT operational level without causing hindrance to any other segment. Also, the Single-Page App (SPA) Editor helps you to use and collaborate with the latest front-end developer technologies and business associates for content.
5.
Personalized Experience For The Customers
The Adobe Experience Manager 6.4 comes with the Smart Layouts that has been powered By AI to give personalized brand experience to the customers. Based on the previous buying trends of the customer, the page automatically modifies the suggestions to suit them the best. Further, the use of Adobe Target helps you to take personalization for the specific customer to the next level.
All in all, it can be said that Adobe Experience Manager 6.4 has been combined with the various digital marketing features based on the cloud and machine learning to provide the best-personalized customer experiences.
This is just a glimpse of the upcoming AEM 6.4, and in the subsequent articles, we will discuss each feature in detail to understand it more profoundly.
If you want to know more about Adobe Experience Manager 6.4, or need any assistance with your current or next Adobe project click here or call us at +1-847-592-2920.
Digital Trends of 2018 That Will Change the Face of Adobe Experience Manager
In this contemporary period, the technology is changing at a very rapid pace. The year 2017 saw the surge in AI and machine learning based innovations and the same trends are expected to reach newer heights in 2018 with emerging technologies like voice, facial recognition, virtual reality, and augmented reality. The AI has also generated ‘Hue and Cries’ from many leading intellectuals from all the corners of this planet. There is a lot of discussion and concern over the future of AI and machine learning and the way it can impact humanity or affect the job market. However, the above-mentioned technologies and discoveries are all set to be carried forward, hence, it’s obvious that these will also change the face and future of Adobe Experience Manager (AEM) and other Adobe Experience Cloud products.
Let us look at some digital trends for 2018 along with some of the latest developments in Adobe and also the challenges and opportunities that are standing in the way of AEM and other Adobe Experience Cloud products.
- Improved AI Features:
The current digital world is expected to see a 360 degree turn around with the emergence of improved AI and Machine Learning features. It’s because the AI and machine learning are much more advanced at analyzing and understanding text and images, but, we have to accept that both are still in incubating stage and will take some more time before we can be leveraged with all its amazing features.
Analyzing the potential and scope of AI, the Adobe had also launched it’s indigenous AI platform dubbed as Adobe Sensei in 2017. The main aim is to create cross-platform and proprietary based on artificial intelligence to power solutions like Creative Cloud, Document Cloud, and Experience Cloud. In AEM also, the Adobe Sensei has been integrated for features like smart tags in Assets and summarize text in the content fragment. In the coming years, it can be said that the potential of Adobe Sensei will completely change the overall experience of digital marketing. It will not only understand the singular piece of content but will also understand the larger content and experience. It will also be capable enough to assist us in becoming a more creative and better decision maker in real-time.
- More Immersive Experience:
The products like Amazon Echo powered by Amazon Alexa and Google Home powered by Google Assistant, draw a lot of attention, which ultimately led to nearly 300% increase in their sales in 2017 (Billboard). And now the tech world is buzzing with the upcoming Apple HomePod powered by Siri, which is all set to reach the market by next month. The increase in these products and the personal assistants has made one thing clear that we are becoming really very fond of technologies with the human touch. Further, the 360 photos and video based on the integration of virtual reality (VR) and augmented reality (AR) has made the users awestruck and the AR & VR handsets are helping us to immerse in the new world of entertainment. These headsets are not just allowing you to see it on the screen but feel it in front of your eyes. It is being expected that the new developments of VR and AR in 2018 may bring more prospects to the immersive experience and can also be a game-changing revolution in digital marketing.Currently, AEM has the features to create, streamline, support and manage a consistent and immersive customer experience that will be soon extended to the Adobe Experience Cloud products. AEM comes with support for 3D assets, from which you can upload, create and render a 3D image. Also, AEM has structured content fragments and content services ability which enables export of content to phone app or Amazon Alexa. Adobe is also expected to soon integrate 360 assets to AEM dynamic media as well.
- Personalization:
The digital marketing and experience business will see some advanced features with regards to the personalization feature. As we all know that the personalization is the core of online business and it helps enterprises to target their current and potential customers.
With Adobe you have three major weapons to execute the Personalization process for every single user. The first one is with the AEM, second with the help of Adobe Target, and third is the combination of both i.e. AEM, Target and Analytics (Adobe analytics). AEM gives content creators an opportunity to create and manage experience content in the same tool. It also comes with Assets, Content Fragments, Experience Fragments etc. to provide a more personalized experience to the users. Adobe Target empowers marketers by helping them creating more advanced A/B testing and multivariance testing. It also has Adobe Sensei features that have Random Forest algorithm for automated personalization, to use Search & Promote for site search and e-commerce.
Also, it’s worth mentioning that Adobe has moved forward and is a step closer in the direction of omnichannel personalization. It has launched the Adobe Experience Manager 6.4 during the Adobe Summit 2018 and on the personalization front, the AEM 6.4 comes with the Smart Layouts powered By Adobe Sensei to give the personalized brand experience to the customers across all touch points.
If you have any questions regarding the AEM 6.4 and the ways in which it can transform your digital experience for your business, then do ask from us. Contact us today to discuss your current or next Adobe project at +1-847-592-2920
Use Case For i18n In AEM: Converting Components Language Based on User Preference
As an Author, at some point, you must have felt the agony of not having the language support other than English in the component’s fields. This becomes even more dire for the multinational organizations who have regional authors. Realizing this, AEM has come up with a unique feature ‘i18n’, enabling Internationalization of components and dialog’s so that the UI strings can be presented in different languages. Components that are designed for internationalization enable UI strings to be externalized, translated, then imported to the repository and on the basis of the user’s preference, the displayed language in the UI is determined. It’s worth mentioning that it has been named “i18n” because there are 18 characters between ‘I’ and ‘N’ in the word ‘INTERNATIONALIZATION’.
Developers at NextRow Digital has used this ‘i18n’ feature to change the component’s fields and the same is being presented below in the form of use-case to understand the enablement of the ‘i18n’ in AEM more profoundly.
Here, we want to add multiple languages to title and description component.
Step 1: Navigate to the component path which you want to be multilingual.
Step 2: Create a folder named ‘i18n’ under the component (here, it is ‘titleanddescription‘).
Step 3: Create a folder with name as language code (ISO code). For ex: En for English, de for German, for for French etc.
Step 4: Click on the ‘Mixins’ from the tool bar.
Step 5: Click on ‘+’ button in Mixins window and add ‘mix:language’ property and after that Click ‘OK’.
Step 6: Add ‘jcr:language’ property to the same ‘en’ node. And it’s value is the language code (ex: en)
Step 7: Create two nodes under ‘en’ node of type ‘sling:messageEntry’. Names of the nodes can be anything (preferably keep the FieldLabel names of the dialog), and later on we will use this same Name for configuring the component’s dialog.
In this case, I have created ‘training.title’ and ‘training.description’ to give more sense to the names because my component has two fields ‘title’ and ‘description’.
Step 8: Add ‘sling:message’ property with value. To recall, the value of respective language depends on the language node that you are in.
Here, as we are in ‘en’ node, writing the value as ‘Description’ in English. See below images for more understanding.
Here, I am in German(de) node. So, the value has ‘Description’ as ‘Beschreibung.
Step 9: Similarly, create the same folder structure from Step 6 to Step 8 for all the languages that you want to have for the component.
Step 10: Navigate to the component’s dialog fields and add values to the ‘fieldLabel’ property. Values are the node names under language folder.
Step 11: Navigate to the User Admin page(‘http://localhost:4502/useradmin’).
Search for the username for which you are logged in ( by default it is ‘admin’). Click on the Preferences tab and select the language from the drop-down that you want the component to be displayed in.
Step 12: Navigate to the page where your component is authored and click on ‘edit’ and here you can see that the field names are displayed in the language you have selected in user preferences. Here, I have selected display language as ‘French’.
Above, we have just presented a simple use case to understand working process of i18n (Internationalization) for AEM. Apart from this the ‘i18n’ can also be used by multi-national multi-lingual websites. These websites often use translation vendor for a page translation and they pay the vendors on the basis of word-by-word. In multi-national multi-lingual websites, there are always some labels/text-strings which remain same and because of this, it doesn’t make sense to have them translated with a translation vendor every time they send a page for translation. To tackle this issue of those websites, the AEM provides a separate in-built ‘i18n’ translator tool, where all these labels/text-strings and their translated content is stored and can be used as many times as required (Of course, without any payment). In conclusion, we can say that i18n is a powerful, versatile tool that comes with AEM to Internationalize your components and dialogs to display UI strings in different languages. If you have any query then do let us know, we would be more than happy to help.
NextRow Digital is a new age digital agency & an Adobe Business Solution Partner with many third party and Adobe Marketing Cloud implementations under its belt. For the years we have helped our clients meet their business needs successfully to overcome the challenges of digital transformation. To know more about us, visit our website. And if you require any of our services then let us know by sending mail at sales@nextrow.com or call directly and have a chat with our expert 1-847-464-8091.
Adobe Experience Manager 6.5 Major Highlighting Features
In the modern digital sphere, customer experience has become key for organizations and their brands to fuel and propel brand-customer interaction. Since its inception, Adobe Experience Manager has empowered organizations to innovate, optimize, and deliver content across all digital channels in a smarter and faster way. The latest Adobe Experience Manager 6.5, which was unveiled from the grand stage of the Adobe Summit 2019, has now been made available (April 2019) for the upgrade. There is a lot of buzz about the aem 6.5 new features and the stronger infrastructure included in the latest AEM to deliver the top-notch customer experiences.
Let’s have a look at some latest innovations, features, and enhancements included in it to help brands lead in Customer Experience Management.
- Magento & Experience Cloud integration:
This out of box integration was awaited since the acquisition of Magento by the Adobe in 2018. The integration has been made possible by the use of Adobe I/O Runtime. This Adobe I/O Runtime facilitates users with the ability to create custom microservices that can be consumed by any Adobe 3rd Party solutions. Also, many pre-built API connectors for Magento are shipped along with the latest Adobe Experience Manager 6.5. Apart from this, to understand the Magento integration better, AEM 6.5 is shipped with updated We.retail template along with e-commerce components - New Single Page Application (SPA) Capabilities:
AEM 6.5 addresses some of the challenges that come with the implementation of the single page application to deliver dynamic web experiences by including Single-Page Application (SPA) Editor. Also, the new SPA capabilities include the server-side rendering of client-side frameworks for enhanced page load and SEO purposes, along with integration with Adobe Target for personalization and Adobe Analytics for data and insights. Earlier, another biggest challenge for a SPA in a CMS was to allow marketers to author SPA content so that they continue to have a high content velocity. Adobe has addressed this issue in AEM 6.5 by introducing a JavaScript SDK that automatically recognizes SPA content and allows authors to edit the content as they would do with any traditional content. The new AEM 6.5 SPA Archetype automatically configures that SPA JavaScript SDK so that this doesn’t have to be done by the developer, which speeds up the implementation time. - Advanced Fluid Experiences:
Advanced Fluid Experience integration ensures the fast flowing of content across owned, earned and paid media channels. The unique combination of data and content in Adobe Experience Manager 6.5 helps brands to take customers on a variety of personalized journeys. Also, the marketers now have the ability to design, deliver and optimize experiences on digital displays in physical venues like – in-store screens or kiosks. The integration of Adobe Analytics has made it easy to optimize experiences by dynamically personalizing these signage content. - Advanced Integration of The Adobe Sensei To Experience Manager 6.5:
Previously, the integration of Adobe Sensei to AEM 6.4 has assisted users in customizing the design and content based on the individual customer preferences along with 360-degree view feature. Now powered by Adobe Sensei, the latest AEM 6.5 has been rolled out with some advanced features like – Smart Tagging of media assets, Visual Search, and Smart Crop. For understanding, with the help of Adobe Sensei, Smart Crop automatically identifies and crops the most significant part of a video or image to ensure that the most impactful part of the content is shown, irrespective of the size or orientation of the screen. Apart from this, the organizations using Adobe Managed Services for hosting will get new Autoscaling Services powered by Adobe Sensei in their Cloud Manager to automatically detect the increased demand and henceforth will generate the more online capacity to overcome that. - Integration with Adobe Creative Cloud:
The expectations to deliver personalized contents has made it mandatory for the brands to create streamlined and highly optimized contents for any digital channel. Earlier, AEM Assets users have experienced a high degree of resentment while integrating their AEM Assets implementations with their Creative Cloud applications. This issue has been resolved now by including Asset Link, which provides an AEM integration point and a Creative Cloud Custom Panel, allowing the creative users to see their entire AEM DAM in their Creative Suite. Now, creative users can easily browse the AEM DAM and reuse the assets without leaving creative applications such as – Photoshop, Illustrator, or InDesign.
- Staying in Sync With Connected Assets:
This improvement in AEM 6.5 is a huge benefit for large enterprise clients to simplify digital asset management across multiple instances. Often clients have multiple AEM Systems in their organization. There can be one instance of a centralized DAM and another for the website. This scenario can make it difficult to keep assets in sync across all the systems. The connected assets in AEM 6.5 allow AEM authors to see assets from other AEM instances when they are creating content. If any external asset is added, the local AEM instance will store a copy of the asset or refer to a remote asset and afterward a reference is added to the external system. - Advanced Security Along with Cloud Scale:
Today we live in a digital world which is highly fragile and prone to the hackers and so keeping this in mind the AEM 6.5 has been integrated with the SLA management, which is mandatory for the enterprise-grade security and architectural guidance. Apart from this, the various security levels are included for Sites, Assets, and Forms, to scale and adapt to the growing customer base of the organization. - Parallel Handling of Marketing, Creative, And IT Operations:
The integration of the new user interface has made it possible to work freely at marketing, creative, and IT operational level without causing hindrance to any other segment. Also, the Single-Page App (SPA) Editor helps you to use and collaborate with the latest front-end developer technologies and business associates for content. - Personalized Experience for The Customers:
The Adobe Experience Manager 6.5 comes with the Smart Layouts that has been powered By AI to give personalized brand experience to the customers. Based on the previous buying trends of the customer, the page automatically modifies the suggestions to suit them the best. Further, the use of Adobe Target helps to take personalization for the specific customer to the next level. - Seamless Upgrade To AEM 6.5:
We all know that last year Adobe introduced Cloud Manager as a continuous delivery pipeline for AEM code. Cloud Manager allows clients to deliver high-quality features and also simplifies the previously difficult process to upgrade to the latest version of AEM. To help more customers migrate to the latest version, Adobe is introducing frictionless updates for AEM via Cloud Manager. Starting with AEM 6.5, clients are empowered to easily upgrade their AEM version to ensure they have the most advanced, streamlined customer experience management tools. The automated workflow takes customers through several steps based upon Adobe’s best practices for upgrades.
Above we have discussed some of the important AEM 6.5 features, but the list doesn’t end here. To know more about AEM new 6.5 features or the ways in which it can transform your digital experience for your business, contact us today at +1-847-592-2926 or email at btallungan@nextrow.com. To know more about NextRow Digital and our services, visit us
NextRow Digital is a new age digital agency, and an Adobe Gold Partner, specializing in marketing cloud and technology implementations. With our extensive experience combined with a flexible, collaborative approach, we have helped clients meet their business needs successfully to overcome the challenges of the digital transformation and creating an omnichannel customer and e-commerce experiences.
AEM Upgrade: A Complete Playbook For Flawless Upgrade
In this digital age, organizations of all shapes and sizes are investing a lot on improving their overall customer experience. Keeping that in mind, Adobe constantly enhances Adobe Experience Cloud suite to empower marketers with the necessary tools to create and deliver amazing experiences. The foundation of many of those experiences relies heavily on Adobe Experience Manager, and like most platforms, Adobe annually updates its solutions with new features or existing features are enhanced to meet the expectations of evolving digital world. Hence, it’s imperative for organizations to upgrade AEM and avail the latest powerful features in store to deliver amazing omnichannel experiences to customers.
Though upgrading AEM to the latest version has some support from the Adobe, but the upgrade process may be a little challenging and often requires some specialized experience and knowledge to deploy everything smoothly. Also, proper planning is mandatory for upgrading any of the previous AEM, which includes – author training, writing test cases for the upgrade procedure, understanding the new changes around architecture, estimating LOE using AEM provided pattern detector and then finally creating a project plan. Further, the AEM Upgrade needs analysis and execution phases with key deliverables defined for each phase.
Considering the above complexities and problems faced while AEM Upgrade, I have put together this AEM playbook in an attempt to educate you, so you can establish clear goals and phases to upgrade AEM with little or no hiccups. Let’s discuss each and every step in some detail:
1.
Upgrade Overview:
The Upgrade process associated with AEM is a multi-step that often takes a few months to complete. The image below provides an overview of the different processes associated with an upgrade project.
| Planning For Upgrade | Author Training Plan | Develop A Test Plan | Identification Of Architectural Changes Required | Use pattern Detector To Estimate LEO | Prepare A Runbook | Build A Test Plan |
|---|---|---|---|---|---|---|
| Development & QA Requirements | Prepare A Dedicated Code Branch | Assess Usage Of Resource Resolver | Prepare A List Of Queries And Indexes | Enlist Customizations Needed For Update | Overlays Should Be Updated | |
| Maintenance Required For Pre-Upgrade | Make Sure To Have Efficient Resources | Take Backup Of Earlier Resources | Automated Analyzation Of Pre-Upgrade Maintenance | Disable Custom Login | Rotate Logs | |
| Procedure For Upgrade | Cease Authoring | Author Tier Should Be Updated | Segregate A Publish Instance | Upgrade Both Major & Additional Instances | Finalize The Upgrade | |
| Post Upgrade Inspection | Log Files Should Be Examined | Bundles Needs To Be Checked | Reinstall Backup Configuration | Determine Maintenance Tasks | Trouble-shooting Of Issues |
2.
Upgrade Scope and Requirements:
Before initiation of the upgrade, it is important to ensure that you are running a supported operating system, Java runtime, httpd and Dispatcher version. Also, upgrading components need to be accounted for in the project plan before upgrading AEM. The table below describes a list of areas that are impacted in a typical AEM Upgrade project.
| Areas Impacted During AEM Upgrade: | |
|---|---|
| Area Impacted | Description |
| JAVA Version | Every AEM version supports a specific range of JRE versions. If clients JRE version is lower than what is expected by new AEM version, then it needs to be updated. |
| Hardware | Running Pre-upgrade maintenance tasks and regular Maintenace tasks (post upgrade) requires a certain amount of heap memory and disk space. If current hardware doesn’t meet these requirements, then it needs to be updated. |
| Content Repository Migration | If AEM is being upgraded from version < 6.x, then content repository migration is a must. Earlier versions (< 6.x) of AEM used to run on CRX2 repository. AEM 6.1 onwards, content repository has been changed to Oak. |
| Repository Restructuring | Repository structure started changing from AEM 6.4 and is being continued in AEM 6.5 as well. It affects custom content. Though these restructuring duplicates content from their old location in repository to new location, but it needs a serious attention and any custom code referring to old location, needs to be updated, to fetch the content from new location. |
| Maven (POM) Updates | POM files need to be updated as well. POM files must reflect UBER jar version matching with upgraded AEM version and other dependencies versions. |
| Custom Application Code | Custom application code needs to be updated so that it refers to latest AEM Core APIs. Any deprecated AEM APIs need to be replaced with their alternate suggestive APIs. |
| Customizations of OOTB features | If any OOTB feature has been customized by client in previous AEM version, it may not work completely with upgraded AEM version. |
3.
Plan For Author Training:
There are many potential changes required to be introduced to the UI and user workflows during the AEM upgrade. It’s highly recommended to review the functional changes that have been introduced and create a plan to train your author teams to leverage them effectively. Make sure to note any changes to UIs or product features that are commonly used in your organization and after looking through what has changed in upgraded AEM, develop a training plan for your authors.
4.
Create A Test Plan:
Every organization’s implementation of AEM is unique and customized to meet their specific business needs. So, it’s important to determine all the customization made to the system and included in a test plan. The test plan empowers the QA process, which is performed on the upgraded instance. The exact production environment needs to be duplicated and testing should be performed on it after the upgrade to make sure all applications and the custom code still run as desired.
5.
Determine Changes Required For Architecture And Infrastructure:
While upgrading, you may need to upgrade other components in your technical stack such as the operating system or JVM. Also, it’s possible that due to changes in the repository, additional hardware may be required (this is for migrating from pre 6.x instances). Further, changes may be required for operational practices including monitoring, maintenance, and backup and disaster recovery processes.
6.
Assessing Complexity Associated With The Upgrade:
There are two steps involved to assess the complexity of the AEM upgrade. The first is the newly introduced Pattern Detector which is available to be run on AEM 6.1, 6.2 and 6.3 instances. It is the easiest way to assess the overall complexity of an upgrade in the form of reported patterns. The pattern detector report includes patterns for identifying unavailable APIs that are in use by the custom codebase. This test gives a fairly accurate estimate of what to expect during an upgrade for most cases.
The second and more comprehensive step is to perform an upgrade on a test instance that also includes some basic smoke testing. Also, the list of Deprecated and Removed Features should not only be reviewed for the version that you are upgrading to, but also for any versions between the source and target versions.
7.
Prepare An Upgrade and Rollback Runbook:
Though, Adobe has documented the basic process associated with upgrading an AEM instance, but, each organization’s network layout, deployment architecture, and customizations require tailored and fine-tuned procedure. Hence, it’s highly recommended to view all the documentation to construct a project-specific runbook that outlines the specific upgrade and rollback procedures. All instructions should be reviewed and taken into consideration with your system architecture, customizations, and downtime tolerance to determine the appropriate switch-over and rollback procedures that will be executed during the upgrade.
8.
Develop A Project Plan:
Based on the steps described above, a project plan covering the expected timelines for test, development efforts, training, and actual upgrade execution can be built.
A comprehensive project plan includes:
- Finalization of development and test plans
- Upgrading development and QA environments
- Updating the custom code base for AEM 6.5
- A QA test and fix cycle
- Upgrading the staging environment
- Integration, performance, and load testing
- Environment certification
- Go live
9.
Perform Development And QA:
We all know that the development and the testing process go hand in hand. During the customizations, the changes made while upgrade can make an entire section of the product unusable. There is the potential of discovering some new problems even after the redressal of the root issues by developers and testing teams. So, it’s better to keep track of these newly discovered issues in the upgrade runbook to make adjustments to the upgrade process. After testing and fixing, the code base should be fully validated and ready for deployment to the stage environment.
10.
Final Testing:
A final round of testing is highly recommended after the codebase has been certified by the QA team. Also, validation of the runbook on the stage environment must be followed by user acceptance, performance, and security testing. Finding and correcting issues before going live can help to prevent costly production outages. Apart from these, it is also important to perform performance, load and security tests on the system to understand significant changes to the underlying platforms on the new version of AEM.
11.
Performing the Upgrade:
Once the green signal has been received from all the stakeholders, the execution of runbook procedures should begin. The below image depicts the various steps to be taken into consideration while performing the final upgrade.
12.
Post Upgrade Support:
Many clients do ignore the importance of post go-live support. It is very critical to have enough resources planned out for post upgrade support to ensure minimal/zero disruption to your live site(s). If you hired a vendor for this upgrade, make sure to budget for post upgrade warranty/support period. If you do it with internal resources, make sure to allocate enough resources to address any issues identified on production.
As I mentioned earlier, no two upgrades are the same and there will be unique challenges you may have to work thru specific to your scenario. Having an experienced partner like NextRow Digital to help you guide thru and execute may prove critical differentiation factor between a successful or not-so-smooth upgrade.
NextRow Digital is an Adobe Silver Business Solution Partner, specializing in marketing cloud and technology implementations. We are awarded “AEM Specialization” by Adobe, recognizing us a formidable partner in AEM and Adobe Marketing Cloud space. We have a number of deployments and upgrades under our belt, including some for fortune 100 companies. Contact NextRow Digital today @ +1-847-592-2920 or info@nextrow.com, if you need help or assistance with AEM implementations or upgrades or AEM managed services
Disclaimer:
Any views or opinions represented in this blog are personal and belong solely to the blog owner and do not represent those of people, institutions or organizations that the owner may or may not be associated with in professional or personal capacity, unless explicitly stated. All content provided on this blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.
