Click here to Skip to main content
11,935,031 members (55,924 online)
Click here to Skip to main content
Add your own
alternative version


10 bookmarked

Switch a SharePoint WebPart page display mode to Edit mode and vice versa

, 1 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Switching the Display mode of a SharePoint WebPart page programmatically.


Recently, one of my clients had a requirement to go into the Edit mode of a SharePoint page using a manual link displayed in the Quick Launch. He was lazy to go to Site Actions -> Edit Page and then again go somewhere else for the Exit Edit Mode Smile | :)

To give some background for beginners, whenever we click Edit Page on the Site Actions menu, the pages switch into a different display mode called Design Mode. It is not a feature of SharePoint, but that of the ASP.NET 2.0 Web Parts Framework.


According to the framework, the page can have four different modes:

  • BrowseDisplayMode: Represents the default display mode.
  • CatalogDisplayMode: Used for adding controls from a catalog of controls to a web page.
  • ConnectDisplayMode: Displays a special UI for users to manage connections between Web Part controls.
  • DesignDisplayMode: Used for changing the layout of web pages containing Web Part controls.
  • EditDisplayMode: Displays a UI from which end users can edit and modify server controls.

The WebPartManager control provides a programmatic interface, making it possible to switch the Web Part page between Browse, Design, and Edit display modes. For example, to programmatically switch the current page into Design mode, you can simply add a link control with an event handler that sets the DisplayMode property to DesignDisplayMode.

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;

Although this would work technically, it would not give up the visible changes to the page, like the visibility of page editing toolbar, WebPart zones etc. This visual magic is done by a lot of JavaScript which is executed when we click Edit Page on the Site Actions menu. To build this link control, we need to figure out the JavaScript code which causes this behaviour.

This would be present in default.master. If we open the Site Actions menu and do View Source on IE, here is the code of our interest:

<td class="ms-siteactionsmenu" id="siteactiontd">
<span><a href="javascript:MSOLayout_ToggleLayoutMode();">Edit Page</a></span>

As you must have figured out, it is the MSOLayout_ToggleLayoutMode() function which does all the magic of turning the current page into an Edit page. This JavaScript also calls the server side code which executes this statement.

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
//(This can also be demonstrated, but its beyond scope)

Building the WebControl

Armed with this knowledge, we can build a simple WebControl which we will switch the page into Edit mode and vice versa. Below is the code for the same. It is the simplest WebControl you will see ever.

using System;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.UI;
namespace SPUtil
    public class SPEditMode:System.Web.UI.WebControls.WebControl
        HtmlAnchor btnLink;

        protected override void CreateChildControls()
            WebPartManager wp = WebPartManager.GetCurrentWebPartManager(Page);
            const string url="javascript:MSOLayout_ToggleLayoutMode();";

            btnLink = new HtmlAnchor();
            if (wp.DisplayMode == WebPartManager.BrowseDisplayMode)
                btnLink.InnerText = "Edit Page";
            else if (wp.DisplayMode == WebPartManager.DesignDisplayMode)
                btnLink.InnerText = "Exit Edit Mode";
                btnLink.Visible = false;

            btnLink.HRef = url;

I have used HtmlAnchor rather than LinkButton or SPLinkButton since it is lightweight on the server and we are not performing any special processing which is present in server controls.

One point to be worth noted: this link would be visible to all including visitors. For use in practical scenarios, the control should be hidden for everyone other than members and administrators. I am using this link in the user's MySite and hence I did not have that case Smile | :)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Madhur Ahuja
Software Developer (Senior) Wipro Technologies
India India
I am working in Wipro Technologies as a developer with expertises in Microsoft Office SharePoint products. My interests include working on ASP.NET, AJAX, Javascript Object Notation (JSON), XML web services, Algorithm Optimization, Design Patterns.

You may also be interested in...

Comments and Discussions

QuestionHow to resize the web part zone by JS when click the site action=>edit page Pin
Member 117379152-Jun-15 23:27
memberMember 117379152-Jun-15 23:27 
QuestionHow do I do it with a js file? Pin
brother.gabriel27-Mar-12 13:09
memberbrother.gabriel27-Mar-12 13:09 
GeneralThanks for this article Pin
ariharaselvan.s19-Apr-10 9:30
memberariharaselvan.s19-Apr-10 9:30 
GeneralRe: Thanks for this article Pin
Madhur Ahuja13-Mar-12 0:59
memberMadhur Ahuja13-Mar-12 0:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 1 Mar 2008
Article Copyright 2008 by Madhur Ahuja
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid