Effective Use of the EditModePanel in SharePoint Page Layouts with Complex Designs

One of the hidden gems in SharePoint is the EditModePanel. This control can be used in a multitude of ways, including altering your page layout to better suit the page in edit mode when you have a restricted width or more complex design.

Custom Branding and SharePoint Edit Mode

One of the ugly bits behind SharePoint is when you edit a page, especially one with web part zones. In edit mode additional space and formatting is added to the page. It makes sense… you need functionality to edit the functionality. And while it is a necessary evil, edit mode can wreck havoc on more intricate designs in SharePoint.

As an example, here are three web part zones stacked horizontally across the page within a constrained width design:

Stacked web part zones in a constrained width web page

Once in edit mode the web parts pass the allowable space and create a horizontal scroll as well as overlap each other due to the set percentage widths for each column:

Stacked web part zones in a constrained width in edit mode

Yuck. This makes for a cumbersome editing experience for content owners. You can solve this problem by using an EditModePanel control in your page layout file.

SharePoint’s EditModePanel Control

This handy control is used to load up content, code (HTML, CSS, JavaScript, etc.) , fields or pretty much anything you can think of while in either edit mode only, or in display mode only.  For the above case, it can be used to load up new CSS styles that reduce the width of the columns, or alternatively remove the float so the web part zones are stacked vertically instead of horizontally.  Either approach can make editing the page easier.

  1. Open the SharePoint page layout file.
  2. Add the following block of code in any content control where you want to insert something new in edit or display mode only.
    <PublishingWebControls:EditModePanel runat="server" id="EditModePanel1" SuppressTag="true">
    </PublishingWebControls:EditModePanel>
    
  3. For this example it will be inserted in the PlaceHolderAdditionalPageHead content control and will wrap a CSS style statement that removes the column float. Here is the final version of the code:
    <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    	<PublishingWebControls:EditModePanel runat="server" id="EditModePanel1" SuppressTag="true">
    		<style type="text/css">
    			#DeltaPlaceHolderMain article {
    				float: none;
    			}
    		</style>
    	</PublishingWebControls:EditModePanel>
    </asp:Content>
    

Here is the result when we reload the web page and go back into edit mode:

Web part zone float removed via EditModePanel

Changing to Display Mode Only

If you want the contents to only be used in display mode, then you would add the following property to the EditModePanel:

PageDisplayMode="display"

It is unnecessary to specify this property for edit mode as “edit” is the default value.

The SuppressTag Property

In the first example the EditModePanel control includes the SuppressTag property.  By default, anything within the panel will be rendered inside of a DIV tag on the web page.  There will be instances that you don’t want this added DIV tag, such as if the EditModePanel is used to insert code into the HEAD of the HTML page.  The SuppressTag property stops this from happening.

SuppressTag="true"

If you want to keep the DIV tag around, then leave off the property since the default value is “false”.

Another note about the added DIV tag… you won’t see it in a browser inspector such as Firebug in Firefox. You need to view the source of the page to see it. Here is the result of omitting the SuppressTag property from our original code sample:

<div id="ctl00_PlaceHolderAdditionalPageHead_EditModePanel1">
	<style type="text/css">
		#DeltaPlaceHolderMain article {
			float: none;
		}
	</style>
</div>