Sitefinity – Detecting if a page is in design mode

Jared Johnson, 16 August 2012

When creating custom controls for Sitefinity, it can be very useful to be able to detect if the page the control is on is in Design view. This can be useful for adding extra functionality for setting up your controls options for page designers, or to avoid displaying content that would get in the way or uses a lot of bandwidth in the Design view, for example the Sitefinity video player.

Sitefinity video player in Design Mode 

To detect the state the page is in, there are 3 methods of the Page class: IsDesignMode, IsPreviewMode and IsBackend. These all return a boolean value indicating if the page is in the specified Mode.
Note that these are not exclusive, IsBackend will return true if the page is in Design mode, and IsDesignMode will return true if the page is in preview mode.

So for example to determine if the page is only in Design mode and not preview mode:

if(this.IsDesignMode() && !this.IsPreviewMode()
{
…
}

This can also be used in the template files of your controls, and also the Sitefinity widget templates.
For example in this code from a blog post template, the taxon control is replaced with a placeholder when viewed in design mode.

<% if (!this.IsDesignMode())
   { %>
<sitefinity:FlatTaxonField ID="FlatFieldControl" DisplayMode="Read" runat="server" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc"  TaxonomyId="CB0F3A19-A211-48a7-88EC-77495C0F5374" TaxonomyMetafieldName="Tags" Expanded="false" />
     <%}
   else
       { %>
       <ul><li><span>Tags</span></li></ul>
<%} %>