How to configure the data binding

Owned by Alex Xie
Last updated: Nov 05, 2019 by John Datuin

OneList data binding is capable of displaying the following information:

  • Static text   

  • Source data property

  • Combination of static text and source properties

How to create the binding expression

  • Select field or click on the  button to open the Source Properties Selector;
  • Select the property in the tree to setup the binding. Note: the tree only shows the properties that are valid for binding in the current context.

  • Continue the above step to bind multiple properties to the same field.
  • Optionally, edit the binging expression to
    • Change the order of the properties;
    • Add static text;
    • Add formatting.

Syntax of the binding expression

Path of the source property is enclosed with {}. The text including the {} braces is replaced with the value of the property. Texts outside of the {} are static and not changed.

FeatureExpressionDescriptionExample
Static textAny textDisplay a static text.

Source

n/a

Expression => Display

  • Header   =>  Header
Single properties{Property}Display the value of the bound source property.

Source

{
    "PO_NUMBER": "4500010000",

    "PO_ADDRESS": {

          "CITY1": "Sydney"

     }
}

Expression => Display

  • {PO_NUMBER}                => 4500010000
  • {PO_ADDRESS.CITY1}   => Sydney
Multiple property{Property1} {Property2}Display the concatenation of the value from multiple properties. 

Source

{
    "CostCentreId": "1234",

    "CostCentreName": "Sales Office"
}

Expression => Display

  • {CostCentreId} {CostCentreName}    => 1234 Sales Office 
Combination of static text and propertiesText1 {Property1} Text2 {Property2}Combining static text (including space) and properties to display more descriptive information or complete sentences.

Source

{
    "OrderQuantity": 10,

    "UnitPrice": 10.00

    "UoM": "EA"
}

Expression => Display

  • Quantity: {OrderQuantity} {UoM} @ ${UnitPrice} / {UoM}  =>  Quantity: 10.00 EA @ $10 / EA
Date and time format
  • {Property:dd/MM/yyyy}
  • {Property:yyyy-MM-dd hh:mm:ss}
Display date and time in specific format. More detail of date & time format can be found at: https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings

Source

{
    "CreatedOn": "2019-06-24T14:00:00+00:00",

    "ModifiedOn": "2019-06-30T10:10:00+00:00"

}

Expression => Display

  • {CreatedOn:dd/MM/yyyy}                  =>  24/06/2019
  • {ModifiedOn:dd/MM/yyyy hh:mm}     =>  30/06/2019 10:10
Number & currency format

{Property:#.00}

{Property:#.c}

Display number in specific format. More detail of number format can be found at: https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings 

Source

{
    "OrderQuantity": 100.0,

    "Weight": 12.50,

    "Amount": 1500.50,

}

Expression => Display

  • OrderQuantity:#}       => 100
  • {Weight:#.0}              =>  12.5
  • {Amount:#,###.00}    =>  1,500.50
Array element

{ArrayProperty[Index]}

{ArrayProperty[Index].Property}

Display the text in an string array at the specific index, display a property of the array element at the specific index. Note: index starts from 0.  

Source

{
    "Texts": ["Line 1", "Line 2"],

    "Items": [

        {"Title":"Item 0", "Value":0 },

        {"Title":"Item 1", "Value":100 },

        {"Title":"Item 2", "Value":200 }

    ]

}

Expression => Display

  • {Texts[0]}              =>   Line 1
  • {Items[2].Title}      =>   Item 2
JSON path query{ArrayProperty[?(@.Property=='value to be searched')].ChildProperty}Evaluate the JSON Path Query at runtime and display the selected value. More detail about JSON Path can be found at: https://restfulapi.net/json-jsonpath/

Source

{
    "Items": [

        {"Title":"Item 0", "Value": 0 },

        {"Title":"Item 1", "Value": 100 },

        {"Title":"Item 2", "Value": 200 }

    ]

}

Expression => Display

  • {Items[?(@.Title=='Item 2')].Value}    =>  200

The above expression selects the element in the Items array where the element's Title property is 'Item 2' and binds to the element's Value property.

Additional binding configuration

Select the Binding Configurations tab in the Source Property Selector to setup additional binding configuration. 

A value converter is only required when the bound source property needs to be converted to number or date-time for formating:

  • DateTime Converter - converts a string to the native date-time value;
  • Double Converter - converts a string to a numeric value;
  • SAP Date Converter - converts SAP date string YYYYMMDD to the native date value;
  • SAP Time Converter - converts SAP time string to the native time value.

Use Regular Expression to fulfil advanced formatting requirement. More about regular expression can be found at: https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expressions

RequirementRegex SettingExample
Remove leading zero.

Pattern: (^|\s)0+

  • 000123 Sales Office                           => 123 Sales Office
  • Cost centre: 0000123 Sales Office     => Cost centre: 123 Sales Office
Format a number that has only zeros

Pattern: (^|\D)0+(\D|$)

Replacement: 0,

  • 0000                          => 0
  • Batches: 000, 1         => Batches: 0, 1

IQX OneList Documentation - 6.40