New dhtmlxTemplate Function: How to Use (Live Demo inside)

Two weeks ago we updated dhtmlxSuite to the version 4.1. This update introduced a new interesting function – dhtmlxTemplate. We decided to tell more about it in case if some of you haven’t tried to use it yet.

What is DHTMLX Template?

It is a function that allows using templates instead of fixed values. This means that you can have one and the same text which will have different dynamic parts (templates). You may use string, date or number templates or create your own one.

Where to use Template?

You can use templates in any texts that are identical in their structure and meaning, but should be different in some parts like names of the people to whom you address in the newsletter, tables with variety of data (date, telephone number, etc.), different views of one and the same object that can be switched on-the-fly (e.g., the grid of goods in online stores), and so on.

How to use Template?

Fistly, you should know a template format. The dynamic parts that are changed should be inframed by “#”, inside we have the name of a key from json object with additional params. These params are the names of the additional functions for formatting and their arguments.

In practice we have:

#key#

#key|function#

#key|function:param#

#key|function:param:param#

where: key is a key from json object the value of which will be taken, function parses value, using a built-in function or a user-defined one (optional), and param is a param for the function (optional, more than one param can be used).

4 simple steps to use DHTMLX Template


Step 1. Create a string that contains a template. E.g.:

var str = "Current date/time: #value|date:%Y-%m-%d %H\\:%i#";

Step 2. Specify values for the template.

var values = {value: new Date()}; // or new Date().getTime()

Step 3. Apply dhtmlxTemplate function.

var text = window.dhx4.template(str, values);

Step 4. Check the result.

console.log(text); // Current date/time: 2014-11-12 13:55

In the example above we use a built-in function “date”. Among the other default template functions you may find:

lowercase – used to convert characters to lower case

uppercase – used to convert characters to upper case

maxlength – used for limiting the count of characters in a text

number_format – used for number formatting

Custom template function

As it was mentioned before, you can also create your own templates. For this, the following preparations precede the standard steps for using template.

Firts of all, we give a name for a new function. Our new function will change the color of the text and according to this, we’ll call it ‘text_color’.

window.dhx4.template.text_color = function(value, color){

Note that the first param is always a value, the second (and others) is a param that will be defined in the template. For the example above we only need a param for color:

return "<span style='color:"+color+";'>"+value+"</span>";

After that there are the steps that are already familiar to you:

var str = "#value|text_color:red#";
var values = {value: "Important!"};
var text = window.dhx4.template(str, values);
console.log(text); // <span style='color:red;'>Important!</span>

Online Book Shop with dhtmlxTemplate

The following demo is created to demonstrate how template simplifies the building of such an online store where different views can be easily switched.

With dhtmlxTemplate you can switch languages, book cover and the description of books on-the-fly. Check it by yourselves:

loading…

If you have any questions, feel free to leave them in the comments section below.

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components