Comboboxes and JavaScript in Project Insight are fun!

Hello and welcome to another fun learning session with your favorite PI developer!

If you haven't done so already; please review this article as a pre-requisite to understand how use custom field and items using JavaScript prior to moving on with this session.

Make sure you've created your custom item and add custom field(s), especially a combobox control. Combobox controls are advanced select drop down input controls, which allow quick and easy selections on/off lists. You can also use jQuery selectors to access the object as well as 'GET' and 'SET' values of the control.

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".

In this example, we'll be using a Project Insight combobox that will fire an "OnChange" method and perform a specific routine. Also, in this coding session, we will use a short hand version of the PI JavaScript library to "Get" and "Set" values: FormTools.Get

One important attribute to note for the PI Combobox is the "data-pi-javascript-after-change". This binds the "OnChange" method on the special control and invokes whatever function you want to call (in this example "sprCalcs").

Apply this code snippet on the "Input Form JavaScript" field on "INPUT" tab of your custom item. Please modify to reflect against your test environment!
var severityCtrl;
var probabilityCtrl;
var sprCtrl;

//Specify a function to execute when the DOM is fully loaded.
$(function() {
    //Set variable objects and use jQuery selectors to find elements 
    var $severity = $('[data-pi-property="CustomField4"]');
    //This object is a special "combobox" input element
    severityCtrl = $severity[0];

    //Same selector as above
    var $probability = $('[data-pi-property="CustomField5"]');
    probabilityCtrl = $probability[0];

    //A normal input type element
    var $spr = $('[data-pi-property="CustomField6"]');
    sprCtrl = $spr[0];
    //set an input element to readonly
    $spr.attr("readonly", true);

    //Set an attribute "onchange" to the special combobox 
    $probability.attr("data-pi-javascript-after-change", "sprCalcs");
    $severity.attr("data-pi-javascript-after-change", "sprCalcs");


//A function to perform and can be invoked
function sprCalcs() {
    //Set variables for the combobox item value
    probabilityVal = FormTools.Get(probabilityCtrl);
    severityVal = FormTools.Get(severityCtrl);

    //Set variable values to the reference item to match the GUID
    //These are the IDs of the custom field item (Combobox)
    var probabilityHigh = '581fd220-d954-4784-86a4-aa18b89e67ba';
    var probabilityMedium = 'dae26840-6e39-4c02-ae0a-c20fed4591f4';
    var probabilityLow = 'f7d8e5bb-618c-4929-9667-96b91b9e81f1';
    //Repeat for another custom field 
    var severityHigh = 'b3634ace-ca84-4761-9a97-6eb02325513d';
    var severityMedium = '211abb9f-207c-440a-b37a-056ff96ebfbc';
    var severityLow = '2fcf4241-d74d-406d-80f9-cbe6123b413f';

    //Perform logic to compare and set values on the form
    if ((probabilityVal == probabilityHigh) && (severityVal == severityLow)) {
        FormTools.Set(sprCtrl, 2)
    } else if ((probabilityVal == probabilityHigh) && (severityVal == severityMedium)) {
        FormTools.Set(sprCtrl, 2)
    } else if ((probabilityVal == probabilityHigh) && (severityVal == severityHigh)) {
        FormTools.Set(sprCtrl, 3)
    } else if ((probabilityVal == probabilityMedium) && (severityVal == severityLow)) {
        FormTools.Set(sprCtrl, 1)
    } else if ((probabilityVal == probabilityMedium) && (severityVal == severityMedium)) {
        FormTools.Set(sprCtrl, 1)
    } else if ((probabilityVal == probabilityMedium) && (severityVal == severityHigh)) {
        FormTools.Set(sprCtrl, 2)
    } else if ((probabilityVal == probabilityLow) && (severityVal == severityLow)) {
        FormTools.Set(sprCtrl, 0)
    } else if ((probabilityVal == probabilityLow) && (severityVal == severityMedium)) {
        FormTools.Set(sprCtrl, 1)
    } else if ((probabilityVal == probabilityLow) && (severityVal == severityHigh)) {
        FormTools.Set(sprCtrl, 1)

That's all for now! If you have any questions or comments, please leave them below.

Online 11/30/2017