Best practices for writing JavaScript for Project Online – Part 4

Read input field values on a PDP

Sometimes, in our script we need to know the values of custom fields to render our own output. Case in point, I once had to draw cool d3.js based graphics representing project status based custom field values. See the sample output below

Now I could have read the values from Project Odata endpoint /_api/ProjectData/Projects but the requirement was to update the graphics as soon as user changed those values. I’ll probably share some other key aspects of this script (rendering graphics and updating it when user changes it) in a different future blog. The focus of this blog is the piece of code that I wrote to read input field values.

The input field values are displayed as editable input boxes if a project is in edit mode. As shown in the screenshot above.


In non-edit mode, the fields are displayed as simple text values inside a DIV tag which in turn resides inside a TD tag. However, even in edit mode, there are cases where fields would be displayed as simple text, e.g. when a field is a calculated field or it is locked in the current workflow stage etc. see output of non-edit mode below.

The important points about the code that I am going to share are following

1. The code is in TypeScript but could easily be transformed to JavaScript. I highly recommend using TypeScript for any medium and large sized scripting apps. 
2. It depends on JQuery
3. If in future, Microsoft changes the HTML Dom structure of a PDP page, the code will likely break and will require an update. 

Without further ado, following is the code to read Number, Date & Text values from PDP in both edit and non-edit mode. This code can be downloaded from 

https://gist.github.com/hammadbinarif/822e8eae649851822d1abd9d6a7af4e3

	export class PDPFieldReader {
	static get_FormFieldValue_Number = (fieldName: string, editMode: boolean): number => {
	return Number(PDPFieldReader.get_FormFieldValue_Text(fieldName,editMode).replace(/[^0-9\.]+/g, ""));
	}
	static get_FormFieldValue_Date = (fieldName: string, editMode: boolean): Date => {
	var textValue = PDPFieldReader.get_FormFieldValue_Text(fieldName, editMode);
	// parsing for UK dd/mm/yyyy
	var parts = textValue.split("/");
	if (parts.length != 3) return new Date(0);
	else
	return new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
	}
	static get_FormFieldValue_Text = (fieldName: string, editMode: boolean): string => {
	if (editMode) {
	var inputField = $('Input[Title="' + fieldName + '"]');
	if (inputField.length == 0) {
	console.warn("Couldn't find form field " + fieldName);
	return "";
	}
	return inputField.val();
	}
	else {
	var inputFieldLabel = $("H3.ms-accentText").filter(function () {
	return $(this).text() == fieldName;
	})
	if (inputFieldLabel.length == 0) {
	console.warn("Couldn't find form field " + fieldName);
	return "";
	}
	var inputFieldValue = inputFieldLabel.closest('tr').find('td:eq(1)').find('div').first().text()
	return inputFieldValue;
	}
	}
	}

view raw PDPFieldReader.ts hosted with ❤ by GitHub

In my next blog, I’ll talk about writing values back to PDP fields. Fun trivia: It is not as simple as changing the values of the input fields 😊