Status Notification
If a page is part of a workflow or multiple workflows, this information is shown in a notification bar at the top of the screen when editing the page.
The notification lists the workflow that is running against the page. If the user is involved in the current workflow step, options to affect the workflow status and get more information about the workflow are also available such as:
-
Complete - Opens the Complete Workitem dialog
-
Delegate - Opens the Complete Workitem dialog
-
View details - Opens the Details window of the workflow
Completing and delegating workflow steps via the notification bar works as it does when participating in workflows from the Notification inbox.
If the page is subject to multiple workflows, the number of workflows is displayed at the right end of the notification along with arrow buttons to allow you to scroll through the workflows.
Component Placeholder
The component placeholder is an indicator to show where a component will be positioned when you drop it - above the component you are currently hovering over.
-
When adding a new component to the page (dragging from the component browser):
-
When moving an existing component:
Inserting a Component
Inserting a Component from the Components Browser
You can add a new component by using the component browser. The component placeholder shows you where the component will be positioned:
-
Make sure that your page is in Edit mode.
-
Open the component browser.
-
Drag the required component to the required position.
-
Edit the component.
Inserting a Component from the Paragraph System
You can add a new component by using the Drag components here box of the paragraph system:
-
Make sure that your page is in Edit mode.
-
There are two ways to select and add a new component from the paragraph system:
- Select the Insert Component option (+) from either the toolbar of an existing component or the Drag components here box.
- If you are on a desktop device you can double-click on the Drag components here box.
The Insert New Component dialog will open to allow you to select your required component:
-
The selected component will be added to the bottom of the page. Edit the component as required.
Inserting a Component using the Assets Browser
You can also add a new component to the page by dragging an asset from the assets browser. This will automatically create a new component of the appropriate type (and containing the asset).
This is valid for the following asset types (some will be dependent on page/paragraph system):
To create a component by dragging one of the above asset types:
-
Make sure that your page is in Edit mode.
-
Open the asset browser.
-
Drag the required asset to the required position. The component placeholder shows you where the component will be positioned.
A component, appropriate for the asset type, will be created at the required location - it will contain the selected asset.
-
Edit the component if required.
If when browsing the assets you find that you need to make a quick change to an asset, you can start the asset editor directly from the browser by clicking the edit icon next to the asset’s name.
Edit/Configure/Copy/Cut/Delete/Paste
Selecting a component will open the toolbar. This provides access to various actions that can be performed on the component.
The actual actions available to the user will be shown as appropriate and not all actions may be described here.
-
Edit
Dependent on the component type this will allow you to edit the content of the component. Often a toolbar will be provided.
-
Configure
Dependent on the component type this will allow you to edit and configure the properties of the component. Often a dialog will be opened.
-
Copy
This will copy the component to the clipboard. After the paste action, the original component will remain.
-
Cut
This will copy the component to the clipboard. After the paste action, the original component will be removed.
-
Delete
This will delete the component from the page with your confirmation.
-
Insert component
This opens the dialog to add a new component.
-
Paste
This will paste the component from the clipboard to the page. Whether the original remains, depends on whether you used copy or cut.
- You can paste to the same page or to a different page.
- The pasted item will be pasted above the item where you select the paste action.
- The Pate action will only be shown if there is content on the clipboard.
NOTE
If you paste to a different page that was already open before the cut/copy operation, you must refresh the page to see the pasted content. -
Group
This allows you to select multiple components at once. The same can be achieved on a desktop device by a Control+Click or Command+Click.
-
Parent
Allows you to select the parent component of the selected component.
-
Layout
This allows you to modify the layout of the selected component. This only applies to the selected component and does not activate the Layout mode for the entire page.
-
Convert to an experience fragment variation
This allows you to create a new experience fragment from the selected component or add it to an existing experience fragment.
Edit (Content)
There are two methods of adding and/or editing content in components:
- Open the component dialog for editing.
- Drag and drop an asset from the assets browser to directly add content.
Component Edit Dialog
You can open a component to edit the content using the Edit (pencil) icon of the component toolbar.
The exact edit options will depend on the component. For some components all actions will only be available in full screen mode. For example:
-
-
Image component
NOTE
Editing does not work on an empty image component.You must drag or upload an image (using Configure) before you can start to edit it. -
Image component - full screen
Entering full screen mode for the image component allows for more space to edit the image as well as showing extra editing options such as Launch Map and Reset Zoom. In addition, full screen allows for crop presets to be selected.
-
Components constructed from more than one basic component, such as the Text & Image foundation component, first ask you to confirm which set of edit options you want:
Drag and Drop Assets into Component
For specific component types you can drag and drop assets from the asset browser directly into the component to update the content:
Asset Type | Component Type |
---|---|
Image | Image |
Document | Download |
Product | Product |
Video | Flash |
Content Fragment | Content Fragment |
Edit (Content) Full Screen Mode
For all components the full screen mode can be accessed with (and exited from):
For example, the Text component:
Moving a Component
To move a paragraph component:
-
Select the paragraph to be moved with either tap-and-hold or click-and-hold.
-
Drag the paragraph to the new location. AEM indicates where the paragraph can be deposited. Drop it in your desired location.
-
Your paragraph is moved.
Edit Component Layout
Instead of repeatedly switching from edit to layout mode to adjust a component, you can select the Layout action for a component to change that component’s layout and save time by not having to leave the edit mode.
-
When in Edit mode of the sites console, selecting a component reveals the component’s toolbar.
Click or tap the Layout action to adjust the layout of the component.
-
Once the Layout action is selected:
- The resizing handles for the component display.
- The emulator toolbar is shown at the top of the screen.
- Layout actions instead of the standard edit actions show on the component toolbar.
You can now modify the layout of the component as you would in layout mode.
-
After making the necessary layout changes, click the Close button in the component action menu to stop modifying the layout of the component. The component’s toolbar returns to its normal edit state.
Inherited Components
Inherited components can be the product of various scenarios, including:
- Multi site management
- Launches (when based on live copy).
- Specific components such as the Inherited Paragraph System within Geometrixx.
You can cancel (then re-enable) the inheritance. Depending on the component, this can be available from:
-
Live Copy
The component toolbar, if the component is on a page that is part of a live copy or launch (based on a live copy). For example:
The Cancel Inheritance option is available:
Or re-enable inheritance if already cancelled:
The Rollout action is also available in the blueprint or Live Copy source:
-
An Inherited Paragraph System
The configuration dialog. For example, as with the Inherited Paragraph System:
Editing the Page Template
If the page is based on an editable template, you can easily switch to the template editor by selecting Edit Template in the Page Information menu.
If the page is based on a static template, you can switch to Design mode using the page mode selector on the toolbar to enable/disable components for use on the page.
You can easily see which template the page is based on when selecting the page in either Column view or List view.
Live Copy Status
The Live Copy Status page mode allows you a quick overview of the live copy status and which components are/are not inherited:
- Green border: Inherited
- Pink border: Inheritance has been cancelled
For example:
Adding Annotations
Annotations allow reviewers and other authors to provide feedback on your content. They are often used for review and validation purposes.
Previewing Pages
There are two options for previewing a page:
-
Preview Mode - a quick, in-place preview
-
View as Published - a full preview that opens the page in a new tab
- Links in the content are visible, but not accessible in Edit mode.
- Use either of the preview options if you want to navigate using your links.
- Use the keyboard shortcut
Ctrl-Shift-M
to switch between preview and the last selected mode.
Preview Mode
When editing content you can preview the page using the preview mode. This mode:
- Hides various edit mechanisms to give you a quick view of how the page will appear on publish.
- Allows you to use links to navigate.
- Does not refresh the page content.
When authoring, the preview mode is available using the icon at the top right of the page editor:
View as Published
The View as Published option is available from the Page Information menu. This opens the page in a new tab, refreshes the content and shows the page exactly as it will appear in the publish environment.
Locking a Page
AEM allows you to lock a page, so that no one else can modify the contents. This is useful when you are making a lot of edits to one specific page or when you need to freeze a page for a short while.
A page can be locked from either:
-
Sites console
- Select the page with selection mode.
- Select the lock icon.
-
Page Editor
- Select the Page Information icon to open the menu.
- Select the Lock Page option.
Once locked the console view information is updated and when editing a lock symbol is shown in the toolbar.
Unlocking a Page
Unlocking a page is very similar to locking the page. Once the page is locked the lock options are replaced by unlock actions.
The Page Information menu lists Unlock as an option and the Lock icon in the sites console is replaced by an Unlock icon.
Undoing and Redoing Page Edits
The following icons allow you to undo or redo an action. These are shown in the toolbar when appropriate:
Ctrl-Z
is also availalbe to undo page edit actions.Ctrl-Y
is also availalbe to redo page edit actions.Undoing and Redoing Page Edits - The Theory
AEM stores a history of actions that you perform and the sequence in which you performed them so that you can undo multiple actions in the order that you performed them as well as redo them to re-apply one or more of the actions if necessary.
If an element on the content page is selected (such as a text component), then the undo and redo command applies to the selected item.
The behavior of the undo and redo commands is similar to that in other software programs. Use the commands to restore the recent state of your web page as you make decisions about content. For example, if you move a text paragraph to a different location on the page, you can use the undo command to move the paragraph back. If you then decide that the previous position was better, use the redo command to “undo the undo”.
- Redo actions as long as you have not made a page edit since you used undo.
- Undo a maximum of 20 edit actions (default setting).
- Also use Keyboard shortcuts for undo and redo.
You can use undo and redo for the following types of page changes:
- Adding, editing, removing, and moving paragraphs
- In-place editing of paragraph content
- Copying, cutting, and pasting items within a page
Form fields that form components render are not meant to have values specified while authoring pages. Therefore, the undo and redo commands do not affect changes that you make to the values of those types of components. For example, you cannot undo the selecting of a value in a drop-down list.