Best practices for writing JavaScript for Project Online – Part 2

Checking the Project details page edit mode

The tip is about changing script behaviour based on the fact that project is editable or not.

I recently created a custom editable grid for user to enter project financial information. However, I wanted the grid to behave like regular PDP input fields which does not allow editing if the project is not in Edit mode. See the output of my grid in Edit and non-edit mode.

When PDP is in edit mode

When PDP is not in edit mode

On every PDP, project online PDP infrastructure injects a global object named EditState which exposes some useful information about the current edit state of the PDP. One of its property EditState.Editing is set to true when the page is in edit state. See the following example code.

	_spBodyOnLoadFunctionNames.push("myScriptStartup");
	function myScriptStartup () {
	var editMode = EditState.Editing;
	if (editMode) {
	// PDP is in edit mode
	// Do things differently here
	console.log('PDP is in edit mode. so our input fields will be editable');
	}
	else {
	// make custom input fields read-only
	}
	}

view raw pdpEditmode.js hosted with ❤ by GitHub

In the next part of this series, I’ll talk about how we can avoid a common Internet Explorer error

Best practices for writing JavaScript for Project Online – Part 1

Checking the Web Part page design mode

In this series of blogs, I’ll share some the practices I use to write better JavaScript to customise Project Online screens.

The first tip is about detecting the web part page edit mode. Frequently, we write scripts to manipulate UI of the page and if the user is already editing the page, our script can cause undesired behaviour.

We could either execute a different set of functions or at minimum, just not execute the script in design mode to keep the user experience clean.

Its relatively simply to detect the WebPart page design mode. Just add the following code to the startup your script.

	_spBodyOnLoadFunctionNames.push("myScriptStartup");
	function myScriptStartup () {
	var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
	if (inDesignMode == "1") {
	// page is in edit mode
	// Do things differently here
	console.log('Page is in edit mode. so we will not execute the custom script');
	}
	else {
	// regular script execution goes here
	}
	}

view raw pageeditmode.js hosted with ❤ by GitHub

In the next part of this series, I’ll talk about how we can detect if a Project Details Page is in Edit mode.