Skip to content

Templates - client

Templates allow formatting data attributes into strings. The are supported in a number of locations including Dispatch display.

Syntax is a normal string with data attributes escaped by { .. }. The attributes can be formatted with functions. Conditionals are also supported.

This syntax is processed in the Fluxweave web and mobile clients.

Functions

{value | function : parameters}
Function name Name Example Result
capitalize Capitalize {user.name|capitalize} Harry
upper Upper case {user.name|upper} HARRY
date Date format {user.createdAt|date:MMM YYYY} Aug 2020
age Age in years {profile.dob|age} 25
time Format as time from seconds {120|time} 0:02:00
numeral Expressions {values.x+values.y|numeral} 10
numeral Expressions {values.x+values.y|numeral:0.00} 10.00
percent As a percent {values.score|percent} 90%
timeRange Time range {13-14|timeRange} 1:00-2:00pm
suffix Add suffix; use _ for {values.score|suffix:_years} 23 years
prefix Add prefix; use _ for space {values.score|prefix:i=_} i= 23
convert Convert value to metric to imperial {values.height | convert : length} {values.height | convert : length:0.0} 190 cm
truncate Truncate text to a length; ... will be added to the string if longer {values.test |truncate: 9} the quick...
cut Truncate text to a length without any prepended text {values.test |cut: 1} A
prettyArray Display array as a comma delimited list {values.fruit|prettyArray} apple, pear

Additional functions supported on Fluxweave Next

| dateRangePast| Date range in the past | | -- | | `dateRangeFuture`| Date range in the future | | -- | | lookup| Lookup value | | -- | | `since`| User friendly string | | -- | | array| Display array with commas | | -- | | `gender`| User friendly display | | -- | | data:<attribute>| Resolve data attribute from Tracker | | -- | || Resolve data attribute from Tracker | `` | -- |

Conditionals

It will display the left or right depending on the test.

{test ? value1 : value2}
{test ? value1 : value2 | function : parameters}

Conditional tests

Supported operators: - is | == - not | != - > | < | >= | <= - exits | empty - in (for use with arrays) - includes | excludes (for use with arrays)

Conditional strings

The first with a non empty value will be displayed.

{value1, value2, value3}
{values.value1, values.value2, values.value3}

Using nil in conditional strings

The following will display just the value that matches, the nil will cause the template fragment to be removed. If these are all on the same line they will display as the single matching value (assuming they are mutually exclusive).

{values.$value is 0 ? "✕" : nil}
{values.$value > 0 and values.$value < values.goal ? "◯" : nil}
{values.$value is values.goal ? "◎" : nil}
{values.$value > values.goal ? "??" : nil}

Switch statement

Switch statements allow matching a dynamic value and showing different output for different values.

{switch(values.test) => 1|dog, 2|cat, 3|turtle, help|bear, *|pear}

Simple expressions

Simple math expressions can be parsed and formatted; note that operator precenence is not garaunteed.

{ (number *|+|-|/|%|^ number)* | format}

Complex expressions

Complex expressions can be parsed and computed; see Expressions

{{ any supported math expression | format }}

Objects

  • user
  • values (dispatch data)
  • store (for user attributes if loaded)
  • props | data (data access other than dispatch)
  • dispatch (for dispatch attributes)
  • dispatch.attachmentCount
  • dispatch.hasAttachment

Arrays

["dog", "cat", "rabbit", "bear"]

Size

Counts the number of items in an array

{ size( values.metric ) }

Examples

Example Result
{third, second} data 2
{user.createdAt | date:MMM YYYY} Jan 1980
{third, second |capitalize} Data 2
{ 1 is 1 ? first : second |capitalize} Data 1
{ value1 is 10 ? first : second |capitalize} Data 1
{ value2 is 'abc' ? first : second |capitalize} Data 1
{ value1 > 10 ? first : second |capitalize} Data 2
{ value3 | numeral: 0% } 50%
{ value3 | numeral: 0.00} 0.50
{data.values.second} data 2

Dispatch formatting

When applied to a dispatch the values are available directly by referencing with {values.metric}. Additional dispatch information is available through the @ context symbol. Size can be applied to array values as in {size(values.choices) > 0 ? 'has data' : 'no data'} where choices is an array of selections.

Attributes avaialble

  • attachmentCount
  • hasAttachment
  • userName
  • authorName
  • swimlaneName
  • trackerName
  • orgName