From time to time when building Kentico sites it can be useful for elements on your page or in your code to know whether they are being viewed and executed on the live site, in the page tab, or even in design mode. The good news is that you can do this, and easily! The key to it is CMS.PortalEngine.PortalContext.ViewMode .

There are a lot of states you can check for, many of which you will never need.

Name	Value	Description
LiveSite	0	Live site mode.
Preview	2	Preview mode.
Edit	3	Edit mode – content editing.
Design	6	Edit mode with disabled controls – when not authorized or cannot edit.
EditForm	8	Edit form mode – for portal engine pages.
Unknown	9	Unknown / does not matter
EditLive	18	On-Site edit mode
Wireframe	19	Wireframe mode.
Listing	20	Listing mode.
SectionEdit	21	Section edit mode.
UI	22	UI Page
DesignWebPart	23	Design mode for web parts
EditDisabled	4	Edit mode – content editing (editing disabled).
EditNotCurrent	5	Edit mode – not current page.
DesignDisabled	7	Design mode with disabled controls – for portal engine pages.
UserWidgets	12	User widgets mode.
UserWidgetsDisabled	13	User widgets mode with disabled functionality (for preview mode).
GroupWidgets	14	Group widgets mode.
DashboardWidgets	15	Dashboard widgets mode.

From Kentico 8.2’s API documentation for ViewModeEnum.

Where you can use ViewModeEnum

Code behind

You can use this approach in your code behind and custom logic.

if (CMS.PortalEngine.PortalContext.ViewMode == CMS.PortalEngine.ViewModeEnum.Design)
{
    // Do your special thing
}

Be wary of its use in areas which are not loaded inside the CMS, like handlers (ASHX files) or code that can be run in separate processes like scheduled tasks. So far in my tests in handlers, the ViewMode has always come back as LiveSite, which may not be what you expect. It’s probably a good habit to check for the existence of a PortalContext before checking the ViewMode property.

Macros

You could use this in Macro form, for hiding and showing webparts or widgets, form fields or other bits in the site.

{%PortalContext.ViewMode=="Edit" || PortalContext.ViewMode=="Design"#%}

Another (less good) option: CSS class on the Body Element

By default, Kentico also puts some of its view modes into the body element of the presented page along with its other classes relating to browser and language.

For example:

• body.EditMode is available when the Page tab is being used
• body.DesignMode is available when the Design tab is being used

But there isn’t anything for the other modes, including live or preview mode. If you want to add CSS rules based on view modes, read on! You can do this easily.

Scenarios for use

Here are a few of the main reasons I’ve used ViewMode.

“Fix” styles in Page or Design tab

A common reason this is used is to ‘correct’ the presentation of areas where Kentico’s framework has injected elements into the DOM, and to ensure areas are still able to edited in design mode. For example:

• you have a widget zone, but in page mode all the widgets are stacked on top of each other and aren’t able to be administered separately (or provide a nice peek of the page). You don’t want to change your site’s CSS, but you need to adjust the position of those widgets when on that page tab.
• your webpart is too small and can’t be
• your webpart

You can create a new stylesheet with your CSS fixes. Add an Head HTML Code webpart to your template, containing a <link> element for your  new stylesheet. Set the visibility macro to the so that the webpart is only shown in the ViewModes you want. Your stylesheet will be included only where you need it – and without affecting your live site presentation or bloating your live site stylesheets.

If your fixes are written generically, that “CSS fixes” stylesheet could be used in multiple templates if required.

Show a webpart for editing

Some webparts and widgets are configured to only show themselves when a user is not logged in. While this will work fine on the front end of the site, it doesn’t help when you can’t see those widgets and webparts in the page or design tabs to edit them! By carefully setting a visibility macro on the webpart, you can make sure it remains visible in the admin area, even when the user is logged in. You’ll need to make sure your site layout is able to handle this presentation, but at least you have a way to show the webpart if you need to.

Earlier versions of Kentico

This article was written about Kentico 8. Earlier versions of Kentico didn’t have the PortalContext object, but still had the ViewMode values that you can use in much the same way. CMSContext.ViewMode is what you’re after. The ViewMode values there might be slightly different, but you should still be able to find what you need.