{"id":2629,"date":"2014-12-11T18:32:05","date_gmt":"2014-12-11T14:32:05","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2629"},"modified":"2023-05-05T13:51:01","modified_gmt":"2023-05-05T10:51:01","slug":"new-dhtmlxtemplate-function","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/new-dhtmlxtemplate-function\/","title":{"rendered":"New dhtmlxTemplate Function: How to Use (Live Demo inside)"},"content":{"rendered":"

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

What is DHTMLX Template?<\/strong><\/p>\r\n\r\n

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.<\/p>\r\n\r\n

Where to use Template?<\/strong><\/p>\r\n\r\n

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.<\/p>\r\n\r\n

How to use Template?<\/strong><\/p>\r\n\r\n

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.<\/p>\r\n\r\n

In practice we have:<\/p>\r\n\r\n

#key# <\/p>\r\n

#key|function# <\/p>\r\n

#key|function:param# <\/p>\r\n

#key|function:param:param#<\/p>\r\n\r\n

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

4 simple steps to use DHTMLX Template<\/strong><\/h3><\/p>
\r\n\r\n

Step 1.<\/strong> Create a string that contains a template. E.g.:<\/p>\n\n

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

Step 2.<\/strong> Specify values for the template.<\/p>\n\n

var<\/span> values =<\/span> {<\/span>value:<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>}<\/span>;<\/span> \/\/ or new Date().getTime()<\/span><\/div><\/div>\n\n

Step 3.<\/strong> Apply dhtmlxTemplate function.<\/p>\n\n

var<\/span> text =<\/span> window.dhx4<\/span>.template<\/span>(<\/span>str,<\/span> values)<\/span>;<\/span><\/div><\/div>\n\n

Step 4.<\/strong> Check the result.<\/p>\n\n

console.log<\/span>(<\/span>text)<\/span>;<\/span> \/\/ Current date\/time: 2014-11-12 13:55<\/span><\/div><\/div>\n\n

In the example above we use a built-in function \u201cdate\u201d. Among the other default template functions you may find:<\/p>\r\n\r\n

lowercase<\/strong> – used to convert characters to lower case<\/p>\r\n

uppercase<\/strong> – used to convert characters to upper case<\/p>\r\n

maxlength<\/strong> – used for limiting the count of characters in a text<\/p>\r\n

number_format<\/strong> – used for number formatting<\/p>\r\n\r\n

Custom template function<\/strong><\/h3><\/p>\r\n\r\n

As it was mentioned before, you can also create your own templates. For this, the following preparations precede the standard steps for using template.<\/p>\r\n\r\n

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\u2019ll call it \u2018text_color\u2019.<\/p>\n\n

window.dhx4<\/span>.template<\/span>.text_color<\/span> =<\/span> function<\/span>(<\/span>value,<\/span> color)<\/span>{<\/span><\/div><\/div>\n\n

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:<\/p>\n\n

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

After that there are the steps that are already familiar to you:<\/p>\n\n

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

Online Book Shop with dhtmlxTemplate<\/strong><\/h3><\/p>\r\n\r\n

The following demo is created to demonstrate how template simplifies the building of such an online store where different views can be easily switched.<\/p>\r\n\r\n

With dhtmlxTemplate you can switch languages, book cover and the description of books on-the-fly. Check it by yourselves:<\/p>\r\n\r\n\r\n

\r\n\t
\r\n\t\t\r\n\t\t\t\r\n\t\t<\/table>\r\n\t<\/div>\r\n\t
\r\n\t\tloading…\r\n\t<\/div>\r\n<\/div>\r\n
\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/td>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/td>