Determine if a SharePoint Publishing Page Is in Design Mode (Edit Mode) with Script
Today I was working on some script for the home page of a SharePoint 2013 site which added the jQueryUI accordion behaviour to all of the Web Parts within a Web Part Zone. When I went into edit mode, it was pretty frustrating to have the accorsdions kick in, so I looked around for a way to check to see if a publishing page is in editing mode with script. I’m pretty syure I’ve done this before, but it’s been a while and I couldn’t find anything in my kit.
Somewhat to my surprise, there were a lot of questions about how to do this out there, but not a lot of good answers. Most of them came down to looking for some element that would only be in the page in edit mode and sounded a little kludgy.
However, I found one over at SharePoint Stack Exchange from Andrey Markeev in a thread called How do I know if the page is in Edit Mode from JavaScript? that looks pretty solid to me.
I’m taking the liberty of including the code here, since this is the first place I look for answers!
var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
// page is in edit mode
}
else
{
// page is in browse mode
}
This will refer to value of the following html input control, which is rendering on the page when it is in edit mode:
For wiki pages, you will need the _wikiPageMode parameter:
var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
// wiki page is in edit mode
}
else
{
// wiki page is not in edit mode
}
Another reference:
http://sharepoint.stackexchange.com/questions/4832/jquery-and-sharepoint-2010-how-can-i-tell-is-the-page-is-in-edit-mode-using-j
Great tip! I have the exact same annoyance with a FAQ page I’ve recently implemented and have to now update. Thanks Andrey and to Marc for sharing it with us.
FYI, the link intended to go to Andrey’s response on StackExchange is linking back to your blog instead and therefore throwing a 404.
Thanks, Carlos. Fixed!
M.
I prefer to use something like this as I have to turn off multiple functions that rewrite or move things around on a page.
With jQuery
var inDesignMode = ($(‘#MSOLayout_InDesignMode’).val() == 1) ? true : false;
Without jQuery
var inDesignMode = (document.getElementById(‘MSOLayout_InDesignMode’).value == 1) ? true : false;
Then in your code, test for which mode you are in:
if(!inDesignMode){
// this is not edit mode
}
Is it possible to detect the current page is System page (List/Library views/forms) or Site page via Javascript?
Ventatesh:
Can’t you just inspect the URL using location.href?
M.
Thanks for the suggestion Marc!
For Library / List views, I can use “/forms/”, “/list/” to check in URL. “/_layouts/” also filters most of the system pages.
But some pages which won’t fall in these filters. Not sure how to capture/identify them.
Well, you can come up with something to determine what most pages are, but you may not be able to classify every single one. Why would you need to?
M.
If I apply my custom master page as Site master page then It’s getting applied only to Publishing pages. Many pages in this site are not Publishing pages. So most of my site shows without Custom Master page. So am forced to set custom master as System Master page as well.
Anyways, the tip you’ve suggested will work. Thanks a lot for Super Fast response. Really Appreciated!