Canvas App Text Input Runtime Validation

 Validating Text Input for Decimal Values in Canvas App Using a Slider Control

Overview: 

In Power Apps, ensuring that user inputs adhere to specific formats can be a challenge. One such scenario is limiting the number of decimal places a user can input in a text box. While the OnChange event in the Text Input control triggers only after focus is lost (when the user clicks outside the input box), we can enhance runtime validation by leveraging the Slider control to handle real-time typing. In this blog, I will show you how to use a Slider control to enforce that a user cannot enter more than two decimal places in a text box.

Steps to Validate Decimal Input Using a Slider

Power Apps text input controls don't always trigger validation during typing. Here's how you can implement real-time validation to restrict a user from entering more than two digits after the decimal point by using a Slider control.

1. Add Text Input and Slider Controls

• Insert a Text Input control (TextInput1) to capture user input.
• Insert a Slider control (Slider1) which will trigger events when the user types.

2. Configure the Slider

• Set the Default property of Slider1 to Len(TextInput1.Text). This ensures that the slider dynamically updates with the length of the text in TextInput1.
• Set the Max property of the slider to a sensible value, such as 10, to match the maximum possible input length.

3. Set Up Text Input

• Set the DelayOutput property of TextInput1 to false. This ensures that the input is processed without delay, providing real-time validation.

4. Handle OnChange Event in Slider

Use the following logic in the OnChange event of Slider1 to perform the validation:

If(

    Find(".", TextInput1.Text) > 0 && TextInput1.Text <> ".",
    UpdateContext({OriginalNumber: TextInput1.Text});
    UpdateContext({Parts: Split(OriginalNumber, ".")});
    UpdateContext({IntegerPart: First(Parts).Value});
    UpdateContext({DecimalPart: If(CountRows(Parts) > 1, Left(Index(Parts, 2).Value, 2), "00")});
    UpdateContext({FormattedNumber: Concatenate(IntegerPart, ".", DecimalPart)});
    
    If(
        !IsMatch(TextInput1.Text, "^\d+(\.\d{0,2})?$"),
        UpdateContext({ValidInput: FormattedNumber}),
        UpdateContext({ValidInput: TextInput1.Text})
    );
    Reset(TextInput1);
)

This code checks if the user has entered a number with more than two decimal places and corrects it immediately by updating the TextInput1 control with a properly formatted value.

5. Set Default Value of Text Input

Set the Default property of TextInput1 to ValidInput. This way, the input box always displays the validated input after any corrections are applied via the slider.

---

How It Works:

• Validation Logic: The code splits the user input into integer and decimal parts, validates the decimal part to ensure it doesn't exceed two digits, and corrects it if necessary.
• Immediate Correction: If the user types more than two digits after the decimal point, the slider triggers an event that automatically formats the value to match the two-decimal limit.
• Real-Time Feedback: This approach ensures that validation happens as the user types, overcoming the limitation of the OnChange event in the text box, which only triggers when the user clicks outside of it.

---

Summary:

This solution provides a user-friendly way to restrict input to two decimal places in Power Apps, using a Slider control to achieve real-time validation during typing. By using the slider's change event, we ensure that the user receives immediate feedback, enhancing the overall experience with validated and correctly formatted data.