Page mode and JavaScript

So I ran into a scenario recently where a customer had a jQuery script making some DOM modification which they wanted and everything looked good.

Until you went to edit the properties of some web parts. Unfortunately due to the DOM manipulation that the script was doing it was impossible for a user to edit these web parts.Not all that helpful.

Given that this is on a custom page layout the answer is just to add a EditModePanel with the attribute PageDisplayMode=”Display” surrounding the offending script tag, job done, the script is no longer in the page in design, AKA edit, mode.

But what about when the script still needs to do some changes or is being injected via a script editor web part?

The solution is luckily very simple. SharePoint kindly puts a hidden input field into the page while it’s in design mode.

<input name="MSOLayout_InDesignMode" id="MSOLayout_InDesignMode" type="hidden" value="1"/>

All you need to do is check this with a single line of jQuery and use this to control your logic flow.

if($('#MSOLayout_InDesignMode').val() !== “1”){
    //do display mode only stufff
}

Nice and easy, two simple methods of having scripts which only run in the display mode of your choosing.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s