Project Insight Report Forms With JavaScript (Advanced Tutorial) – Project Insight Help Center

Please note that these examples may vary case by case.

See our PI#enterprise Add-Ons for the latest method to Customize Form JavaScript & CSS settings.

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.

To customize a Project Insight Report (Project, Task, Issue, etc.), you will first need to install the Add-on for Customize Form JavaScript & CSS Settings under the Project Insight Administration settings.

In this example we're working with existing reports, so click on the global report icon and either load an existing saved report or load a new report.

Load Report Form

Figure 1 - Load A Report Form (In this example, we load the Task Report).

We want to edit this form to add JavaScript to the report. To do this, click on the Show Additional Editable Text link at the bottom of the web form.

Figure 2 - Go to the page you want to edit and select the option under Help.

The window that loads is the JavaScript and CSS forms. Here, we can specify actions and change settings. For example, we can edit the current form by applying JavaScript.

Figure 4 - Edit 'this' form only to include custom JavaScript.

Tip: You can implement the JavaScript for all forms within Project Insight or target just the single form. Caution when using the global "All" option because it will apply the script throughout Project Insight and may cause errors/bugs. See the article Customize Form JavaScript & CSS Settings for more.

In the Form Text box control, you can apply your JavaScript to fire off when the form loads.

Figure 5 - Apply your JavaScript in the Form Text control, which will fire off your script during the forms page cycle event.

This particular example will focus on calculating two Project Insight task fields and setting a custom field with the calculated value at run-time. To learn more about how to create custom fields, please visit this article: User Defined Fields & Forms (Custom Items) With JavaScript

Task report fields calculated

Figure 6 - Calculating Project Insight task fields and setting a custom field with the value.
Tip: This tutorial assumes as a user, you know how to setup and create custom fields, otherwise, please click the related links for more info. Creating Custom Fields, User Defined Fields & Forms (Custom Items) With JavaScript

Below is an example of how to best access data within the report form headers, rows and cells. If you have followed previous tutorials and are comfortable using custom fields and JavaScript then you'll be able to get/set values using jQuery.

JavaScript code snippet for report forms

Figure 6 - Code snippet to get/set form fields within a Project Insight report form using variables and other jQuery methods.
Tip: Set your custom field name and other field selectors (ID's or class names) to a local or global variables.
Example: You can have this function perform during the page load only or during an action/event from a specific control or the page itself (see full code snippet).

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

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

    //Perform first function when the page loads
    preCalculateMarkupPercentage();

    //Perform the recalucations if the form reloads due to an AJAX call
    $("#A_runReportActiono_Item_0").on('click', this, function() {
        //Need to call the function on every load
        setTimeout(function() {
            //Code to call
            preCalculateMarkupPercentage();
        }, 6000);//set to 6 second delay due to larger data sets
    });

});

var workBillableExpenseColIndex = 0;
var workExpenseColIndex = 0;
var markupPercentColIndex = 0;
var markupPercentColName = 'cs_CustomField13';
var lastRowIndex = $("#t tr").length;

//This function finds and sets the values before calucations
function preCalculateMarkupPercentage() {
    $('#t th').each(function() {
        var thId = $(this).attr("id");

        if (thId == 'cs_WorkTotalExpenseBillable') {
            workBillableExpenseColIndex = $(this).index();
        }

        if (thId == 'cs_WorkTotalExpense') {
            workExpenseColIndex = $(this).index();
        }

        //Change to custom field # referenced when creating
        if (thId == markupPercentColName) {
            markupPercentColIndex = $(this).index();
        }

});

    var workBillableExpenseVal = 0;
    var workExpenseVal = 0;
    var markupPercentTD;

    $("#t td").each(function(index) {

        if ((lastRowIndex - 1) != $(this).closest('tr')[0].sectionRowIndex) {

            if ($(this).index() == workBillableExpenseColIndex) {
                workBillableExpenseVal = $(this).text();

            if ($(this).index() == workExpenseColIndex) {
                workExpenseVal = $(this).text();

            if ($(this).index() == markupPercentColIndex) {
                $(this).addClass('AR')
                markupPercentTD = $(this);

                calculateMarkupPercentage(workBillableExpenseVal, workExpenseVal, markupPercentTD)
            }
        }

    });
}

function calculateMarkupPercentage(wbeVal, weVal, markupPercentCFElement) {
    wbeVal = wbeVal.replace(/[$,]+/g, "");
    weVal = weVal.replace(/[$,]+/g, "");
    var markupPercentVal = parseFloat((wbeVal - weVal) / parseFloat(wbeVal));

    if (!isNaN(markupPercentVal)) {
        $(markupPercentCFElement).text(parseFloat(markupPercentVal * 100).toFixed(1) + '%');
    }

};

You can add a comment below to start a dialog on this topic. Others who find this article may benefit from your questions too.

Related articles