In this blog post, I will walk through the steps required to create a custom captcha control in a pop-up on a canvas app. This is helpful for folks who want to implement an additional layer of validation before saving data or perform an operation in Power Apps.
Problem Statement
How to add an extra validation layer on a screen in canvas app?
Solution
Create a popup screen to perform validation using the custom captcha control we build as part of this blog post. Once validated, the data will be successfully saved.
Part 1: Pop-Up Screen
To create a pop-up screen, setup the configuration as:
Button to open PopUp-> OnSelect property -> Set(ShowPopUp, true) Controls that will be displayed as part of PopUp -> Visible property -> ShowPopUp Button to Hide PopUp -> OnSelect property -> Set(ShowPopUp,false)
Part 2: Generate Random Numbers and Operation Mode
To generate random whole numbers, we will use the Rand() function and perform a mod operation.
Expression to generate two different numbers: Set(number1,Value(Text(Mod(Rand()*100,20),"[$-en-US]#0")));
Set(number2,Value(Text(Mod(Rand()*100,20),"[$-en-US]#0")))
Tip: This generates numbers between 0 to 19. If you want to increase the limit, you can change the variable in the expression as Value(Text(Mod(Rand()*100,20),"[$-en-US]#0")).
Now to switch between Addition and Subtraction, you can create a collection on App Start to save these values. App -> OnStart -> ClearCollect(CaptchaOptions,["Sum","Difference"])
- Create a switch between addition and subtraction by using the expression:
Set(generatednumber,Value(Text(Mod(Rand()*100,2)+1,"[$-en-US]#0"))) -> This can be done on the button that enables pop-up and then again on the button to refresh captcha.
Explanation: This returns two values either 1 or 2, based on that we will get the Sum or Difference value from the created collection.
Tip: If you have more than 2 options in your case, you can change the number as highlighted in the expression to be equal to the length of collection.
Value(Text(Mod(Rand()*100,2)+1,"[$-en-US]#0"))
As for subtraction, we want the first number to be greater than second number and to manage that, the text property of first and second labels to show values can be set to:
Label 1: Text Property -> If(number1 >= number2,number1,number2)
Label 2: Text Property -> If(number1 >= number2,number2,number1)
Part 3: Validation
To validate the user input, you can set the OnSelect property of the submit button as:
Expression on the OnSelect property: Set(FinalResult,If(Last(FirstN(CaptchaOptions,generatednumber)).Value ="Sum",number1 + number2,Last(FirstN(CaptchaOptions,generatednumber)).Value = "Difference",If(number1>number2,number1 - number2,number2 - number1))); Set(IsCaptchaMatch, FinalResult = Value(TextInput2.Text)); If(!IsCaptchaMatch,true,*Actions to be performed*) Explanation: FinalResult variable stores the result of the generated captcha. The variable IsCaptchaMatch, stores boolean value based on the input from the user and the generated result. If these match, further actions can be performed and if not, an error message is displayed. The Visible property of error message controls is set to: !IsCaptchaMatch && ShowPopUp
Demo
This post shows how to add an extra validation layer using custom captcha control. I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika
Comments