Formatting options for display data in LiveView Web

Overview

Within LiveView Web there are fields which can be formatted.  Examples include the display value for a given visualization  or the tooltip for a visualization.  We refer to these areas as the "display value template" and "tooltip template" respectively. In some situations, the format area is exposed and available for use. LiveView Web knows the datatype of each field in the visualization (from the schema of the table) and supplies a default format.  Users do not need to override the default; however, different formats are available for display.

Display Format

  To change a display format, within the template area the template syntax is as follows (without the backslashes):

 [\[character]*[format_notation]\]*

where 

• [character] represents any character including blank space. You can 'escape' an $ by prefixing with a '\' viz. '\$' 
• [format_notation] can be either 
  • $<field_name> - this means show the value of 'field_name' from the LiveView Server using the default format based on the datatype
  • ${<field_name>|<format_type>:<format_arguments_separated_by_colon>} where
    • <field_name> : the name of the field as returned from the LiveView Server
    • <format_type> : can be either 'currency', 'number' or 'date'. The format_type corresponds to Angular 'filter' types. The types link to the respective Angular documentation which explains all the possible arguments to the format_type. 
    • <format_arguments> : arguments for the the format_type. The arguments are separated by colon

Default Formats By DataType

• string - the value of the string e.g. Foo
• boolean - the value of the boolean e.g. true
• int, long - ${<field_name>|number:0} .e.g. 20
• double -  ${<field_name>|number:2} e.g. 5,000.34
• timestamp : ${<field_name>|date:short} e.g. 12/3/15 10:57 PM

Alternative Formats By DataType

The editor exposes 'short cuts'. A 'short cut' is nothing but a predefined format with an easy to understand name. Below is the list of in-built short cuts LiveView Web provides for the user by data type:

• string/boolean 
  • Unformatted - shows raw value 
  • Custom - User can create their own template 

• int, long, double 
  • Unformatted - shows raw value 
  • Integer - ${<field_name>|number:0} .e.g 20
  • Currency - ${<field_name>|currency:$} .e.g $20.00
  • Decimal - ${<field_name>|number:2} .e.g 20.00
  • Custom - User can create their own template

• timestamp 
  • Unformatted - shows time in milliseconds since epoch 
  • Short Date - ${<field_name>|date:shortDate} e.g. 12/3/15
  • Medium Date - ${<field_name>|date:mediumDate} e.g. Dec 3, 2015
  • Long Date - ${<field_name>|date:longDate} e.g. December 3, 2015
  • Full Date - ${<field_name>|date:fullDate} e.g. Thursday, December 3, 2015
  • Short TIme - ${<field_name>|date:shortTime} e.g. 10:57 PM
  • Medium Time - ${<field_name>|date:mediumTime} e.g. 10:57:55 PM
  • Short Date And Time - ${<field_name>|date:short} e.g. 12/3/15 10:57 PM
  • Full Date And Time - ${<field_name>|date:medium} e.g. Dec 3, 2015 10:57:55 PM 
  • Custom - User can create their own template 

Examples

$category has average price of ${priceAvg|currency:£:3} will display:

 Toy has average price of £23.338

${priceAvg|number:2} will display:

 23.34

$category's maximum price is \$${priceMax|number:2} will display:

'Electronics's maximum price is $50.23'

Examples for timestamps (NOTE: In javascript getTime() returns the number of milliseconds since 1970/01/01)

{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}} will display:

10/28/2010 @ 11:40PM

{{1288323623006 | date:'medium'}} will display

Oct 28, 2010 11:40:23 PM