Apply JavaScript to PI Combo boxes

A good prerequisite for this article is the User Defined Fields & Forms (Custom Items) With JavaScript to understand how make changes to custom fields using JavaScript.

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.

In this example, use a Project Insight combobox. It 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
FormTools.Set

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!

//Variables
var severityCtrl;
var probabilityCtrl;
var sprCtrl;

//Specify a function to execute when the DOM is fully loaded.
$(function() {
debugger;
//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.