In low-code development, mastering the intricacies of Power Apps is essential for developers. One area that presents opportunities and challenges is the implementation of OnSubmit functionality within an App Component Library.  

This functionality, while seemingly straightforward, can introduce a range of complexities that require a deep understanding of form validation, timers and experiential features.  

In this post, we will delve into the lessons our team learned when creating our Component Library. We will share best practices, common pitfalls, and advanced techniques to ensure your applications are robust, efficient, and user-friendly. 

Case Study: Marra’s Local Government Component Library 

When building Power Apps, there is often a need for one control to trigger actions and updates in other controls. Designing interactions between controls involves many considerations such as compatibility, synchronisation and efficient exchange of data. 

The interactions between Power Apps components and host app controls adds another layer of complexity to development. Components require data to be passed in and out of the component through properties. At present, triggering actions within a component using host app controls is not a generally available feature, and requires a more complex approach.  

Our Local Government Component Library includes UI components that focus on user input and validation. They have been designed in line with the Government Design System (GDS), and validation logic is hosted within our components to ensure alignment. This form validation is designed to be triggered in multiple ways. 

Supporting Form Validation in Power Apps 

To enable flexibility for app makers, our components support two methods of form validation. These are controlled through a Boolean input property called SubmitEnabled. 

• Live (real-time) validation: Provides immediate feedback after the user has changed the text input, displaying error messages in real-time. This method is used when SubmitEnabled is set to false. 

• Submit validation: Checks all text inputs for errors, only displaying any error messages when the user has submitted via a button, external to the component in the host app. This method is used when SubmitEnabled is set to true. 

Each component also has a Boolean output property called HasError. This indicates if there’s an error in the user input and needs to be updated in real-time. During form validation development, we faced the challenge of centralising validation logic to reduce duplication. We had to ensure both validation methods were supported and allowed for real-time updates of the HasError property. We solved this using two approaches: timer controls and an experimental component feature. Both methods incorporated caching error messages to suppress their display based on the form validation method used. 

 

Using Timer Controls in Power Apps 

This approach uses timer controls, which are set to be invisible in the UI and used only for functionality. It requires the component to have a Boolean input property, called Submit, for submit validation. This property value can be linked to a “Submit” button in the host app, using a variable e.g. varSubmit. The host app toggles this variable between true and false with each button click. The component continuously monitors this variable for changes by comparing against the previous value. It then triggers the timer to validate and display error messages.  

 The timer can also be triggered through the OnChange property of text inputs for live validation and updating the HasError output property in real-time. When triggered through both methods, the timer control, which has 0ms duration, runs validation logic immediately. The OnTimerStart timer property runs validation checks on the user input (e.g. for blank or incorrect formats), and also sets cached error messages using global variables. The OnTimerEnd timer property then displays or clears error messages and prepares the timer for the next submission. 

 The timer approach provides the necessary form validation functionality but is complex and has involved challenges that we’ve had to overcome, such as synchronising with subsequent form actions. Our component library documentation includes submission set up and recommended tips when using this approach. 

 

Benefiting from the Experimental Feature in Power Apps 

The experimental “Enhanced Component Properties” feature in Power Apps allows for better communication between components and host apps by creating different property types. Instead of using timers, we used the experimental feature to create action properties. These properties hosted the validation logic and were used to cache and display error messages. Action properties can then easily be called from a host app. For example, the action property “Validate” can be called through selecting the “Submit” button in the host app to run validation and show errors in the component.  

This approach made the submission process more intuitive and logical to develop, and eliminated the need for timer controls. However, it is important to note that this feature is experimental and not intended for production use yet. Once generally available, this feature will significantly simplify and improve component development, reducing the need for unnecessarily complex solutions. 

 Since the components are part of a public, open-source library, the timer approach was chosen for form validation. Experimental features are not fully dependable and may vary in their functionality over time. While this may be acceptable for internal use, we determined that it was too risky to implement in a library designed for widespread use. Though more complex, the timer approach can support both form validation methods until the “Enhanced Component Properties” feature progresses from experimental. 

 

Make the Most of our Knowledge 

Implementing OnSubmit functionality within a Component Library is a nuanced task that demands a thorough understanding of low-code principles and best practices. By carefully considering form validation, timers and the experimental features, developers can create robust and efficient applications.  

As we’ve explored, the complexities of this functionality can be navigated with the right strategies, ensuring that your Power Apps projects are both powerful and user-friendly. Keep experimenting, stay updated with the latest advancements, and continue to refine your skills to excel in the dynamic world of low-code development. 

If you’d like to share your preferred approach, then we’d love to hear from you!  

Written by Lauren Whitenstall, App Maker