Using JavaScript templating in OTRS 6

Marc Bonsels16. Mar 2017 | DevelopmentMiscellaneous

When we were planning the new system configuration (which will be topic of some upcoming blog posts), we came across a problem which has been part of the OTRS frontend since the very beginnings: whenever we wanted to implement some dynamic DOM changes into one of the OTRS JavaScript libraries, we would usually end up with one of the following:

1. Adding a hidden HTML block somewhere in a template file (.tt), manipulate it in JavaScript (adding content etc.) and displaying it afterwards. This would usually look like this:

   $('#SomeElement')
      .text('Some String')
      .show();

2. Creating the needed HTML directly from within the JavaScript, which would usually look like this:

   $('<div />')
      .append('<span />')
      .find('span')
      .text('Some String')
      .closest('div')
      .appendTo('#SomeParentElement').

Either of those ways are not very advisable in terms of maintainability, simplicity and/or comprehensibility.

So we decided to take another step into a general direction of separating layout from content even more consequently and add a templating mechanism to the OTRS JavaScript. Having a templating engine is something that we actually benefit from since a very long time when it comes to HTML templating. The entire logic is part of the frontend perl modules of OTRS, while all of the templating happens in .tt files. But we were lacking this on JavaScript side – till now.

For OTRS 6, we integrated Nunjucks into OTRS, which is a sophisticated and powerful templating engine created and maintained by Mozilla. We (as always) created our own wrapper around it, which leads to the following:

var MyRenderedHTMLString = Core.Template.Render('Some/Directory/TemplateName', {
    'Variable1' : 'Some Value',
    'Variable2' : 'Some Other Value'
});

This call will actually take a template you created beforehand in Kernel/Output/JavaScript/Templates/Standard/ as an .html.tmpl file) and replace all the contained variables with the according values you provide. What you get is a chunk of rendered HTML that you can insert directly into the DOM of your page. The templates you create can make use of all the power of Nunjucks, aswell as of some special filters we integrated on our own, such as the Translate filter which will take a string and translate it for you:

{{ "Some string that should be translated." | Translate }}

(see e.g. the MetaFloater template for reference).

If you’d like to find out more about JavaScript templating in OTRS, just head over to the JavaScript API documentation of Core.Template.

• 1