Preview Mode - Documentation topics on: pages,preview mode,.

Preview Mode

Opening a Page in dotCMS displays a collapsable column of tools on the left hand side of the Page with three different tabs across the top left side of the page- Edit (if locked for editing), Preview, and Live.

Clicking on the Preview tab causes the Edit Mode tools to be removed from the working copy of the Page so that additions of Content or changes to the Page can be previewed as they will appear when the Page is published.  The Preview Mode removes all of the editing buttons on Containers and Contentlets to allow a true preview of the working or "draft" version of the Page.

A collapsible toolbar on the left hand column buttons displays the following options:

  • Lock for Editing/Release Lock - Toggles the Page in and out of Edit Mode
  • Publish Page - Publishes the Page so all changes to the Page or additions of content become "live" on the front-end page
  • Add to Bundle - Adds the Page to a bundle for Push Publishing
  • Assign Workflow - Allows the Content Contributor to assign the Page to another user/role in a Workflow Task
  • *What's Changed - Green highlights additions to the page and red highlights content that has been removed since the Page was last published.
  • Page Properties - brings the user to the Add/Edit Page view where Page Properties, Page Permissions, and Page Versions can be managed.
  • Page Statistics - brings the user to the Web Statistics Page view where users can view and filter Page statistics
  • Create New Page - add a new Page
  • Language drop down - allows to preview the page in any other language created in the system
  • Admin Screen - quits the editing process on the Page and returns the user to the Site Browser

*What's Changed?

The "What's Changed?" option displays a visual difference between the Preview and Live mode views of the current page. If Content has been added or edited and not published on the Page the changes will be reflected in red for everything deleted and in green for anything that has been added.

Below you can see a Page from Preview mode that has been modified to add text and remove an image in Edit Mode, and how What's Changed displays the differences between the Pages.

Note for Webmasters: If you require an specific behaviour for when your page is queried and read through the What's Changed functionally, you can use the request header "User-agent". The "User-Agent" will is equal to "DOTCMS-HTMLPAGEDIFF" when the What's Changed? is being used on your page.

You can access that "User-Agent" header from your velocity page code in this way:

#if ($request.getHeader("User-Agent") == "DOTCMS-HTMLPAGEDIFF") 
      ##Custom code...