You are on page 1of 22

New Features and Functions:

AEM Sites Author


Touch-optimized Authoring
Experience Manager 6 introduces a touch optimized experience authoring user interface. This allows content editors
to leverage tablets and computers with touch screen to efficiently compose experiences. The improved editors include
in-place text and image editing.
Touch-optimized UI - A Console
The Sites console of the touch-optimized UI allows you to navigate and manage your website, using the header bar,
navigation rail, toolbar, action icons (applicable for the selected resource) and when selected, secondary rails (for
example, references, timeline and search):

Touch-optimized UI - Page Authoring


You can edit a page with the touch-optimized UI, using (for example) the component browser:

CONTENT INSIGHT
Content Insight provides information about page performance using web analytics and SEO recommendations. Use
Content Insight to make decisions about how to modify pages, or to learn how previous changes have changed
performance. For every page that you author, you can open Content Insight to analyse the page.
AEM brings in interesting information to help a content author create better content. Content Insight brings charts
about how your content is doing on the site or it could be a list of recommendations from third party providers. These
providers (like BrightEdge) can seamlessly integrate with AEM when enabled.
How to access content insight:

APP AUTHORING
Creating a Mobile Application
The following procedure uses the Touch UI to create a mobile application.

1. On the rail, click Apps.

2. Click or tap the Create icon.

3.

(Optional) On the Advanced tab, provide a description for the application,


and change the server URL if required.

4. (Optional) If you are using PhoneGap Build to compile the application, on the
Build tab, select the Configuration to use.

5. To create a PhoneGap build configuration, click Manage Configurations.

6. (Optional) If you are using SiteCatalyst to track application activity, on the


Analytics tab, select the configuration to use.To create a Mobile App
onfiguration, click Manage Configurations.

7. (Optional) To provide an application icon, click the Browse button, select the
image file from your file system, and click Open.

8. Click Create.

DIGITAL ASSET MANAGEMENT (DAM)


Metadata and search enhancements

Search made easier. Enhancements in metadata management and search allow


power users and end users of digital asset management to work more efficiently,
and customize system behavior in these areas through UI. Bulk metadata editing,
automated metadata assignments upon ingestion, smart collections / saved
searches, and defining metadata forms for assets and faceted search are all
available with optimized UIs
Metadata Schema Editor: Ability to customize the metadata based on an asset type
Metadata Processing Profile: Ability to apply predefined meta data to assets that are
uploaded in a folder

AEM Sites Architecture and Oak


Jackrabbit Oak is an effort to implement a scalable and performant hierarchical content repository for
use as the foundation of modern world-class web sites and other demanding content applications.

WHY OAK
Jackrabbit 2.x is a solid and feature-rich content repository that works well especially for the needs
of traditional web sites and integrated content management applications. However, the trends in
user expectations (especially for personalized, interactive and collaborative content), application
architectures (distributed, loosely coupled, multi-platform solutions with lots of data) and hardware
design (horizontal rather than vertical scaling) have rendered some of the original Jackrabbit
design decisions (which date back almost a decade) obsolete and there is no easy way to
incrementally update the design.
Jackrabbit Oak aims to implement a scalable and performant hierarchical content repository for
use as the foundation of modern world-class web sites and other demanding content applications.
The repository should implement standards like JCR, WebDAV and CMIS, and be easily
accessible from various platforms, especially from JavaScript clients running in modern browser
environments. The implementation should provide more out-of-the-box functionality than typical
NoSQL databases while achieving comparable levels of scalability and performance.

With AEM 6.0 the content repository is based on OAK (Jackrabbit3, JSR283
(JCR2.0) specification):
Main objectives of new Oak content repository:
Enhance scalability

Better support for big repositories

Multiple distributed cluster nodes for high availability

Improve Performance

Improve Performance

Parallel writes

Write performance

Support for many child nodes and ACLs

The Oak MicroKernel API provides the layer for actual storage of content. Currently, there
are two Microkernel implementations available in AEM6:
TarMK and MongoMK
The TarMK (default) uses tar files as storage and in MongoMK the repository is kept
in Mongo DB.

AEM forms
1 INTRODUCTION TO AEM FORMS
AEM forms extends engaging web and mobile experiences to enterprise forms and
documents, allowing organizations to complete complex digital interactions while
improving user experiences and extending business reach.
AEM forms includes authoring, managing, and publishing of forms with workflow and
correspondence capabilities.
Adobe Experience Manager (AEM) provides an easy-to-use solution to create,
manage, publish, and update complex digital forms while integrating with back-end
processes, business rules, and data.
AEM forms combine form authoring, management, and publishing along with
correspondence capabilities, document security, and integrated analytics to create

