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.
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).
For example, card view:
You can edit a page with the page editor. For example:
The first time you open a page for editing, a series of slides will provide you with a tour of the features.
You can skip the tour if wanted and repeat it at any time by selecting from the Page Information menu.
When editing a page, Help can be accessed from:
- the Page Information selector; this will show the introductory slides (as shown the first time you access the editor).
- the configuration dialog for specific components (using the ? icon in the dialog toolbar); this will show context sensitive help.
The components browser shows all components that are available for use on your current page. These can be dragged to the appropriate location, then edited to add your content.
When you open the side panel it will slide open from the left side (select the Components tab if necessary). When open you can browse through all the components available for your page.
A mobile device is detected when the width is less than 1024px. This can also be the case for a small desktop window.
The component browser is opened at the left side of the window.
To add a component to your page click on the required component and drag it to the required location.
Components are represented by
- Component name
- Component group (in grey)
- Icon or abbreviation
- Standard components' icons are monochrome.
- Abbreviations are always the first two charaters of the component name.
From the top toolbar in the Components browser you can:
- Filter components by name.
- Limit the display to a specific group using the drop down selection.
For a more detailed description of the component, you can click or tap the information icon next to the component in the Components browser (if available).
For even more information about the components available to you see the Component Console.
The assets browser shows all assets that are available for direct use on your current page.
When you open the side panel it will slide open from the left side. Select the Assets tab if necessary.
When the assets browser is open you can browse through all the assets available for your page. Infinite scrolling is used to expand the list when required.
To add an asset to your page, select and drag to the required location. This can be:
- An existing component of the appropriate type.
- For example, you can drag an asset of type image onto an Image component.
- For example, you can drag an asset of type image onto an Image component.
- A placeholder in the paragraph system to create a new component of the appropriate type.
- For example, you can drag an asset of type image onto the parargraph system to create an Image component.
This is available for specific assets and component types. See Inserting a Component using the Assets Browser for more details.
From the top toolbar of the assets browser you can filter the assets by:
- Asset type such as images, manuscripts, documents, videos, pages, paragraphs, and products
- Asset characteristics such as Orientation (Portrait, Landscape, Square) and Style (Color, Monochrome, Grayscale)
- Available only for certain asset types
A mobile device is detected when the width is less than 1024px; i.e. also on a small desktop window.
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.
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.
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.
The Content Tree is not available if you are editing a page on a mobile device (if the browser width is less than 1024px).
If your page contains Content Fragments then you will also have access to the browser for Associated Content.
References shows connections to the selected page:
- Live copies
- Language copies
- Use of the reference component
- References to Product pages (from the Commerce - Products console)
Select your required resource to show a list of references types relevant to that resource:
Select the appropriate reference type for more information. In certain situations further actions are available when you select a specific reference, including:
- Instances of the Reference component (e.g. navigate to referencing/referenced page)
- References to Product pages (available from the Commerce-Products console)
- Live Copies displays the paths of all live copies that are based on the selected resource.
- Languages Copies
For example, you can fix a broken reference within a Reference component:
For appropriate resources (e.g. pages from the Sites console, or assets from the Assets console) the timeline can be used to show the recent activity on any selected items.
Open the required console, then navigate to the required resource and open Timeline, using:
Select your required resource, then either Show All or Activities to list any recent actions on the selected resources:
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:
For example, when appropriate, Page Information also has the options:
- Promote Launch if the page is a launch.
- Edit Template if the page is based on an editable template
- Open in Classic UI if this options has been enabled by an administrator
In addition, Page Information can provide access to analytics and recommendations, when appropriate.
There are various modes when editing a page allowing for different actions:
- Edit - the mode to use when editing the page content.
- Layout - allows you to create and edit your responsive layout dependent on device (if the page is based on a layout container)
- Scaffolding - help you to create a large set of pages that share the same structure but have differing content.
- Developer - allows you to perform various actions (requires privileges). These include inspecting the technical details of a page and its components.
- Design - allows you to enable/disable components for use on a page and to configure the design of the component (if the page is based on a static template).
- Targeting - increase content relevance through targeting and measuring across all channels.
- Timewarp - allows you to view a pages state at a particular point in time.
- Live Copy Status - allows a quick overview of the live copy status and which components are/are not inherited.
- Preview - used to view the page as it will be shown on the publish environment; or to navigate using links in the content.
- Annotate - used to add or view annotations on the page.
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:
- 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).
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.
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.
To narrow your search, you can reveal the filter options and filter your results based on a certain path.
Various keyboard shortcuts are available.