Formatting values in a template

Webix JS
1

Hello Webix team and users,

is it currently possible to format values in a template according to certain rules like in printf (and similar) functions in other languages? I read the documentation for both Template and Number and Date Formatting and the closest thing to what I’d like is the #variable# syntax in the template property of views. It is too basic, though.

What I need is a function that formats the values so that I can pad them left or right, define whether they’re presented as integers, floats or strings, set a precision and so on. Something like this, for example (formats is my own function that I made and use until I find another way):

> formats("Price: #price:.2f# €", { price: 123.4 });
"Price: 123.40 €"

This formats the number as a float with 2 digits after the decimal point.

Thanks in advance!

2

While I posted this, Helga wrote hers. I’m known for my timing.

— OLD MESSAGE —

I noticed that people read my question but didn’t answer. Let me rephrase it: Is there a way to format (mainly numeric) values within templates?

I’d be happy with any answer (even a “no”), so that I know that I can stop searching.

3

Basically, there’s no such a function in Webix, but the i18n object offers a set of predefined formatting methods for dates and prices.

By default, the “en-US” format is used with the following settings:

price:"${obj}",
priceSettings:{
        groupDelimiter:",",
        groupSize:3,
        decimalDelimiter:".",
        decimalSize:2
},

The full locale structure can be examined here: http://docs.webix.com/desktop__localization.html#localestructure

So if you set the locale with the needed settings, you will be able to use the priceFormat method to achieve the result:

webix.i18n.setLocale("de-DE"); //uses Euro-based price format
var output = webix.i18n.priceFormat(raw);

Or, for a datatable column: http://docs.webix.com/samples/15_datatable/20_templates/08_locales.html

Alternatively, you may alter the existing locale:

webix.i18n.price = "€ {obj}";
webix.i18n.setLocale();

http://webix.com/snippet/ddf42ac4

4

Thanks, Helga. I already looked at i18n but could not manage to use it as I want to.

Let’s consider the following scenario: I have a list with shop articles. The articles have names and prices. If I want to display the name with the price in brackets, I’d use #name# (#price# €) as the template, right? Can I use i18n to format the price accordingly in this scenario? If yes, how?

5

Look up the http://docs.webix.com/desktop__html_templates.html#templatetypes article, please. It describes how to set data templates for data management components.

The thing is that template can be defined via a function, which allows the following syntax:

template:function(obj){
   return obj.name+" - "+webix.i18n.priceFormat(obj.price);
},

http://webix.com/snippet/09f47328

6

Oh. I even used that in the past, I just didn’t think of it. I’m sorry I took your time for such a trivial thing.

Besides that, did you ever think about providing a syntax like what I searched that would allow you to use a string instead of a function for this type of simple template?

7

We don’t plan to extend the existing templating system.

There are a lot of good javascript templating engines. And it quite easy to use any 3rd party templating system with Webix.

http://webix.com/blog/using-handlebars-templates-with-webix-ui/