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

Transcript

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. -

Transcript

Content creation is an iterative process and sometimes more than one user work on the same piece of content. Authoring with efficiency requires being able to see what has changed from one iteration to another. In this video, I would like to show you some of the content authoring enhancements introduced in AM6.3 for Touch UI. A visual difference makes it easy for users to understand what exactly changed with the Tuke scan. I would like to show you how to create a page launch and compare your page launch with your source. Let’s navigate to the sites Vretail, Language Masters and English.

Select the women’s page and click on the create option and then select launch.

Select the women’s page and then click on next. Enter the launch title as woman launch and then click create.

Open the launch created to make some content changes to it. Select the hero image component and cancel inheritance. Select the settings option and enter the title as woman spring and save your changes.

Now let’s add a button component above the featured product text and provide the button name as women’s summer shopping and save your changes. We have successfully added a component to the layout container. Let’s modify an existing component. Select the first category user component and change the heading to pushing the limits 2017. Let’s delete the second category user component from the page. Also let’s change the girl top stories text to girls summer stories.

Let’s navigate back to the site console and refresh your page.

Select the women’s page and select the reference option from the drop down. Under copies select the launches and you should be able to see the launch created in the previous step. Select the launch and click on compare to source option. AEM site’s html different page should be open with the launch version on the left side and the source on the right side. A visual difference makes it easy for users to understand what exactly changed with the qc scan. A page difference is performed between the launch and the source. For a html change grain wrapper around the text indicates that the text has been added and red indicates that the text has been deleted or replaced. In our case we replace the hero image title from woman to woman summer. Woman summer is marked as green which means it is newly added to the launch. Let’s notice the other changes we made to the component. We added a new button to the layout container. So the newly added component is marked with the green wrapper and the layout container itself has a blue because it has been modified with the addition of a new button component. You can also notice the first category teaser has a text added to it marked in green and the second category teaser marked in red which means it has been removed from launch. We also replaced the text top with summer hence top is marked in red which means it has been removed and summer marked as green which means it has been added. Page difference introduced in am 6.3 helps content authors to easily identify the changes made to a page by comparing the launch with the source.