Using JavaScript templating in OTRS 6

Marc Bonsels16. Mar 2017 | DevelopmentMiscellaneous

Disclaimer:

The practical examples presented in our technical blog (blog.otrs.com) and now in the expert category in our FAQ blog section serve as a source of ideas and documentation to show what is theoretically possible with OTRS in concrete scenarios or sometimes even for more exotic configurations. All configurations presented here were developed under laboratory conditions as a proof of concept. 

We can only guarantee testing and implementation of these concepts to be error-free and productive if implemented in a workshop with one of our OTRS consultants. Without this, the responsibility lies with the customer himself. Please note that configurations from older OTRS versions may not work in the newer ones.

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
Rolf Schmidt at 17.03.2017, 15:07

very nice! :-)

Your email address will not be published.