What are the best practices for handling large forms with multiple tabs or sections in OutSystems? Is there an efficient way to manage form state and validation across sections without overwhelming the user?
Hello Pavan,
You can use wizard to build your large form and display controls into steps. This also will help you to validate controls of each wizard step before proceeding to next step.
https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/navigation/wizard/
You will need to build your business logic validation and you can use built in validation for controls like required or input data type
https://success.outsystems.com/documentation/11/building_apps/user_interface/forms/validate_the_fields_of_a_form/
You can also find some component in Forge that help you validate format and data of controls link input mask component and more
https://www.outsystems.com/forge/component-overview/7838/input-mask-react-o11
Hi @Pavan Bodapati
Everything depends on the client's requirements, but purely from a user perspective, implementing an autosave functionality can be a game-changer.
Option 1:Setting it to trigger after each input is completed ensures that no data is lost, even if the user encounters a timeout, navigates away, or accidentally closes the tab. Given the volume of changes the user needs to make, autosave is an effective way to guarantee data integrity.
Option 2: For a solution with fewer server calls, you can implement a pattern with a save button within each form on each tab. This gives users control over when they save their progress while keeping server interactions to a minimum.
Option 3: My least favorite option is to have a general save button on the page to save all forms at once. Not only does this increase the risk of data loss as mentioned earlier, but it can also overwhelm the user by showing all validation errors at once during save. To help mitigate this, I’d suggest adding a visual element like an icon next to each tab or section name, indicating where and how many errors exist, making it easier for users to identify and correct issues
AC
Hi @André Costa ,
I like option number three, but how can I implement it by best managing the code flow? How can I structure the screen?
Let me explain better: I would like to have the screen with the save button and the form composed of n blocks, at least one per section. In the screen I retrieve all the form data via an aggregate/data action, and then I pass as input to the blocks a structure only with the data they need. However, I don't know how to pass any block changes to the screen, because for example fields in different sections may depend on input fields entered by the user, and I also don't know how to apply input validations and make a single save.
I have seen that many people recommend using SystemEvent, , but I personally don't like the approach.
Do you happen to have any ideas or another solution? In case you also have an oml example you can share?
Hi Paolo, il ltry to explain as clear as I can with text:
1. Page Setup
Structure for Each Tab: Define a structure (TabN) in the Page Data:
- IsValidated: Boolean (True if validation is completed)- IsValid: Boolean (True if data is valid)- IsSaved: Boolean (True if data is saved successfully)
Flags in the Page: Add two local variables to the Page:
2. Blocks for Each Tab
Each tab is a reusable block. Blocks encapsulate their validation and save logic.
Block Parameters:
Block Client Actions:
3. Validation Process (Page Level)
On Save Button Click:
Catch Validation Events (Handler_Validation):
Validation Complete:
- If Tab1.IsValid & Tab2.IsValid & ... & TabN.IsValid, then trigger saving process by setting IsSaving = True- Else, highlight errors visually (e.g., icons on tab headers).
4. Saving Process (Page Level)
On All Tabs Validated:
Catch Save Events (Handler_Save):
Save Complete:
5. Visual Error Indicators
Add a UI element (e.g., an icon) next to each tab name to indicate the validation/saving status: