Is it possible to create complex forms with OutSystems?
Table of contents
Yes. Organizations get great layout and styling features, conditional display and incremental disclosure constructs, and form validations that enable them to develop complex forms. Customers have used these features to develop:
- Replicas of extensive paper-based forms
- Huge healthcare, insurance or legal data entry interfaces with a multitude of fields
Elaborate validation and display rules that are based on complex business logic.
Layout and styling
Separating a complex form into multiple sections with consistent input sizes and perfect alignment is never an easy task. OutSystems simplifies it all with:
- A built-in grid system: Developers can easily align elements in a page and size them proportionately.
- A complete UI framework with powerful constructs: This framework helps developers with structure, content, data, and controls, making difficult tasks such as dividing the page into three or more columns easier. Beautiful panels, collapsible sections, slick alert boxes, info-balloons, and touch-ready controls enable the creation of complex forms that can be displayed in any device.
- A CSS editor: Developers can use this editor to style the pages and controls—their way.
- A visual styles editor panel in the IDE: This editor panel allows changes to the most common CSS properties.
This graphic shows an example of a complex form:
Conditional display and incremental disclosure
In some complex forms, new sections are displayed as a user provides input. Other complex forms only show certain sections or fields to specific types of user roles. OutSystems eliminates the challenges of building these forms with:
- Role-based security and simple constructs: These check a user's role at the UI or business logic level.
- The visible property of UI elements: This capability enables control of their rendering.
- A visual IF construct: This construct renders a true or false branch upon evaluation of a Boolean expression.
- Built-in AJAX capabilities: Reload, refresh, and remove the form without reloading the entire page.
- Constructs that enable UI control events: For example, triggering actions when a combo box value is selected, a checkbox is selected, or text input changes.
This is an example of how a part of the page is rendered, depending on a condition:
Form validations
OutSystems enables client-side and server-side validations of form data.
Client-side validations
On the client side, mandatory field and data type mismatch validations can be enabled without any coding.
More complex client-side validations such as a password complexity widget or social security number (SSN) validation can be achieved with simple JavaScript snippets. These snippets can be easily woven into and integrated with UI controls using the JavaScript editor.
Server-side validations
Modern browsers allow tampering with a page's HTML and JavaScript very easily. Server-side validation is key to ensuring forms data is clean and sound—before it hits any back-end systems.
OutSystems constructs can validate, manipulate, or save data. Queries, web service calls, text manipulation functions, mathematical functions, data formatting, and conversion are just a few of the most commonly used constructs to validate forms data.
Controls have a built-in error message property that can be used to automatically display the validation messages on the screen.
This example shows an error message displayed on the screen:
This example shows form validation logic:
