percentage-or-amount-input
Reactive icon

Percentage or Amount Input

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded
 on 6 May
 by 
5.0
 (5 ratings)
percentage-or-amount-input

Percentage or Amount Input

Documentation
1.0.1

Inputs:

Detailed descriptions, data types, allowed values and other properties can be seen in Service Studio.


Client actions:

  • CheckIfAmountFieldValid and CheckIfPercentageFieldValid: Returns whether the input is valid or not as an 'IsValid' Boolean
  • ClearInputs: Clears the values of both inputs
  • SetCustomAmountFieldValidation and SetCustomPercentageFieldValidation: Sets the input as valid or invalid manually as well as a custom validation message. Note that this will not automatically invalidate the Form.


Outputs:

  • A single ‘OnChange’ event which is triggered whenever the percent, amount or switch changes. Event outputs include:
  • Percent (8 decimal places)
  • Amount (8 decimal places)
  • IsPercentPrimary (to know which input is active)


Custom Validations

The standard built-in OutSystems validations apply as usual. But if custom validations are required (e.g. if the percentage value can’t be less than 15%) then these can be done using client actions exposed by the component to validate the two inputs with a custom validation message as shown in the demo. This is similar to the OutSystems Dropdown Search widget client actions/APIs. Client actions to check the validity and change the validity and the validation message displayed are per input fieldto allow maximum flexibility.

Below is the demo logic to show how the custom validation was done. First it checks to see if the percent input field was valid or not (using the CheckIfPercentageValid client action) based on standard OutSystems validations in which case we let those take precedence (this is the developers choice though) and if valid then it applies the custom validation to set as invalid if the percentage value is less than 15% (using the SetCustomPercentageValidation client action). It is important to note that doing the custom validations does not automatically invalidate the parent form; this must be done manually in the same way one would do when using the OutSystems Dropdown Search widget.



1.0.0

Inputs:

Detailed descriptions, data types, allowed values and other properties can be seen in Service Studio.


Client actions:

  • CheckIfAmountFieldValid and CheckIfPercentageFieldValid: Returns whether the input is valid or not as an 'IsValid' Boolean
  • ClearInputs: Clears the values of both inputs
  • SetCustomAmountFieldValidation and SetCustomPercentageFieldValidation: Sets the input as valid or invalid manually as well as a custom validation message. Note that this will not automatically invalidate the Form.


Outputs:

  • A single ‘OnChange’ event which is triggered whenever the percent, amount or switch changes. Event outputs include:
  • Percent (8 decimal places)
  • Amount (8 decimal places)
  • IsPercentPrimary (to know which input is active)


Custom Validations

The standard built-in OutSystems validations apply as usual. But if custom validations are required (e.g. if the percentage value can’t be less than 15%) then these can be done using client actions exposed by the component to validate the two inputs with a custom validation message as shown in the demo. This is similar to the OutSystems Dropdown Search widget client actions/APIs. Client actions to check the validity and change the validity and the validation message displayed are per input fieldto allow maximum flexibility.

Below is the demo logic to show how the custom validation was done. First it checks to see if the percent input field was valid or not (using the CheckIfPercentageValid client action) based on standard OutSystems validations in which case we let those take precedence (this is the developers choice though) and if valid then it applies the custom validation to set as invalid if the percentage value is less than 15% (using the SetCustomPercentageValidation client action). It is important to note that doing the custom validations does not automatically invalidate the parent form; this must be done manually in the same way one would do when using the OutSystems Dropdown Search widget.