How to use custom global functions inside field value expressions in Cx?

Question

I have a somewhat complex case where I need to apply custom formatting to a JavaScript expression that calculates the value of a field inside a Grid.

<Grid records:bind="$page.data"
    columns={[
        { 
            field: 'seatbeltViolations', 
            header: 'Seatbelt Violations', 
            format:'n;0', 
            aggregate: 'sum', 
            aggregateField: 'seatbelts', 
            align: 'right' 
        },{
            field: "distance",
            header: "Distance",
            format: "n;0",
            aggregate: "sum",
            aggregateField: "distance",
            align: "right"
        },{
            field: 'seatbeltViolationsPer100Km', 
            header: 'Seatbelts per 100km',
            format: 'n;1',
            footer: { 
                expr: '0.1 * Math.round(10.0 * {$group.seatbelts}/{$group.distance})' 
            }, 
            align: 'right' 
        }]} />

Is there a way to use custom global functions, that perform the given operation, within the expression? Something like this:

// this does not work
expr: 'Format.value({$group.seatbelts}/{$group.distance}, "n;1")'

I hope my question was clear enough :)

Answer 1

I think the easiest way would be to use computable here instead of an expression. Something along the lines of:

...
footer: computable("$group.seatbelts", "$group.distance", (p, q) =>
          {
            return q != 0 ? Format.value(100.0 * p / q, "n;1") : '--';
          }),
...

This way you can have footers as complex as you like, and you can easily abstract the logic away into a generic factory function returning anything you want. For an example of this, take a look at this fiddle: https://cxjs.io/fiddle/?f=xWw8ob40