Usability Tip: Use Edit Bars instead of Roll-over Editing in Your Adobe AEM Project

The world’s worst developer, Joe Gunchy (read more about Joe here)  is at it again.  He created a new component to give content authors the ability to add rich text onto a page.  The content author loves this idea and wants to try it out.  They dragged the component onto the page, but there is no indication that the component is on the page and ready to edit.  The content author is confused, so they drag another component onto the page. Still, nothing shows up.

 

Where are the components?

 

They drag another onto the page, then another, then another.  Nothing is displayed. Now the content author has five instances of the component on the page that they don’t know about, forcing the content author to drink from a flask hidden in their bottom desk drawer.  Joe Gunchy laughs at the content author.  Joe Gunchy is an idiot.

 

“Content authors are so dumb.” – Joe Gunchy

 

Five instances of the component

Component Editing

There are a few ways to edit content in a component. Some components contain an “edit bar” to show the editor dialog, while some use “rollover” editing.  The component below shows an edit bar above the component with options to add, edit, but, copy, and paste. If you want to edit the content of the component, you click the “Edit” button which opens the editing dialog. Easy.

 

Edit Bar to launch the dialog

 

When there is no edit bar, the author must click on the component in the page until they see the green boundary box appear. This is referred to as “rollover editing”.  Once that’s selected, you can either double-click within the box or right-click to launch the dialog editor. Joe Gunchy’s component used ‘rollover’, but when there is no content in the component, there is no way to tell the component is on the page.  You can mitigate this in the component source code by checking to see if you’re in EDIT mode, then add some default text to the component to show it’s editable. Also, in many cases, it is difficult to click if you do not place your mouse at the precise point within the box to open the dialog, or even worse – components overlap each other and you can’t click them at all.

 

Roll-over editing (no Edit Bar)

 

Use the Edit Bar

For better usability and consistency across the editing experience,  use the Edit Bar on your components and never mix Edit Bar and Rollover on the page.  That’s a horrible authoring experience.  The Edit Bars below clearly show the author how to edit content on the page and when used exclusively, gives the author consistency when authoring a page.   It’s clean, has clear calls-to-action, and doesn’t require default text to know they’re on the page.  By adding a few options to the edit bar configuration, you can click on the “Cut” button and easily move them around the page.

 

To add the edit bar to your component, create an ‘cq:editConfig’ node of type cq:EditConfig under the component. This link shows the various properties to add to the component.  Adding cq:actions to the properties allows functionality to move the component around the page.

The table below from the CQ documentation shows the different options for the edit bar.

Property Value	Description
text:<some text>	Displays the static text value <some text>
–	Adds a spacer
edit	Adds a button to edit the component
delete	Adds a button to delete the component
insert	Adds a button to insert a new component before the current one
copymove	Adds a button to copy and cut the component

 

Here are some typical properties to allow editing, moving, and deleting the component from the page. You must have “insert” selected if you want to move the component around the page and replace it between two components.

 

 

Additional Tip: Remove the Wrapper

AEM adds wrapper containers around components to allow either clicking on the component on roll-over, or around the component tool bar when using the EDIT BAR. These additional DIVs tend to negatively impact the style of the component because of the extra container that the developer was not anticipating.

There is an easy way to force CQ to remove the wrapper when in any mode but EDIT mode.

Add the following snippet at the bottom of your component:

 <%
 //This code will only add the surrounding DIVs for the editbars when in EDIT mode only
 if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {
    IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);
 }
 %>