engaging end-to-end experiences. Designed to work across web and mobile


channels, AEM forms can be efficiently integrated into your business processes,
reducing paper processes and errors while improving efficiency.
AEM forms leverages and extends the capabilities of your existing investments in
XFA forms and Adobe LiveCycle solution

2 INSTALLING AND CONFIGURING AEM FORMS


In AEM QuickStart, you are limited to the following capabilities of AEM forms:

Creating and Managing Adaptive Forms (without XFA-based templates)


Using Forms Portal components to List adaptive forms on a Web Page
Using Forms Manager to create and Manage adaptive forms
Submiting forms and handling AEM workflows

Install AEM forms add-on package to enable the following capabilities of AEM forms:

Support for XFA-based form Template-based Adaptive Forms


Support to manage and use XFA-based forms in AEM forms UI, forms portal
components, and adaptive forms.
Connectors to integrate Enterprise Content Management systems (ECMs)
with forms workflow engine.
Adobe EchoSign integration
Adobe Analytics integration
Document services API, which includes:
1. Forms service
2. Output service
3. Assembler service
4. Doc Assurance service, which includes:
5. Signatures service
6. Certification service
7. Reader Extension service

3 AUTHORING AEM FORMS


Create an adaptive form based on an XFA Form Template
Follow these steps to create an adaptive form.
1. Access AEM forms Author instance at http://[server]:[port]/<custom-contextif-any>.
2. Enter your credentials on the AEM login page. On the left panel, click the
Forms link.
Note: For a default installation, the login is admin and the password is admin.

3. Click and select Create adaptive form.

4. The available templates are displayed. Click a template to select it and click
Next.
Note:To get the complete template package including advanced templates,
install the AEM forms package. For more information, see AEM forms package.

5. Enter a name, title, and description for the form

6.

In the Add Properties tab, select the Form Model tab.

7. Select a form template from the list of forms displayed in Forms Manager.
Associate XFA Form Template with an Adaptive Form

8. Click Create.

When you open the adaptive form in editing mode, you can access the form
template components in the Content Finder, from the adaptive form data model tab.
From this tab you can drag-and-drop the XFA form components in to your adaptive
form.

4 CREATING A CUSTOM ADAPTIVE FORM TEMPLATE


An Adaptive Form template is specialized AEM Page Template, with certain
properties and content structure that is used to create Adaptive Form. The template
has preconfigured layouts, styles, and basic initial content structure.
Once you create a form, any changes to the original template content structure are
not reflected in the form.
Perform the following steps to create a custom template, such as
trainingFromTemplate.

Navigate to CRXDE Lite on your authoring instance.

Under the /apps directory, create the folder structure for your application. For
example, if the application name is training, create a folder with this name.
Typically, the application folder contains components, configuration,
templates, src, and installation directories. For this example, create the
components, configuration, and templates folders.

Navigate to the folder /libs/fd/af/templates.


Copy the simpleEnrollmentTemplate node.
Navigate to the folder /apps/training/templates. Right-click it and select
Paste.
If necessary, rename the template node you copied. For example, rename it
as from-template.

Navigate to the location /apps/training/templates/form-template/jcr:content.

Modify the jcr:title and jcr:description properties for the jcr:content node to
distinguish the
template from the template you copied.

The jcr:content node of the modified template contains the guideContainer


and guideformtitle components. guideContainer is the container that holds
the adaptive form. The guideformtitle component displays the application
name, description, and so on.

Instead of guideformtitle, you can include a custom component or the parsys


component. For example, remove guideformtitle, and add a custom
component or the parsys component node. Ensure that the
sling:resourceType property of the component references the component and
the same is defined in the page component.jsp file.

Navigate to the location /apps/training/templates/form-template/jcr:content.


Open the Properties tab and change the value of the cq:designPath property
to /etc/designs/trainingdesign.
Now create a /etc/designs/trainingdesign node for the cq:Page type.

Create an adaptive form page component:

Modify the value of the property sling:resourceType for


