FREE OutSystems Workshops - Build an OutSystems App in 1 hour | ENROLL NOW

Tech Bites - Make your forms look better

< Back to Blog

Have you ever wondered why your web forms all look the same? With boring white rectangular boxes for the user to fill in?

Let's see how to build a more modern form using OutSystems UI available tools.

In this case, we are building a form to save a new house sale for a real estate company.

Sales have attributes, like the profit margin and number of bedrooms.

Let's substitute the number of bedrooms input for a slider. First, delete the existing "input", then create a slider.


Set the property values for the slider like the minimum and maximum values allowed.
Create a handler to be triggered when the user changes the value of the slider.


On that action, we're going to assign the slider value to the aggregate.


The label is no longer assigned to the input widget. Remove it for the error to disappear.

And that's how we have a different and more user-friendly form.

Thanks!





Turn Up Academy

Apply to our Turn Up Boot Camp

AND BECOME THE NEXT OUTSYSTEMS CERTIFIED DEVELOPER
(
Instructor
)

Latest Articles

‍What’s new in OutSystems Developer Cloud

‍What’s new in OutSystems Developer Cloud

Have you heard about the OutSystems Developer Cloud and want to know more about what's new and what the big benefits are? Then this article is for you!

DevZone
Tech Bites - Should we validate form data on server-side?

Should we validate form data on server-side

When including forms in applications, developers often wonder if they need to re-validate data on the server side after having checked it on the client. Why go to the trouble of checking the data twice?

Tech Bites
The Top 5 Mistakes Handling Asynchronous Data In Outsystems Reactive Apps And How To Avoid Them

The Top 5 Mistakes Handling Asynchronous Data In Outsystems Reactive Apps

When developing an OutSystems reactive web app, you would expect to display data quickly, but it doesn't always happen. Do you know why? We'll explore the reasons and how to tackle them.

DevZone