Snippet: One-Time Password Input
Not all simple components are that easy to implement in Canvas Apps. Want to have an example? Try to do a One-Time Password input control that will be UX-friendly!
Not all simple components are that easy to implement in Canvas Apps. Want to have an example? Try to do a One-Time Password input control that will be UX-friendly!
Last week, I challenged myself to implement a component known in almost all websites that use 2FA - One-Time code inputs. Making it in native controls was a bit trickier than I thought. Here are a few challenges I faced during implementation:
👉 the ability to have focus set during input (SetFocus function) was considered a must-have, which made it impossible to implement snipped either using gallery or components
👉 control was supposed to be UI optimized and react on a given keypress, which made it not feasible for standard control without building an onKeyPress event for each input control based on the slider control, which is too "hacky" a solution for a reusable snippet
👉 as modern controls don't have an OnSelect property, clearing it out was a bit tricky. As a compromise, a mechanism that clears each subsequent input was implemented. In some cases, a better UI approach would be to add a clear all button
Want to learn how it's done? Or use it in your codebase? Check the snippet shared on my GitHub repository at @jan-chlebek.
If you have any better ideas on how to implement it, be sure to leave a comment below!
If you find this component useful, please like and repost it. Your engagement will definitely motivate me to ship more components! Contribution to Microsoft Sample Solution Gallery and Power Apps Tools coming soon!
#sharingiscaring #PowerPlatform #PowerApps #CanvasApps

Browse articles