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

Tech Bites - How to integrate with a REST API

How to integrate with a REST API

In OutSystems, it's possible to integrate with a REST API in order to call an external service.

Tech Bites
Tech Bites - Make your forms look better

Make your forms look better

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

Tech Bites
Tech Bites - How to edit the properties of several elements at the same time

How to edit the properties of several elements at the same time

This video will show you how to speed up the process by editing the properties of several elements at once.

Tech Bites