Using the Page Difference feature using-page-difference-with-aem-sites

[For publishing from AEM Sites using Edge Delivery Services, click here.]{class="badge positive" title="Publish from AEM to Edge Delivery Services"}

AEM Sites’ page difference capabilities show provides a quick, color-coded view of what content has changed in a page (version, live copy, launches, language copy).

Comparing page versions comparing-page-versions

Hi there. For an AEM sites content author, some of the day to day activities involve; creating, managing and organizing content. Authoring a site’s page is an iterative process. Content authors often need to make updates to a site page to fuel the needs of an end user and improve the overall experience. At the same time it is essential to track what changes executed by a content author helps to drive the business goals and improve user engagement. To help with tracking changes and how it impacts your business, AEM provides content authors with the ability to compare the current version of a page side by side with any of the saved page versions. With the page comparison tool, you can not only compare a page version to its current version, but also perform a page comparison between live copies, launches and language copies. In this video, we’re going to cover how to perform a page comparison for a sample site page. Let’s see how to perform a page comparison for your site page. From the AEM homepage, navigate to AEM sites console and open the WKND sample site. As a content author, we have been assigned a task to identify the changes for the WKND site River Rafting Adventure page. From the rail selector drop down, select the timeline option. Select the page and the site toolbar gets displayed. The timeline provides the history log of a specific page while versioning creates a snapshot of a page at a particular point in time. When you’re in the timeline option, you can filter the timeline using the drop down here. The timeline displays all the events associated with the page. And let’s filter the timeline just by versions. The page that we selected has an initial page version created and saved as version one. Version two contains a few edits performed on top of version one and saved as a new version. So how do we know what has changed from a saved version to the current version of our page? Viewing one page version and then viewing the current page version is inefficient and prone to error and inaccuracy. So to make it easy for content authors, AEM provides a side by side comparison tool for understanding how a saved page version differs from the current version of your page. Let’s select the initial version of our page and then choose to compare to current option. Note that, page comparison is not for two saved versions. Instead, the comparison is performed between a saved version of your page and its current state. You can view the page difference window open with a side by side comparison of the current version on the left hand side and the page version that we selected on the right hand side. The source of both pages is displayed in the header bar at the top of the browser window. The page different shows the change at HTML and component level. For component changes, the component get highlighted with a colored border and for HTML changes, you can notice the HTML change color coded. In the current version of the page, you can notice the title of the page that has been edited. HTML content removed will be marked with a dark red highlight. And for HTML content additions, the text will be highlighted in green. Red highlighting around the component indicates that a component is removed from the current page and components wrapped in green suggest that it is a new addition to the page. A blue highlighting around a component indicates that a component is either moved or changed. To focus on a particular content, you can click on the fullscreen icon from either side of the side by side difference to enlarge it to the full browser window. The selected side will fill the entire window but the bar will remain at the top, allowing you to switch between the two pages. You can accept the side by side differences at any time by clicking the close button in the header. To help with tracking changes and how it’s impact your business, AEM provides content authors with the ability to compare current version of the page by side by side With any of the saved page versions. I hope I was able to provide you a good enough description of how page difference helps you improve your business. -

HTML changes

  • Green: New content
  • Red: Removed content

Component changes

  • Green: New component
  • Red: Removed component
  • Blue: Modified component

Comparing launch pages comparing-launch-pages

Page Difference feature can be also used to identify the difference between blueprints and livecopies, and blueprints and language copies.

Additional Resources additional-resources