Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Form Text Input Component with Validation

    Form Text Input Component with Validation

    12-12-2021 20:12 PM

    DANIEL13
    Frequent Visitor
    525 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    DANIEL13
    DANIEL13
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Form Text Input Component with Validation

    ‎12-12-2021 08:12 PM

    Hello Everyone, 

     

    I build this component for text field input in Powerapps. I want it to shared it with anyone who is interested in. I found through my time in building Powerapps really hard to create custom forms that safiscated my needs.  Please if its post should be somewhere else let me know. This is the Component:

     

    DANIEL13_0-1639368288281.png

     

    DANIEL13_1-1639368288157.png

     

     

    It has a few inputs and outputs. First Input are optional background shades to make it a bit different. If you insert one inside a form field. Title_Text should be equal to Parent.Displayname, TextInput_Default = Parent.Default.

    BorderColor affects Hoverfill effects also. Valid check if true, will check if the input is match to Regex_Valid Value = (^\$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(.[0-9][0-9])?$) this is a regex for currency input. 

    If you are new to regex you can find lots of example that you can copy paste in this field in here:

    https://regexlib.com/Search.aspx?k=&c=5&m=5&ps=10

    And if you want to try to make your on to an specific input you can use this website to doublecheck is correct:

    https://regex101.com/

    Error Message Text will appear if the regex doesn't much the input. If this Valid_Check is false it will not be shown to user.

    Font_Size is the font size. 

    The whole component is dynamic in size so you can play with the size as you find it fix for your app.

    Outputs:

     

    TextOutput  is the text that the user enter in the component. In a form you should put it in your update value

    And Valid_Output is a true of false if the text in the field match the regex. I used it to make the user able to submit form or not.

     

     

    If you want to import this component click on the ... next to New Component in your app and select file option.

     

    If you have any question let me know, I hope that this help someone and maybe give an idea for more complex components in the future.

     

    FormTextInput.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 1
    525 Views
    0 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks