How to Preview an Item in Sitecore CMS

June 15, 2017

Blog | Development | How to Preview an Item in Sitecore CMS
How to Preview an Item in Sitecore CMS

This is the thirty-sixth in a series of learning how to use and develop for Sitecore CMS; it is the follow-up post to “How to Create a Template Without Standard Fields in Sitecore CMS”. In this “How to” post I will be covering how to preview an item in Sitecore CMS.

The preview functionality within Sitecore can be a useful tool when viewing pages on your website regardless of publish status.

Using preview allows you to:

  • View a past or future version of your website based on a specified preview date and publishing restrictions.
  • View a webpage in different language versions.
  • View how a webpage appears on various devices.

A Note on Sitecore Preview:

Pages may not always appear correctly within Sitecore Preview. Keep in mind that previewing will display page content regardless of publish status. This encompasses all associated items, including media.

Preview From the Content Editor

If you’re in Sitecore’s Content Editor, you can open Preview by first selecting a webpage item that you would like to preview and then clicking “Preview” within the Publish group on the Publish tab.

Sitecore 8 Preview from Content Editor
Sitecore 8 Preview from Content Editor

A preview of the page item will open in a new tab.

Sitecore 8 Page Preview
Sitecore 8 Page Preview

Alternatively, the preview option may be selected from the preview group in the Presentation tab to view a preview of the page within Content Editor.

Sitecore 8 Preview within Content Editor
Sitecore 8 Preview within Content Editor

Preview from the Experience Editor

If you’re in Sitecore’s Experience Editor, Preview functionality may be accessed by selecting “Preview” from “Other” dropdown in the Mode group on the Experience tab in the ribbon.

A Note on Sitecore Permissions:

Please note that if your username does not have proper permissions, the Experience tab may not be accessible.

Sitecore 8 Preview from Experience Editor
Sitecore 8 Preview from Experience Editor

The ribbon may be collapsed or expanded in Preview mode by clicking the Toggle the Ribbon icon in the upper right of the screen, beneath user.

Sitecore 8 Toggle the Ribbon
Sitecore 8 Toggle the Ribbon

Setting Date Preview Parameter

The Date preview parameter in the Date group of the Experience tab on the ribbon may be set to preview a past or future version of your site. Clicking on the date displays a Preview Date and Time modal in which date and time for preview may be set and changed. Alternatively, the blue left and right arrows may be selected to choose the previous or next day.

Sitecore 8 Preview Date and Time
Sitecore 8 Preview Date and Time

Setting Language Preview Parameter

If your website has more than one language version, the Language preview parameter may be set to preview how a webpage may appear in a different language version. This may be done by clicking the current language within the Language group on the Versions tab in the ribbon.

Sitecore 8 Preview Language
Sitecore 8 Preview Language

Available language options will be visible. Simply select a language from the list to view the page in that language version.

Sitecore 8 Preview Language Versions
Sitecore 8 Preview Language Versions

Preview from the Device Simulator

To view how your website might appear on different devices, such as an iPhone, iPad, Android Phone, and Blackberry, preview it from the Device Simulator.

Although the simulated rendition of the previewed website may not be 100% accurate, the Device Simulator provides content authors the ability to quickly preview pages on mobile devices and it shows a good example of how a page might look on each device.

To access the Device Simulator, first open “Preview” for the page being previewed. To select a device for simulation, click the “Simulator Button” in the Simulators group.

Sitecore 8 Preview Device Simulator
Sitecore 8 Preview Device Simulator

A range of devices appear and a selection may be made for simulation. Make note of the “None” device option, as this is the selection that should be made for default page preview.

Sitecore 8 Preview Devices
Sitecore 8 Preview Devices

Michelle Banzer

Developer
Tags
  • Best Practices
  • Sitecore
  • Tutorial
  • Web Development
Sitecore Survival Guide Volume 1

If you found this post helpful, there are plenty more where it came from! You'll find the first 10 here.

Download the first 10 posts in our Sitecore how-to series by Developer Tim Leverett!

Recent Work

Check out what else we've been working on