Thursday, March 31, 2011

SharePoint Edit Page and Personalize page using Javascript

I had to dig deep to find out what are the javascript functions called when we click the Edit Page button the SharePoint ribbon. I had to hide the ribbon for one of my client's requirements and i had to provide links for Edit Page, Personalize page and Save page.

I have used three hyperlinks for each of these functionalities. This is how we can do it in SharePoint.

<a href="javascript:ChangeLayoutMode(false);">Edit</a>

<a href="javascript:ChangeLayoutMode(true);">Personalize</a>

<a href="javascript:ChangeLayoutMode(null,true);">Save</a>

These functions are available in a Javascript file which SharePoint includes by default. So you just have to place this html on your page and there you go.


  1. Thanks for tip. Help me a lot.

  2. Hi Naveed,

    How to hide the entire ribbon ?

  3. Hi Naveed,

    I tried adding the three line in my homepage under Edit html source section. I am unable to hide it still. Can you please advise ?

    Thanks in advance,

    1. Hi Avinash,
      You can use SharePoint designer to open the page and add the HTML where you want it. You can also use a Content Editor web part and add the HTML in there.
      You can hide the ribbon by setting display:none for the #s4-ribbonrow in the css. But this would remove the ribbon for everyone including the administrator. If you want the admin to see it, you can make use of the SPSecurityTrimmedControl.