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.

4 comments:

  1. Thanks for tip. Help me a lot.

    ReplyDelete
  2. Hi Naveed,

    How to hide the entire ribbon ?

    ReplyDelete
  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,

    ReplyDelete
    Replies
    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.

      Delete