The authoring environment of AEM provides various mechanisms for organizing and editing your content. The tools provided are accessed from the various consoles and page editors.

Managing your Site

The Sites console allows you to navigate and manage your website, using the header bar, toolbar, action icons (applicable for the selected resource), breadcrumbs and when selected, secondary rails (for example, timeline and references).

The actual appearance and handling is dependent on the device type you are using:

Note:

A mobile device is detected when the width is less than 1024px; i.e. also on a small desktop window.

Mobile device such as iPad

The assets browser completely covers the page being edited.

To add an asset to your page touch-and-hold the required asset, then move it towards the right - the assets browser will close to show the page again, where you can add the asset to the required component.

Desktop device

The assets browser is opened at the left side of the window.

To add an asset to your page click on the required asset and drag it to the required component or location.

If you need to quickly make a change to an asset, you can start the asset editor directly from the asset browser by clicking the edit icon shown next to the asset's name.

Content Tree

The Content Tree gives an overview of all of the components on the page in a hierarchy so you can see at a glance how the page is composed.

The Content Tree is a tab within the side panel (together with the components and assets browser). To open (or close) the side panel use the icon at the top left of the toolbar:

When you open the side panel it will slide open (from the left side). Select the Content Tree tab if necessary. When open you can see a tree view representation of your page or template, so that it's easier to understand how its content is structured hierarchically. Additionally on a complex page, it makes it easier to jump between components of the page.

A page can easily be composed of many of the same type of components, so the component tree displays descriptive text (in grey) after the name of the component type (in black). The descriptive text comes from common properties of the component such as title or text.

Component types will be shown in the user language, whereas the component description text comes from the page language.

Clicking the chevron next to a component will collapse or expand that level.

Clicking on the component will highlight the component in the page editor.

If the component you click in the tree is editable a wrench icon will appear to the right of the name. Clicking on this icon will directly start the edit dialogue for the component.

Note:

The Content Tree is not available if you are editing a page on a mobile device (if the browser width is less than 1024px).

Page Information

The Page Information (equalizer icon) opens a menu that also provides details about the last edit and the last publication. Depending on the characteristics of the page (and its site) more or fewer options might be available:

You can access these using the icons in the top right corner. The actual icon will change to reflect the mode you are currently using:

Note:

Depending on the characteristics of the page, some modes my not be available.

Access to some modes require the appropriate permissions/privileges.

Developer mode is not available on mobile devices due to space restrictions.

There is a keyboard shortcut (Ctrl-Shift-M) to toggle between Preview and the currently selected mode (e.g. Edit, Layout, etc).

Path Selection

Often when authoring it is necessary to select another resource such as when defining a link to another page or resource or selecting an image. To easily select a path, path fields offer auto-complete and the path browser allows for more robust selection.

Path Fields

The example used here to illustrate is the image component. For more information about using and editing components see Components for Page Authoring.

Path fields have auto-complete and look-ahead funtionality now to make locating a resource easier. Simply start typing in the path field and the AEM will offer matching paths as you type.

Clicking the Open Selection Dialog button in the path field opens the path browser dialog to allow for more detailed selection options.

Path Browser

The path browser is organized like the column view of the sites console, allowing for more detailed selection of resources.

Once a resource is selected, the Select button at the upper-right of the dialogue becomes active. Click or tap to confirm the selection or Cancel to abort.

If the context allows for the selection of multiple resources, selecting a resource also activates the Select button, but also adds a count of the number of selected resources to the upper-right of the window. Click the X next to the number to deselect all.

The breadcrumbs can be used to quickly jump within the resource hierarchy.

At any time you can use the search field at the top of the dialogue.

Click the X in the search field to clear the search.

To narrow your search, you can reveal the filter options and filter your results based on a certain path.