User Defined Fields & Forms (Custom Items) With JavaScript – Project Insight Help Center

Please note that these examples may vary case by case.

Requirements: Knowledge of Custom Item types in Project Insight, experience with JavaScript, HTML, CSS, and programming concepts and practices in general.

An updated browser that can support the latest W3C specifications such as: HTML5, CSS3 and other scripting languages and extensions.

This tutorial uses the latest version of Google Chrome.

Create your custom item and add custom field(s)

Custom Fields

Figure 1 - Create a custom item with custom field(s).

Tip: Select the appropriate Data Type for the fields you want to perform calculations or specific functions on.
Example: Choosing an Input Control type of "Textbox" to perform auto calculations as percentages; select the Data Type of "Percent".

Once you have set up your custom item, click to edit the custom item and select the INPUT tab to display the "Input Form JavaScript" field.

Edit the Input/Display properties for the Custom Item

Figure 2 - Input Form JavaScript.

Let's add a simple built-in JavaScript alert box using jQuery code. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event.

Simple JavaScript Alert function

Figure 3 - Add a JavaScript pop-up alert on the custom item for the "input" custom item page.

In your master folder or sub-folder(s), add new a custom item (your custom item). You will notice that when the form loads, that a pop-up will appear, which is the JavaScript we coded.

Figure 4 - A JavaScript pop-up alert triggers when the (document) loads the custom item input page.

Using your browsers developer tools (press F12 on your keyboard), which will load the browser developer tools. We'll need to access some HTML code elements in order to code some JavaScript functionalities.

Right-click with your mouse on the Probability input field and a sub-context menu should appear.
Select the inspect element option (the last option on the menu), which will focus and target the selected HTML control you just selected.
We need to copy the correct ID for the input element (double-clicking or highlight and copy the input id) without the double quotes, i.e. (id="cfs_i2_cf2" -> cfs_i2_cf2).

The ID is an identifier for the browser to identify an element, control, object, field and etc.

Figure 5 - Identifying custom items and HTML elements.

Tip: Depending on the custom item, the "ID" of the element may change or have a different value than the example above.

A great way to verify you are targeting the correct element ID for the custom item is the match the number contained in the ID with the field # of the custom item.
Also, in this example, we are focusing on the input form, which means adding/editing data, so the prefixes of custom items are named cfs_ (custom fields), i# (input with the field number appended) _cf# (custom field #).
See above screen shot that highlights the ID of the object.

Figure 6 - Verifying that the elements match with the custom item field #.

Using the jQuery short hand, we will declare variables to reference the custom field elements and set them as objects. This will allow us to get and set values, attributes and other properties to program against.

Declare object variables using jQuery

Figure 7 - Create variable objects to set the custom field element as a reference.

Create another variable to hold the input field values when entering them and a function that handles the change event of values from the input field.

Initialize an OnChange event

Figure 8 - Set other variables to calculate our score or totals and implement an 'onchange' event function.

This example demonstrates that the text box value will trigger an alert any time the values changes from the previous value.

Invoke the OnChange event on the element

Figure 9 - Changing the input field value will trigger an alert.

We wrap up the code with the full example to show how you can set a variable upon calculation and apply it to another type of element (table cell) as the text. The last thing to note, is that you can change either or integer value, which will auto-calculate and update the table cell value.

Full jQuery example

Figure 10 - Putting the JavaScript together to calculate the values when entering and changing fields.

Tip: Try adding attributes to the input element(s) using jQuery such as: read-only, styles and width after declaring your object(s).
Example: $("#element_id").attr("readonly", true) or $("#element_id").attr("width", "50"); Learn more at: https://api.jquery.com/attr/

Not all code is perfect...

Implement the setInverval code snippet

Figure 10.5 - Keypress, tabbing, button clicks and various keystrokes won't always save!

Tip: Implement the code snippet at the end of the your code routine to avoid null references or script errors.
Example: JavaScript as a neat function to perform functions at a set interval, which can "refresh" or "trigger" code snippets.

Custom item with JavaScript to perform custom functionalities!

Inspect the element using Chrome developer tools

Figure 11 - Custom item implementing calculations.

Tip: You can control the behavior of elements and perform further routines expanding on these instructions.

Full code snippet template. Please modify to reflect against your test environment!

//Specify a function to execute when the DOM is fully loaded.
$(function() {

// Let's declare variables and set the objects using jQuery
    var probabilityInput = $("#cfs_i2_cf2");
    var impactInput = $("#cfs_i3_cf3");

// Declare and initialize a variable to sum up the numeric values
    var score = 0;

// Declare the table cell object
    var scoreInput = $("#cfs_i7_cf7");
    $(scoreInput).attr("readonly", true);

$(probabilityInput).change(function() {
        score = ($(probabilityInput).val() * $(impactInput).val());

        $(scoreInput).val(score);
    });

$(impactInput).change(function() {
        score = ($(probabilityInput).val() * $(impactInput).val());

        $(scoreInput).val(score);
    });

setInterval(function() {
        score = ($(probabilityInput).val() * $(impactInput).val());

        $(scoreInput).val(score);
    }, 100);

});

Related articles