/apps/mycompany/templates/enrollment-template/jcr:content to
/apps/training/components/page/formpage.
Copy the node /libs/fd/af/components/page/base to the folder
/apps/mycompany/components/page.
Rename the copied component to formpage.
For the formpage node, set value of the property sling:resourceSuperType
to training/components/page/contentpage. The contentpage component is
the base page component for your site. Other page components can
extend it. Remove script files under formpage, except head.jsp,
content.jsp, and library.jsp. The sling:resourceSuperType component,
which is contentpage in this case, includes all such scripts. Headers,
including navigation bar and footer are inherited from the contentpage
component.
Open the file head.jsp.

The JSP file contains the line <cq.include script="library.jsp"/>.

The library.jsp file contains the guide.theme.simpleEnrollment client


library, which contains the styling for the adaptive form.

The page component formpage has an exclusive head.jsp file that


overrides the head.jsp file of the contentpage component.

Include all scripts in the head.jsp file for the contentpage component to
the head.jsp file for the enrollmentpage component.

In the content.jsp script, you can add additional page content or


references to other components that are included when a page renders.
For example, if you add the custom component applicationformheader,
ensure that you add the following reference to the component in the JSP
file:

<cq:include path="applicationformheader"
resourceType="training/components/applicationformheader"/>

Similarly, if you add a parsys component in the template node structure,


also include the custom component.

5 AEM SIGHTLY BRACKETS EXTENSION

Sightly is the new HTML templating system introduced with Adobe Experience
Manager 6.0. The AEM Sightly Brackets Extension provides a smoother development
workflow for writing AEM components, offering several features like:

Sightly syntax-highlighting;
code-completion for Sightly expressions, data-sly-* block elements and UseAPI Java objects;
bidirectional synchronisation.

HOW TO INSTALL THE AEM SIGHTLY BRACKETS


EXTENSION
1. Open Brackets. In menu File, select Extension Manager

2. Enter sightly in the search bar and look for the AEM Sightly Brackets
Extension.

3. Click Install.
4. Restart Brackets when asked.

WORKING WITH THE AEM SIGHTLY BRACKETS


EXTENSION
THE CONTENT-PACKAGE PROJECT
After the extension has been installed, you can start developing AEM components
by either opening a content-package folder from your file system with Brackets or
by creating the structure for one from within the editor.
The project has to contain at least: 1. a jcr_root folder (e.g. myproject/jcr_root) 2.
a filter.xmlfile (e.g. myproject/META-INF/vault/filter.xml); for more details about the
structure of thefilter.xml file please see the Workspace Filter definition.

SYNCHRONISATION SETTINGS
In order to synchronise your content to and from an AEM server you need to define
your Synchronisation Settings. This can be done by going to Sightly > Project
Settings... The menu entry can also be accessed through shortcuts: -Shift-P on a
Mac or Ctrl-Shift-P on a PC.

The Synchronisation Settings allow you to define:


1. the server URL (e.g. http://localhost:4502)
2. the username used for synchronising content
3. the user's password
The settings will be saved in your project's root folder, in the .brackets.json file,
e.g.myproject/.brackets.json. We don't recommend saving this file in your SCM
system.

SYNCHRONISING CONTENT
The AEM Sighly Brackets Extension provides two types of content synchronisation.

1. Automated synchronisation for HTML, JavaScript, CSS and


.content.xml files; provided that the remote path of the files you are editing
is allowed to be synchronised by the filtering rules defined in filter.xml, these
files will be synced to the AEM server on-save; for .content.xmlfiles their
parent folders will be synchronised.

2. On-demand bidirectional synchronisation


through the Project Explorer contextual menu entries - Export to Server or Import
from Server - if the selected entry belongs to the jcr_root folder

full content-package synchronisation through the Sightly top-level menu, by


selecting either:
Export Content Package - -Shift-E on a Mac, Ctrl-Shift-E on a PC
Import Content Package - -Shift-I on a Mac, Ctrl-Shift-I on a PC

The AEM Sightly Brackets Extension adds a notification icon on the main toolbar, in
the bottom right corner of the Brackets window. After a synchronisation operation is
performed the notification icon's colour changes to indicate the synchronisation
status:
green - all files have been synchronised successfully
yellow - some of the files were not synchronised successfully
red - none of the selected files were synchronised

blue - a sync operation is in progress


Hovering with your mouse cursor above the notification icon will make a tooltip
appear with a summary of the last synchronisation operation.
Clicking on the notification icon will open the Synchronisation Status report dialog,
offerring more detailed information about each file from the content tree you
synchronised.

The AEM Sightly Brackets extension also supports .vltignore files for excluding
content from synchronising to and from the repository .

You might also like