Customizing the Consoles (Touch-Optimized UI) Page 1 Customizing the Consoles (Touch-Optimized UI)

Customizing the Consoles (Touch-Optimized UI)
Customizing the Consoles (Touch-Optimized
UI)
Overview / Adobe Experience Manager / Adobe Experience Manager 6.0 / Developing / Extending AEM Features /
AEM provides various mechanisms to enable you to customize the consoles (and the page authoring
functionality) of your authoring instance (touch-optimized UI).
• Clientlibs
Clientlibs allow you to extend the default implementation to realise new functionality, while reusing the
standard functions, objects and methods. When customizing, you can create your own clientlib under /
apps; for example to hold the code required for your custom component.
• Overlays
Overlays are based on node definitions and allow you to overlay the standard functionality (in /libs) with
your own customized functionality (in /apps). When creating an overlay a 1:1 copy of the original is not
required, as the sling resource merger allows for inheritance.
These can be used in many ways to extend your AEM consoles. A small selection are covered below (at a
high level).
NOTE
For further information see:
• Using and creating clientlibs.
• Using and creating overlays.
• Granite
CAUTION
You must not change anything in the /libs path.
This is because the content of /libs is overwritten the next time you upgrade your instance (and
may well be overwritten when you apply either a hotfix or feature pack).
The recommended method for configuration and other changes is:
1. Recreate the required item (i.e. as it exists in /libs) under /apps
2. Make any changes within /apps
For example, the following locations within the /libs structure can be overlaid:
• consoles (any consoles based on Granite UI pages); for example:
• /libs/wcm/core/content
• secondary (inner) rails; for example:
• /libs/wcm/core/content/search
• toolbar(s) (dependent on console; for example sites):
• default
/libs/wcm/core/content/sites/jcr:content/body/content/header/items/default
• selection mode
/libs/wcm/core/content/sites/jcr:content/body/content/header/items/selection
• help menu options (dependent on console; for example sites):
• /libs/wcm/core/content/sites/jcr:content/body/help
• information shown on the card view (dependent on console; for example sites):
• /libs/wcm/core/content/sites/jcr:content/body/content/content/items/childpages
CODE SAMPLES
Various packages have been made available on Github. These provide code samples related to the tasks
covered on this page.
aem-admin-extension-new-console
aem-admin-extension-new-console is a sample package showing how to create a new AEM 6 console. This
package provides a UI for managing Launches and adds a link in the navigation:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 1
Created on 2014-11-11
Customizing the Consoles (Touch-Optimized UI)
aem-admin-extension-customize-sites
aem-admin-extension-customize-sites is a sample package showing how to customize an existing AEM 6
admin console. This package provides updates to Sites administration:
CREATE A CUSTOM CONSOLE
1.
You can create a custom console with related actions; for example, Launches:
This involves:
• creating the root space definition of your new console; for example:
• /apps/<yourProject>/admin/ext/launches
• this can contain (according to requirements):
• the corresponding clientlibs for custom actions and less/css definitions
• /apps/<yourProject>/admin/ext/launches/clientlibs
• components that need to be redefined/adjusted; for example, the breadcrumbs, datasource
and the launch
• /apps/<yourProject>/admin/ext/launches/components
• the Granite UI page resource:
• /apps/<yourProject>/admin/ext/launches/content/jcr:content
property: sling:resourceType
• the page definition of the console
• /apps/<yourProject>/admin/ext/launches/content/jcr:content/head
• /apps/<yourProject>/admin/ext/launches/content/jcr:content/body
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2014-11-11
Customizing the Consoles (Touch-Optimized UI)
To use the new console (for example in the rail for navigation) an ID is used, so that it can be explicitly
referenced. The ID is used to connect the console and its navigation definition. The ID is defined in the
rail node of the page; for example, for the Sites console:
• the rail node is:
/libs/wcm/core/content/sites/jcr:content/body/rail
• here the currentId property is defined:
currentId = cq-sites
For the Launches console example:
• the node is:
• /apps/<yourProject>/admin/ext/launches/content/jcr:content/body/rail
• with the following properties:
• currentId = cq-launches
• sling:resourceType = granite/ui/components/endor/navcolumns
• srcPath = cq/core/content/nav
ADD NEW NAVIGATION OPTION TO RAIL
1.
You can add a navigation entry in the rail (for example, a custom console such as Launches).
To do this, you create an overlay of:
/libs/cq/core/content/nav
In the /apps overlay:
/apps/cq/core/content/nav
Create the new nodes and properties:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2014-11-11
Customizing the Consoles (Touch-Optimized UI)
•
•
•
Extend navigation:
• /apps/cq/core/content/nav/launches
Specify location in the tree:
• property: sling:orderBefore
To create the connection, the id property references (i.e. must be the same as) the currentID
property for the appropriate console:
• property: id
• value: same as for your console (e.g. cq-launches)
for example: the same value as the currentId property on:
/apps/<yourProject>/admin/ext/launches/content/jcr:content/body/rail
ADD NEW ACTION TO THE TOOLBAR
1.
You can build your own components and include the corresponding client libraries for custom actions.
For example, a Promote to Twitter action at:
/apps/wcm/core/clientlibs/sites/js/twitter.js
This can then be connected to a toolbar item on your console:
/apps/<yourProject>/admin/ext/launches
For example, in selection mode:
content/jcr:content/body/content/header/items/selection/items/twitter
RESTRICT A TOOLBAR ACTION TO A SPECIFIC GROUP
1.
2.
3.
You can use a custom rendering condition to overlay the standard action and impose specific
conditions that must be fulfilled before it is rendered.
For example, create a component to control the renderconditions according to group:
/apps/myapp/components/renderconditions/group
To apply these to the Create Site action on the Sites console:
/libs/wcm/core/content/sites
Create the overlay:
/apps/wcm/core/content/sites
Then add the rendercondition for the action:
jcr:content/body/content/header/items/default/items/create/items/createsite/rendercondition
Using properties on this node you can define the groups allowed to perform the specific action; for
example, administrators
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2014-11-11
Customizing the Consoles (Touch-Optimized UI)
RENAMING A RAIL ENTRY
1.
2.
You can rename a navigation entry in the rail by overriding:
/libs/cq/core/content/nav/sites/jcr:title
Depending on how you want to configure your instance, you might want to consider the impact on:
• The title as used in the toolbar:
/libs/wcm/core/content/sites/jcr:content/body/title/rootTitle
• The tab title in the window:
/libs/wcm/core/content/sites/jcr:content/jcr:title
• The entry in the breadcrumbs
/libs/wcm/core/content/sites/jcr:content/body/breadcrumbs/rootTitle
REMOVE ACCESS TO NAVIGATION OPTION ON RAIL
1.
Open the user and/or group management and select the user/group you want to restrict access for.
NOTE
Avoid assigning/restricting permissions on a user-by-user basis. It is recommended to
use groups.
2.
Remove access permissions to the appropriate node(s) under /libs/cq/core/content/nav/sites. These
correlate to the navigation options in the rail:
• projects
• sites
• apps
• publications
• forms
• assets
• communities
• commerce
• tools
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2014-11-11