Using the Page Editor using-page-editor-with-aem-sites

Transcript

For an AEM Sites content author, some of the day to day activities involves creating a page, making changing for an existing page and publishing your changes to an external user. In this video let me take you through the page editor’s UI. From the AEM homepage, navigate to AEM Sites console and open the WKND sample site. Let’s browse through the Sites content hierarchy to find a page for editing. Take a note of the page title and the page template used to create this page. Select the page and click on the edit icon from the top toolbar, note that you need to have appropriate access rights and permissions to edit this page. Opening a page in edit mode helps content authors to add, update or delete content from a page with the help of components. Page editor UI has a toolbar that provides content authors with a set of tools to author content. Available toolbar options for a page depends on its configurations. The toolbar offers access to various options. Starting from the left side, the toggle side panel holds the asset browser, component browser and the content tree. Asset browser lets content authors search for assets required for page authoring. And allows you to search and use all assets stored in AEM Assets. Infinite scrolling is used to expand the list when needed. You also can filter your asset search using its asset type. Component browser shows all components that are available for use on your current page. The list of available components for a page depends on its template component policy configuration. The content tree tab within the side panel displays 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. Next to the toggle side panel you can notice the page information icon. Page information icon opens a menu that provides page details and actions that can be taken on the page. Open properties display the metadata associated with your page and includes additional configuration for your page.

Using the start workflow you can invoke a workflow for your page. Selecting this option throws a workflow dialog box with a dropdown to perform the required operation and an option to input a name for your workflow. Workflow allows you to automate a series of steps that are performed on a page. The workflows that you use are specific to the business process of your organization and can be completely customized. For example, you can create a workflow to reduce some of the steps that you need to perform after a page is ready and if it needs additional review. Imagine that you need certain uses within your organization to review your content before publishing, instead of sending them separate emails you can create a workflow that sends a task notification to their AEM author accounts that notifies them of your change. Using workflows, you can reduce some of your repeating tasks and also collaborate with other users and track its progress. AEM allows you to lock a page so that no one else can modify the content for your page. Securing access to a page is useful when you’re making a lot of edits to one specific page or when you need to freeze a page for a short while. Once locked, the page view information within the AEM Sites console gets updated for other users, making this page no longer accessible for editing to other users.

You can also make your page live to external users using the publish page option.

Assuming your site page is already published, you can unpublish a page and external users will no longer have access to the page and might result in a page not found message. AEM Sites console UI displays information about published and unpublished details for a page. The edit template opens the page template for your page.

The view as published option opens the page in a new tab, refreshes the content and shows the page exactly as it will appear in the publish environment. You can click on the help icon and get a quick overview of the page editor UI options. Right next to the page information icon you can notice the emulator icon. Click on the icon and you can view your content on how it would appear on different devices. You can emulate your content for different devices, like desktop, tablet and mobile devices. You can also try different page orientations for each device group. Note that the emulator also adds a pixel scale on the top so that you can get an idea of how each device resolution and how your content gets displayed for different display ratios. Page edit toolbar displays your page title here. There are various modes when editing a page allowing for different actions. And the full list of page mode is listed here for us. In the edit mode content authors can edit the page and its content. In the layout mode you can create and edit your responsive layout dependent on each device group if the page is based on a layout container. In the time warp mode it allows you to view a page state at a particular point in time. Page modes are made available to a user based on your page configurations. The preview options displays the page as it will appear when published.

Right next to the preview option you can see an option to add annotations for your page. Click on the annotations icon and then you can add a new annotation by clicking on the insert new annotation option and then let’s add a new comment to change the background image. Note that you can add an annotation to a page for a specific component. Let’s select the image component and add a comment to choose another asset for this image component. This capability allows you to add annotations to the page. After the first annotation the icon will switch to a number indicating the number of annotations on this specific page. In summary, AEM provides content authors with a great set of tools and capabilities to author content in the page editor UI. I hope this video helps you get an overview of the page editor UI. -