Targeting custom javascript to specific areas of the OTRS Agent or Customer Interface

As i have described in my Post Running javascript on any OTRS Agent or Customer site it is pretty simple to add your own javascript to OTRS.

Now we will add some JS to your CustomJS.js file to actually do something useful.

First off all, we should disable the Loader for javascript to move around the caching mechanism.

Go to Sysconfig, search for “Loader” and disable the Option Loader::Enabled::JS in Core::Web
Now all the javascript files are directly linked in the html document and not combined and cached in a single file.

Now add this jquery extension to the end of the javascript file.

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split(';');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

This is slightly modified version of something I found on this Blog, thanks a lot.

We are already using the jquery .ready() function to wait until the site is fully loaded.

$( document ).ready(function() {
    alert( "ready!" );
});

Next we will add an if clause to limit our alert to a specific area of the Agent Interface by reading the value of the “Action” parameter in the URL with the above added function.

$( document ).ready(function() {

    var CurrentAction = $.getUrlVar('Action');

    if ( CurrentAction == 'AgentTicketFreeText' )
    {
        alert( "ready!" );
    }

});

If you use Ctrl-F5 to reload your Agent Interface the alert should be gone.
Open a ticket and go to Free Fields and it should be back.

Now you can do all crazy stuff on any page by checking for the action parameter.

I will show you some of the modifications I have done to my OTRS system in a later post.