Can someone explain dmx.Formatters? and provide some reference on how to use it?

[Philip_J]

Hey,

I just came accross dmx.formatters in the forums and am surprisede its taken be a year to realise this feature exists I use dmx.parse and dmx.global.set quite a bit, but would love to explore what the custom formatters is all about and unlock more potential.

It seems it pops up as a solution to a number of specific queries, but i can’t find any information on its general usage, ints syntax, what exact formatters you can use in it (I’ve seen string and array etc)

Would someone care to give a general overview on these points? Is it covered somewhere i’ve missed, perhaps one of the dmx-zone blogs?

Anyway…any general info would be great as i’m sure i could make use of it,

Here’s an example from one of the posts…

dmx.Formatters('string', {
  getWeek: function(val) {
    return moment(val).week();
  },
  getIsoWeek: function(val) {
    return moment(val).isoweek();
  }
});

Cheers!

[sid]

These are similar to the server side formatters.
You should define these client side formatters in jQuery document ready function ideally.

I am unable to find many example posts right now. But there are many in the community.
4 I could find:

Convert UTC Time to Local Time for an Array of Data

It would be better to handle it on the SQL side I think. I’m not sure if there would be an easy way to do this on the server action end. You can also convert on the client side, but that is not your requirement I assume. So, in MySQL, there is this function to do convert stored date time values. You can send the local time zone as param to the server action GET/POST… then use that to maybe create a custom query with params. If you are willing to do this on the client side, you can create a d…

Not In Array- is now possible

Short version: dmx.Formatter('array', 'whereNotInArray', function(val, prop, arr) { if (!Array.isArray(arr) || !arr.length) return val; return val.filter(function(item) { return arr.indexOf(item[prop]) == -1; }); });

How to highlight the results of a search?

There is no function to highlight text on the page. You can use a custom formatter for it. Here a sample: <script> dmx.Formatters('string', { mark: function(str, search, ignoreCase) { return str.replace(new RegExp(search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), ignoreCase ? 'gi' : 'g'), '<mark>$&</mark>'); } }); </script> <input id="search" type="search"> <div dmx-html="myText.mark(search.value, true)"></div> Will only work with dmx-html since it generates html.

Convert Object to JSON

@jamesw u can try Custom formatter ; <script> dmx.Formatter('array','stringify', function(val) { return JSON.stringify(val); }); </script>

The syntax in example you have posted is something I have seen for the first time.
The syntax I have used most is as in link… with 3 parameters…

1. Source Object Type
2. Custom Formatter Name
3. Function with Custom Parameters

These formatter, just like server side do not show up in the UI. You can use them in code view.
Server side formatter can now show up in the UI with the new #custom-modules, but no similar option is available for client side yet.

Hope this help a bit.

[JonL]

@sid

The syntax in example you have posted is something I have seen for the first time.

Functions defined inside objects.

It helps reading and maintaining a group of functions. In this case those formatters that affect a string.

In ES6 you can even bypass using function

dmx.Formatters('string', {
  getWeek(val) {
    return moment(val).week();
  },
  getIsoWeek(val) {
    return moment(val).isoweek();
  }
});