Tips & Tricks #4: Adding JavaScript to a Form

Tips & Tricks #4: Adding JavaScript to a Form
Last month, I blogged on the ITIL concept of Impact and Urgency and then implemented it in FootPrints Service Core using AutoField to set the priority based upon the settings of the impact and urgency fields. This solution works wonderfully. However, customers often comment that it is confusing because priority doesn’t get set until after the ticket is saved. This is where JavaScript injection can come in handy.
In this example, we will use JavaScript to update the priority field immediately upon any changes to the impact and urgency fields. NOTE: You can disable the AutoField solution after you implement the JavaScript solution. It will no longer be necessary.
1.) Navigate to Administration >> Workspace >> Form Designer
2.) Create a new field to hold your JavaScript code.

3.) It is very important that you turn Rich Text Mode OFF. Otherwise, RTM will munge your code and it will not work.

4.) Next, you will want to create your JavaScript file. Here is an example that goes along with the number of choices, etc. that I created in Tips & Tricks #3.
<script language=javascript>
function calculate_priority () {
var dropdown1 = document.regform.Impact;
var dropdown2 = document.regform.Urgency;
var dropdown3 = document.regform.PRIORITY;
var value1 = dropdown1.selectedIndex;
var value2 = dropdown2.selectedIndex;
var value3 = dropdown3.selectedIndex;
if (value1 == 0 || value2 == 0) { return; }
else if (value1 == 1 && value2 == 1) { value3 = 0; }
else if (value1 == 1 && value2 == 2) { value3 = 0; }
else if (value1 == 1 && value2 == 3) { value3 = 1; }
else if (value1 == 1 && value2 == 4) { value3 = 1; }
else if (value1 == 2 && value2 == 1) { value3 = 0; }
else if (value1 == 2 && value2 == 2) { value3 = 1; }
else if (value1 == 2 && value2 == 3) { value3 = 1; }
else if (value1 == 2 && value2 == 4) { value3 = 2; }
else if (value1 == 3 && value2 == 1) { value3 = 1; }
else if (value1 == 3 && value2 == 2) { value3 = 1; }
else if (value1 == 3 && value2 == 3) { value3 = 2; }
else if (value1 == 3 && value2 == 4) { value3 = 2; }
else if (value1 == 4 && value2 == 1) { value3 = 1; }
else if (value1 == 4 && value2 == 2) { value3 = 2; }
else if (value1 == 4 && value2 == 3) { value3 = 2; }
else if (value1 == 4 && value2 == 4) { value3 = 3; }
dropdown3.selectedIndex = value3;
SLAChanged();
}
document.regform.Impact.onchange = function() { calculate_priority(); };
document.regform.Urgency.onchange = function() { calculate_priority(); };
</script>
5.) Paste this code into the “Help Text and Instructions” section of the field that you created.
6.) Save the field.
7.) Publish the form.
8.) Now, when you change Impact and/or Urgency, the Priority field should update automatically.

2013-07-26T15:15:54+00:00July 26th, 2013|FPSC|