Versions Compared

Old Version 3

changes.mady.by.user Alex Xie

Saved on

compared with

New Version Current

changes.mady.by.user John Datuin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

You can configure a detail element to displayOneList data binding is capable of displaying the following information:

  • Static text   

  • Source data property

...

  • Select field or click on the  button in to open the Source Properties paneSelector;
  • Find Select the property in the tree and select it to add to setup the binding. Note: the tree only shows the properties that are valid for binding are shown in the treecurrent 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 are is replaced with the value of the property. Texts outside of the {} are static and not changed.

FeatureExpressionDescriptionExample
Display
Static textAny textDisplay a static text.
  • Header


Div
stylefont-size:x-small

Source

n/a

Expression => Display

  • Header   =>  Header


Single properties{Property}Display the value of the bound source property.


Div
stylefont-size:x-small

Source

{
    "PO_NUMBER": "4500010000",

    "PO_ADDRESS": {

          "CITY1": "Sydney"

     }
}

Expression => Display

  • {PO_NUMBER}                => 4500010000
  • {PO_ADDRESS.CITY1}
  • 4500010000
    • Sydney
    •    => Sydney


    Multiple property{Property1} {Property2}Display the concatenation of the value from multiple properties. 


    Div
    stylefont-size:x-small

    Source

    {
        "CostCentreId": "1234",

        "CostCentreName": "Sales Office"
    }

    Expression => Display

    • {
    CostCentreNumber
    • CostCentreId} {CostCentreName}
    1234 Sales 
    •     => 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.


    Div
    stylefont-size:x-small

    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


    Div
    stylefont-size:x-small

    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}
  • 12/02/2019
    • 16/02
    •      =>  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 


    Div
    stylefont-size:x-small

    Source

    {
        "OrderQuantity": 100.0,

        "Weight": 12.50,

        "Amount": 1500.50,

    }

    Expression => Display

    • OrderQuantity:#}       => 100
    • {Weight:#.0}              =>  12.5
    • {Amount:
    c}
  • 12
  • 5.1
    • 12:
    • #,###.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.  


    Div
    stylefont-size:x-small

    Source

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

        "Items": [

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

            

    {Strings

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

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

        ]

    }

    Expression => Display

    • {Texts[0]}              =>   Line 1
    • {Items[2].Title}
    • The text element
    • The title of the second item in the array
    •       =>   Item 2


    JSON path query{ArrayProperty[?(@.
    Title
    Property=='
    the title
    value to be searched')].
    Value
    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/


    Div
    stylefont-size:x-small

    Source

    {
        "Items": [

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

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

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

    {LEAVE_DATA

        ]

    }

    Expression => Display

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

    The above expression selects the element in the

    LEAVE_DATA

    Items array where the element's

    NAME

    Title property is '

    OPERATION

    Item 2' and binds to the element's

    VALUE property.

    Value property.


    Additional binding configuration

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

    Image Added

    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