Custom javascript on new ticket form

You can affect the appearance and behavior of the system new-ticket-item submission form with your own javascript. For example, you can:

Hide and show certain form items depending on the values of other items.
Specify which items are required, depending on the values of other items.

Enter custom javascript into the service form using the Administration - Services - New Ticket Form command Javascript.

You can use the following functions in the script:

Name	Description	Examples
getElement(itemName)	Function returns the object of the itemName item in the form.	var $ticketName = self.getElement('tHdTicket.sHdTicket');
getValue(itemName)	The function returns the value that is currently filled in the form in the itemName item. The function returns an {id, value} object: Current fields: {null, filled value} Date field: {null, object of type Date()} Selection field: {selected item id, item text displayed} Field Objects: Array[{object id, object path}] Field Attachments: {null, null}	var ticketName = self.getValue('tHdTicket.sHdTicket').value; var slaId = self.getValue('tHdTicket.liHdTicketSlaId').id;
setValue(itemName, value)	Fills the itemName item in the form with the value value. For items of type int with a selection of values, specify the id of the value in the value parameter in the menu (tColumnValue.iColumnValueId), not its text. It is also possible to insert values that the user does not have permission to. For date items, specify objects of type Date() in the value parameter. If you enter a non-numeric value into an item of numeric type (int, float), the value of the item will not change and an error will be printed to the browser console. Only plain text (without HTML tags) can be inserted into fields with formatted text (HTML).	self.setValue('tHdTicket.@Description', 'I am coding like a champ'); self.setValue('tHdTicket.Objects', 100); self.setValue('tHdTicketCust.CustomDate', new Date("2020-03-01T12:00"));
show(itemName)	Shows the itemName item on the form if it was hidden.	self.show('tHdTicket.@Description');
hide(itemName)	Hides the itemName item on the form if it is displayed and not required. Hidden items are not sent when the form is submitted.	self.hide('tHdTicket.@Description');
setRequired(itemName)	Sets the itemName item as mandatory, i.e. the user must fill in the value before submitting the form.	self.setRequired('tHdTicket.@Description');
setNotRequired(itemName)	Sets the itemName item as optional. Items whose obligation is set in the service process cannot be set as optional in this way.	self.setNotRequired('tHdTicket.@Description');
onChange(itemName, function())	When the value of the itemName item is changed, the defined function is automatically called. Call the onChange() function only in the body of the initHandlers() function. The defined function is normally called only when the input field is exited. In fields with a selection of values, it is called after selecting a value from the menu. In the formatted text input field, it is called after each typed character, formatting change, etc. The function is also called when the value is changed programmatically by the setValue() function.	function ticketNameChanged() { var ticketName = self.getValue('tHdTicket.sHdTicket').value; self.show('tHdTicket.@Description'); self.setValue('tHdTicket.@Description', 'Name: ' + ticketName); }; NewFormScript.prototype.initHandlers = function () { self.onChange('tHdTicket.sHdTicket', ticketNameChanged); } When you change the ticket name on the form, the above script displays the ticket description field and inserts the specified ticket name into it. You can replace the ticketNameChanged() function with an anonymous function defined directly in the argument of the onChange() function call.

Values of the itemName parameter:

Form Item	itemName
Name	tHdTicket.sHdTicket
Description	tHdTicket.@Description
Attachments	tHdTicket.@Attachments
Sla	tHdTicket.liHdTicketSlaId
Related Organization	tHdTicket.RelatedAccountId
Device Number	tHdTicket.sHdTicketDeviceCode
Priority	tHdTicket.Priority
Fall	tHdTicket.Impact
Emergency	tHdTicket.Urgency
Objects	tHdTicket.Objects
<custom fields>	tHdTicketCust.<database column name>

Note:

When editing sections and text blocks in bulk, new IDs are created for custom JavaScript. Therefore, any existing custom JavaScript in use must be updated accordingly.

You can modify the form using standard javascript and beyond the functions described here.

Examples of script:

1. Example
If the Priority field (tHdTicket.Priority) has a value of critical or high, a custom Reason item (tHdTicketCust.PriorityReason) will appear on the form and this item will be mandatory.

var self;
NewFormScript.prototype.init = function () {
  self = this;
   //Hide the Justification item when the form is loaded
  self.hide('tHdTicketCust.PriorityReason');
}

NewFormScript.prototype.initHandlers = function () {
   //Logging a change to the Priority item
  self.onChange('tHdTicket.Priority', function(){
    var priorityValue = self.getValue('tHdTicket.Priority').value;
     //Check whether the Priority item has a high or critical
    if (priorityValue == 'high' || priorityValue == 'critical'){
        //Setting the Justification item as mandatory
     self.setRequired('tHdTicketCust.PriorityReason');
        //Display the Reason item
     self.show('tHdTicketCust.PriorityReason');
     } else {
       //Setting the Reason item as optional
     self.setNotRequired('tHdTicketCust.PriorityReason');
     self.hide('tHdTicketCust.PriorityReason');
     }
   });
}

2. Example
In the custom field Contact Phone (tHdTicketCust.ContactPhone) we want to display the placeholder: 'Enter in international format e.g. +420 123 456 789'.

var self;
NewFormScript.prototype.init = function () {
  self = this;
   //Set placeholder on item
  self.getElement('tHdTicketCust.ContactPhone').find('input').attr('placeholder', 'Enter in international format e.g. +420 123 456 789');
}

Did not find what you were looking for? Ask our technical support team.