10.12 Add Formatter

Description: This attribute is used to add formatter to format a date, currency or number.

Components to accept the input: Switch, Select box and Input box


Description of uxextensibility221.png follows
Description of the illustration uxextensibility221.png

When user enables this switch, it will display a select box named as “Select Formatter type”.


Description of uxextensibility222.png follows
Description of the illustration uxextensibility222.png

This select box has three options:

a) Format Date: To format a date


Description of uxextensibility223.png follows
Description of the illustration uxextensibility223.png

b) Format Currency: To format currency as per the standard format for a particular currency.


Description of uxextensibility224.png follows
Description of the illustration uxextensibility224.png

When user selects this option, it will display an input box named as “Enter Currency Variable”. Add variable name which has currency value.

c) Format Number: To format a number into percent value.

When user selects this option, it will display three input boxes as shown in the image below


Description of uxextensibility225.png follows
Description of the illustration uxextensibility225.png

  1. Style: This field is used to specify the style which should be used for formatting the number, like percent or decimal
  2. Min Fraction Digit: This field is used to specify the minimum digits permissible after the decimal.
  3. Max Fraction Digit: This field is used to specify the maximum digits permissible after the decimal.
Example:
  1. Format Date: User has a date like “2017-10-03T19:43:45.695Z”. And user wants to format it using dateTimeStampFormat, which will be “04 Oct 2017 01:13:45 AM”.

    Usage: Enable the switch, and select type “Format Date”


    Description of uxextensibility226.png follows
    Description of the illustration uxextensibility226.png

  2. Format Currency: User has an amount “2,502.25” and user want to format it using currency “GBP”, which will be “£2,502.25”.

    Usage: Enable the switch.

    Here what user write in “Enter Currency Variable” input box depends on what user select in value attribute. Refer value attribute section

    If user selects “Observable variable / Inside Table/ Inside List/TreeView”, then user will write variable name in which this currency has been stored.

    Assume variable name is “tempCurrency”. Its value is “GBP”.


    Description of uxextensibility227.png follows
    Description of the illustration uxextensibility227.png

    If user select “Rest Properties”, then user will write “currency” word as shown in the image below.


    Description of uxextensibility228.png follows
    Description of the illustration uxextensibility228.png

  3. Format Number: User has a number “63.2512” and want to format it with percentage. Minimum fraction digit is 1, and maximum is 2. It will be 63.25%.

    Usage: Enable the switch, select “Format Number” type. Enter style as percent (do not use single quotes), and fractions digits as shown in the image below.


    Description of uxextensibility229.png follows
    Description of the illustration uxextensibility229.png

Parent topic: Available Attributes