Download - UI Customization in AEM 6.0

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1

USER INTERFACE CUSTOMIZAT ION FOR AEM 6

P R E S E N T E D B Y

Damien Antipa

Gilles Knobloch

November 18th, 2014


Working on AEM/Granite/Coral and

wherever Javascript is used

4 years of AEM experience

Working on AEM/Granite/Coral

Architect of the Launches & Sling Resource Merger

Damien Antipa, Senior UX Engineer

Gilles Knobloch, Engineering Manager

@visiongeist

@gilknob


Introduction

New user experience introduced in 5.6.0

Challenges

- Extensible technology for partners/customers

- Guarantee upgradability

Goal of the session

Understand how to extend admin screens and page authoring


Extend

Admin screensCreate

Admin screens

Page

Authoring


Fundamental Concepts

- UI based on content nodes

- Sling Resource Merger

- Granite UI Include

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

/libs

/wcm

/core

/content

/siteadmin

…

6

How were you used to overlay?

/new-feature

/custom-feature

- All properties duplicated

- Blocking for upgrades

/apps/wcm/core/content/siteadmin

- Currently, need to copy

the whole subtree


/libs

/wcm

/core

/content

/sites

…

7

How does it work now?

/new-feature

/custom-feature

(/new-feature)

/apps/wcm/core/content/sites

- Extend within an

almost empty sub-

tree

- Only needed

nodes/properties need to

be overlaid


Sling Resource Merger

- Custom resource provider: /mnt/overlay

- Overlays of resources using resource resolver search paths

- Working as a diff

- Custom Sling vocabulary

Overall goal: override in /apps, never touch /libs

- Guarantees upgradability

- Easier debugging



Add or override a property

Create the corresponding node structure and property within /apps(the property will have priority based on Sling Resource Resolver configuration)

Changing the type of the property is supported



Hide one or more properties

Create the corresponding node structure and property within /apps,

Add sling:hideProperties property: list of properties to hide (String[])

* wildcard can be used to hide all properties



Hide a resource (and its children)

Create the corresponding node structure within /apps

Set sling:hideResource to true (Boolean)



Hide children of a resource (but keep the properties of the resource)

Create the corresponding node structure within /apps,

Add sling:hideChildren property: list of children to hide (String[])

* wildcard can be used to hide all children



Reorder resources

Create the corresponding node within /apps

Set sling:orderBefore to the name of the sibling where

that node should be reordered before (String)


Extend existing admin screen

Check our examples!

- Custom documentation links

(sling:hideChildren, sling:orderBefore)

- Additional toolbar action

- Restrict Create Site to administrators

(sling:hideProperties, custom rendering condition)

- Default layout to list view, removed toggle to card view

(sling:hideResource)


Create a custom admin screen

Launches Console

- Custom console

- Custom menu entry

- Specific actions



Root space

for Launches

console

Granite UI page resourcePage definition

Custom components (styles, scripts, JSPs)



Add in

navigationGive same ID as your console and point

to it

Specify location in the tree

Extend navigation


Granite UI Includes

granite/ui/components/foundation/include

Can be used to extend component dialogs

Avoid duplicating

same subtrees of

nodes

/apps/one /apps/two

/apps/commo

n

Specify path to

include


Page Authoring in AEM 6.0


Customer Page = ContentFrame

Editing Features = EditorFrame


:

21

Sidepanel

AssetGroups


Components


These are Editables


What is an Editable?

- is an instance of a component on a page

- allows access to the page’s HTML

- is aware of its JCR path and edit configuration

- the JCR node lives under the page’s “jcr:content”

- represented through a Javascript object


An Editable in Javascript

- All Editable’s of the current page are accessible

through Granite.author.store

- Constructor: Granite.author.Editable

- It is a central object for manipulation and retrieval

- Allows to add listeners (afterEdit, beforeDelete, beforeMove etc).

- Exposes the configuration of the component


These are Overlays


Toolbar


Inplace Editing


Layer


What is a layer?

- Bundles View/Rendering and Functionality

- Only 1 Layer is active

- Build-in layers: Edit, Preview, Annotate, Developer,

Target

- Have to play nicely with each other

- Defines a state of the Authoring User Interface

- Full control about the whole experience


Layer Switcher


- Toolbar action

- Inplace Editor

- Custom Layer

- Page action

Extending the Page Authoring

- Assetfinder Group

- Dialog Conversion


Before we start…

- Javascript Namespace: Granite.author

- Overlays are managed by Granite.author.overlayManager

- ClientLib category hook: cq.authoring.editor.hook

- Current page’s Editables are in Granite.author.store

- A lot of page data is in Granite.author.page


Custom toolbar action1


Still working: Adding custom actions to components

37

1


- Javascript implementation

- toolbar entry definition

- component independent actions

1 Add Toolbar Button


'CUSTOM': {

icon: 'coral-Icon--gear',

text: Granite.I18n.get('Custom'),

handler: function (editable, param, target) {

alert('my custom action');

// do not close toolbar

return false;

},

condition: function (editable) {

// optional condition to show action

return !!editable.config.orderable;

}

}

1


EXAMPLE: Adding a screenshot functionality1


Custom page action

41

2


2

/apps/wcm/core/content/editor/jcr:content/content/items/conte

nt/header/items/headerbar/items/myCustomButton


Inplace Editors3


Create a Hybrid Editor3


Creating a layer

- Important objects: layerManager, overlayManager,

persistence

- Inherit from Build-in layers like Edit

- Change the view and actions

4


- Adding a new asset group

51

Assetfinder

- Handling the Drag&Drop

Granite.author.dropController

- Handling the Persistence

Granite.author.edit.actions or

Granite.author.persistence

- Handling the rendering

Granite.author.ui.assetFinder

5


Dialog Conversion

- Console to convert Classic UI dialogs into Touch UI dialogsHelps to create the structure

ExtJS code needs to be migrated separately

- Plugin-basedContent nodes patterns

Implement OSGi service

6


Extend

Admin screens

Create

Admin screens

Page

Authoring

Wrap-up


Resources

- CRXDE Lite overlay extension tool on Package Share

- Official documentation: http://adobe.ly/1meXUn7

Customizing consoles and page authoring

- Examples on Github: http://github.com/Adobe-Marketing-Cloud

- CQGems recording: http://adobe.ly/1mwhsZZ

http://adobe.ly/1meXUn7

http://github.com/Adobe-Marketing-Cloud

http://adobe.ly/1mwhsZZ


Please give us feedback: http://adobe.ly/1pCZJ4h

Questions & Comments?

http://adobe.ly/1pCZJ4h

Download - UI Customization in AEM 6.0

Top Related