Přeskočit na hlavní obsah

Custom javascript on new ticket form

You can affect the appearance and behavior of the system New ticket form with your custom javascript. For example, you can:

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

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:

NameDescriptionExamples
getElement(itemName)Function returns the object of the itemName field 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 field.

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 field in the form with the value value.

For fields 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 fields, specify objects of type Date() in the value parameter.

If you enter a non-numeric value into a field of numeric type (int, float), the value of the field 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 field on the form if it was hidden.
self.show('tHdTicket.@Description');
hide(itemName)Hides the itemName fields on the form if it is displayed and not required. Hidden fields are not sent when the form is submitted.
self.hide('tHdTicket.@Description');
setRequired(itemName)Sets the itemName field as mandatory, i.e. the user must fill in the value before submitting the form.
self.setRequired('tHdTicket.@Description');
setNotRequired(itemName)Sets the itemName field as optional. Fields 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 field 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 itemitemName
NametHdTicket.sHdTicket
DescriptiontHdTicket.@Description
AttachmentstHdTicket.@Attachments
SlatHdTicket.liHdTicketSlaId
Related OrganizationtHdTicket.RelatedAccountId
Device NumbertHdTicket.sHdTicketDeviceCode
PrioritytHdTicket.Priority
FalltHdTicket.Impact
EmergencytHdTicket.Urgency
ObjectstHdTicket.Objects
<custom fields>tHdTicketCust.<database column name>
Poznámka

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:

Example #1​

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

var self; 

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

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

Example #2​

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 field
self.getElement('tHdTicketCust.ContactPhone').find('input').attr('placeholder', 'Enter in international format e.g. +420 123 456 789');}