Basic functionality:

This asset allows end users the choice of entering either a percentage or an amount. The calculation of the other input field is then done automatically to aid in the user experience. Users can easily switch in real time between the two by using the ‘switch’ in the middle or simply clicking on the other field. For this conversion to work, an initial 'calculation amount' is required.

This effectively minimises the load on the end user who may otherwise need to use a calculator to figure out the correct values; while easing the load on the developer who is directly provided with both the percentage and the amount and the active input without having to drive any of this themselves.

Accuracy:

Although the number of decimals shown to the end user is configurable, the asset always keeps 8 decimals behind the scenes in order to keep maximum precision. This can be seen in the ‘Demo Values’ section.

The ‘primary’ input (the one the switch is set to) is used together with the ‘CalculationAmount’ variable to calculate the ‘secondary’ input value (the one the switch is not set to). The primary input value is output to the event handler exactly as seen on the front end. The ‘secondary’ input however, since it is the result of the calculation, may have more decimal points than has been configured to display on the front end.

Relevant to the front end showing a rounded value, when the user switches from one input to the other, they may notice that although the new primary input value remains the same, the now secondary input value may change slightly. That is because that input’s value is now the calculated one.

Features:

• Automatic calculation of amount based on the percentage and vice versa
• Amount masking/formatting based on Cleave.js JavaScript library
• Custom form validation – standard OutSystems validations apply, but custom validations can be also be applied using client actions exposed by the component (more detail in the documentation)
• Ability to clear both inputs programmatically
• Can start blank or with values fetched from a database
• The following properties are configurable
• Label
• Info message
• Decimal digits for both amount an percentage
• Amount group separator
• Amount decimal separator
• Amount unit
• Left or right orientation of both percentage and amount symbol
• Custom validation and validation messages per input
• Enabled property of inputs
• Mandatory property of inputs

Configurable options can be trialled in the demo application as seen below.