Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Interface

Customisation
in AEi/ i 6.1

Andreea Sandru T '— Christian Meyer
A
‘ ,  

(d>pudelyna (amartinischeery

Ad...
Aboutus

Andreea Miruna Corbeanu
Software Engineer,  AEM Sites
Site Admin,  Granite Ul

Christian Meyer
Software Engineer,...
User Interface Customisation

AEM projects require customization ofthe UI
Extension points are available in the product

L...
Agenda

Extending Component Dialogs
Customizing Page Properties

Customizing Search Forms

f-.7

Adobe
Extending Component Dialogs

Adobe
Extending Component Dialogs

’.  cqzdialog
; r 3 content
Before AEM 6.1 I.  layout
_-_I ’.  items
Add a field to the Image...
Extending Component Dialogs

 
 

New in AEM 6.1
' cq: dialog
Add a field to the Image dialog?  ;l - content
; I ‘ items
1...
Sling Resource Merger

_ ; | _, lapps
Introduced in AEM 6.0 : , , c,, 
;|  «COVE
—I . content

J Customize* out of the box...
Sling Resource Merger

: | ',  oq: dialog
New in AEM 6.1 : ' r°°"‘°"‘
: _l ;  items
; i utabs
J Customize* out of the box ...
Sling Resource Merger

: > Search path—based merge

resourceReso1ver. getResource(“/ mnt/ overlay/ “ + re1ativePath)

: > ...
Extending Component Dialogs

I.  Always start by creating node skeleton of the part to redefine
(subtree of nt: unstructur...
Customizing Page Properties

Adobe
Different views

Create Page Wizard
Edit Page Properties

Bulk Edit Page Properties

l-G

Adobe
Create Page Wizard

TTTTTTTTTT gs

More Titles and Description

RS1
0”
G

fb4‘l
Edit Page Properties

ttttttttttttttttttttttttttt on

E31
°’V
G

fb4‘l
Bul| < Edit Page Properties

Title and Tags

aaaaaaa I

More Titles .1 nnnnnnnnnnn on

E31
°’V
G

fb4‘l
Common definition

; I  page
; I  analytics
; :  analytics. google. jsp
:1  body. jsp
:1  body. portlet. jsp
~i .  oq: dia...
Customizing Page Properties

Use flags to control rendering of nodes for a given view

- cq: showOnCreate {Boolean}
- cq: ...
Demo

Customize Page Properties views
- Reorder “Title" field before “Name" field
- Only keep a subset of fields in "Creat...
Customizing Search Forms

E31
0”
G

fb4‘l
Customizing Search Forms

Out of the box reusable Search Predicates

Leverage Sling Resource Merger overlays

M

Adobe
AA

in

I]

ll

Customizing Search Forms

Title

Page Editor (Paragraphs search)
Page Editor (Documents search)
Sites Admi...
What is a Search Predicate? 

Wraps Granite UI component
Backed by AEM Search API
Contains a lavaScript client library

- ...
Make a custom predicate
available for customization

 

Search Predicate Predicate field <—:  Rendering resource

  
  
 

...
Adding custom predicate
by drag and drop

Customize search facets

Selcd Predicate

Fulltext Predicate

I
A Page Status Pr...
Demo

- Customize the Page Authoring Side Panel Asset Search

- Customize the Side Admin Search Rail

l-G

Adobe
Summary

Extending Components Dialogs

Override as a diff
Use sling: hideResource,  sling:  hideProperties,  sling: order‘...
Resources

Documentation

htt s: //docs. adobe. com/ docs/ en/ aem/6-1/develo /  latform/ slin —resource-mer er. html

htt...
Thankyou! 

Any questions? 

3.31
O”
G

fb4‘i
Upcoming SlideShare
Loading in …5
×

EVOLVE'15 | Enhance| Christian Meyer & Andreea Sandru | AEM User interfacecustomization

Presented at 3|SHARE's EVOLVE'15 - The Adobe Experience Manager Community Summit on August 18th, 2015 at the Hard Rock Hotel in San Diego, CA. http://evolve.3sharecorp.com

EVOLVE'15 | Enhance| Christian Meyer & Andreea Sandru | AEM User interfacecustomization

  1. 1. User Interface Customisation in AEi/ i 6.1 Andreea Sandru T '— Christian Meyer A ‘ , (d>pudelyna (amartinischeery Adobe
  2. 2. Aboutus Andreea Miruna Corbeanu Software Engineer, AEM Sites Site Admin, Granite Ul Christian Meyer Software Engineer, AEM Sites Page Authoring, Granite Ul M Adobe
  3. 3. User Interface Customisation AEM projects require customization ofthe UI Extension points are available in the product Let's learn how to use them! F-G Adobe
  4. 4. Agenda Extending Component Dialogs Customizing Page Properties Customizing Search Forms f-.7 Adobe
  5. 5. Extending Component Dialogs Adobe
  6. 6. Extending Component Dialogs ’. cqzdialog ; r 3 content Before AEM 6.1 I. layout _-_I ’. items Add a field to the Image dialog? =‘ °°'“"‘" ; | ’. items ’. file 1. Extend Image component », we 3 alt s1ing: resourceSuperType= 3 "nkURL “foundation/ components/ image” zdescripfion A _ _—_l '1 size 2. Provide complete dialog structure i, width (= > copy/ paste + add new field) ii“ , ,e, gm_A E“ extrafield_ l #. F1" Adobe
  7. 7. Extending Component Dialogs New in AEM 6.1 ' cq: dialog Add a field to the Image dialog? ;l - content ; I ‘ items 1. Extend Image component : I ' Column _-_I ' items s1ing: resourceSuperType= - ext, -afieidl “foundation/ components/ image” 9- - 2. Provide dialog diff only R7 Adobe
  8. 8. Sling Resource Merger _ ; | _, lapps Introduced in AEM 6.0 : , , c,, ;| «COVE —I . content J Customize* out of the box UI —I », nav :1 , extrasection Adds an extra section in the left X Extend* component dialogs nowgot/ .0”/ .n AEM (*) By providing the diff only , _ A ‘ Adobe
  9. 9. Sling Resource Merger : | ', oq: dialog New in AEM 6.1 : ' r°°"‘°"‘ : _l ; items ; i utabs J Customize* out of the box UI : ' V’ °°"f'"" ; I inems : I ‘. extrafield ‘/ Extendae Component dialogs Adds an extra field to the inherited dialog (*) By providing the diff only , _ 1"‘ Adobe
  10. 10. Sling Resource Merger : > Search path—based merge resourceReso1ver. getResource(“/ mnt/ overlay/ “ + re1ativePath) : > Resource type hierarchy—based merge resourceReso1ver. getResource(“/ mnt/ override/ “ + abso1utePath) Used in Touch—optimized UI to J Allow customization of the product UI J Allow cq : dialogs extension l-G Adobe
  11. 11. Extending Component Dialogs I. Always start by creating node skeleton of the part to redefine (subtree of nt: unstructured nodes, without properties) 2. Then, only provide the "diff" - Add a node? => simply add it with its properties - Add a property? => simply add the property - Update a node? => simply add changed properties - Reordera node? => use sling : orde rBefore= “nodeName” - Remove a node? => use sling: hideRes0u rce= t rue - Remove a property? => use sling: hideProperties= [“propertyNanie”] F v- , I 1"‘ Adobe
  12. 12. Customizing Page Properties Adobe
  13. 13. Different views Create Page Wizard Edit Page Properties Bulk Edit Page Properties l-G Adobe
  14. 14. Create Page Wizard TTTTTTTTTT gs More Titles and Description RS1 0” G fb4‘l
  15. 15. Edit Page Properties ttttttttttttttttttttttttttt on E31 °’V G fb4‘l
  16. 16. Bul| < Edit Page Properties Title and Tags aaaaaaa I More Titles .1 nnnnnnnnnnn on E31 °’V G fb4‘l
  17. 17. Common definition ; I page ; I analytics ; : analytics. google. jsp :1 body. jsp :1 body. portlet. jsp ~i . oq: dialog I oq: infoProviders ‘ _j dialog :2 experienceinfo. json. jsp ; : feed. jsp ; I feedentry. jsp Page properties Fields of Page component ; dialog l-G Adobe
  18. 18. Customizing Page Properties Use flags to control rendering of nodes for a given view - cq: showOnCreate {Boolean} - cq: hideOnEdit {Boolean} - allowBulkEdit {Boolean} l-G Adobe
  19. 19. Demo Customize Page Properties views - Reorder “Title" field before “Name" field - Only keep a subset of fields in "Create Page Wizard" - Allow “Title" field to be bulk edited l-G Adobe
  20. 20. Customizing Search Forms E31 0” G fb4‘l
  21. 21. Customizing Search Forms Out of the box reusable Search Predicates Leverage Sling Resource Merger overlays M Adobe
  22. 22. AA in I] ll Customizing Search Forms Title Page Editor (Paragraphs search) Page Editor (Documents search) Sites Admin Search Rail Page Editor (Scene? search) Page Editor (Image search) Page Editor (Video search) M Adobe
  23. 23. What is a Search Predicate? Wraps Granite UI component Backed by AEM Search API Contains a lavaScript client library - r‘esetSear‘chFilter‘s event - loadSavedQuery event M Adobe
  24. 24. Make a custom predicate available for customization Search Predicate Predicate field <—: Rendering resource Properties Rep’ cation Consdc 8t. ‘:1 Info ame - Value 1 ieldLabe| esigns 2 l"ieldPropResourceType oqlgui/ oomponents/ siteadminladrnin/ searchpanel/ predicatefieIds/ designpredicatefield 3 I'ieldResourceType cq/ guI/ oomponents/ siteadmin/ adminlsearchpanel/ searchpredicatesldesignpredicate 4 fieIdTitIe Design Predicate 5 fit. -ldViewResourceType String granlie/ uI/ oomponents/ ioundation/ iorm/ pathbrowser 6 jcr: primaryType Name nt: uns'. ructurc-d 7 renderTypo String text Adobe
  25. 25. Adding custom predicate by drag and drop Customize search facets Selcd Predicate Fulltext Predicate I A Page Status Predicate 9 Page Status Predicate Date Range Predicate Hidden filter / content" : requestPathlnio. suiiix} ’ Analvtics Predicate Adobe
  26. 26. Demo - Customize the Page Authoring Side Panel Asset Search - Customize the Side Admin Search Rail l-G Adobe
  27. 27. Summary Extending Components Dialogs Override as a diff Use sling: hideResource, sling: hideProperties, sling: order‘Before Customizing Page Properties Extend Page Component Dialog Use cq: showOnCreate, cq: hideOnEdit, allowBulkEdit flags Customizing Search Forms Create a new custom search predicate Use the predicate in Site admin search rail Configure existing search predicates for Page Authoring side panel Adobe
  28. 28. Resources Documentation htt s: //docs. adobe. com/ docs/ en/ aem/6-1/develo / latform/ slin —resource-mer er. html httgs: //docs. adobe. com/ docs/ en/ aem/6-1/develop/ extendinglcustomizing—page-grogertieshtml htt s: //docs. adobe. com/ docs/ en/ aem/6-1/administer/ o erations/ search—forms. html Code samples https: //github. com/ Adobe-Marketing-Cloud/ aem-sites-extension-seardi-predicate https: //githubcom/ Adobe-Marketing-Cloud/ aem-authoring-extension-page-dialog https: //github. com/ Adobe-Marketing-Cloud/ aem-authoring-extension-assetfinder-flickr/ tree/6.1 Slides htt : www. slideshare. net martinischee aem-61-user-interface—customisation M
  29. 29. Thankyou! Any questions? 3.31 O” G fb4‘i

×