Advert

Switch the sharepoint webpart page Display Mode into Edit Mode and Vice Versa

Switch the sharepoint webpart page Display Mode into Edit Mode and Vice Versa

  • Comments 7
Recently one of my clients had a requirement to go into Edit mode of a sharepoint page using a manual link displayed in quick launch. He was lazy of going to Site Actions -> Edit Page and then again going somewhere else for Exit Edit Mode :)

To give some background for beginners, whenever we click Edit Page on Site Actions menu,
the pages switches into a different display mode called Design Mode. Its not a feature of
Sharepoint, but ASP.NET 2.0 Webparts Framework.

Background


According to the framework, the page can have 4 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, but it would not give up the visible changes to page, like visibilty of Page Editing toolbar, webpart zones etc.

This visual magic is done by lot of Javascript which is executed when we click Edit Page on 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 Site Actions menu and do the 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, its the MSOLayout_ToggleLayoutMode() function which does all the magic of turning the current page into 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. Its 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";
else
btnLink.Visible = false;

btnLink.HRef = url;

Controls.Add(btnLink);
base.CreateChildControls();
}

}
}

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

One point to be worth noting: This link would be visible to all including visitors. For used in practical scenarious, the control should be hidden for other than members and Administrators.

I was using this link in user's MySite and hence I did not have that case :)
Leave a Comment
  • Please add 1 and 5 and type the answer here:
  • Post
  • hi madhur,

    useful articles on sharepoint =) i'm sure they will be of immense help to newbees as well those that crack their heads over F1 .

    keep up the good work!

    im the first one to post on your new blog =)

  • Hi Alicia

    Thx for good feedback ... I will surely keep it up ... :)

  • Awesome article dude. Gave me exactly what i was looking for.

  • Hi Madhur,

             Can we have something like igoogle in sharepoint?

    User can choose from a list of webpart to drag and drop in the webpart zones which will be visible without clicking edit.

    Thanks

  • Hi Ajit

    Incorporating exact functionality like igoogle in sharepoint is not easy due to several AJAX limitations. Although, you can achieve very close to it.

    Madhur

  • Hi Madhur,

    A very informative Post i must say.

    I have a query regarding javascript.

    When I write document.forms[0].onsubmit in a webcontrol's ascx on a sharepoint page if is fired.

    But when I have a sharepoint site under PWA(Project web access) and on a page of such a site I have this webcontrol, then in such a case

    document.forms[0].onsubmit does not get fired.

    I am unable to get the root cause of this problem.

    Waiting for your reply.

    Thanks.

  • pls if anybody know this,this is my login pls respond me muralikrishna.thuraka@ascendum.com

Page 1 of 1 (7 items)