Skip to Content (Press Enter)
OutSystems.com
Personal Edition
Community
Support
Training
Training
Online Training
Developer Schools
Boot Camps
Certifications
Tech Talks
Documentation
Documentation
Overview
ODC
O11
Forums
Forge
Get Involved
Get Involved
Jobs
Ideas
Members
Mentorship
User Groups
Platform
Platform
ODC
O11
Search in OutSystems
Log in
Get Started
Back to Forums
Rodrigo Coutinho
Staff
2
Views
10
Comments
Formatting user inputs
Question
Some input fields can be too complex when shown in their raw format. Two examples of such fields are phone numbers and credit card numbers. You can improve the usability of the application by formatting these fields in a more human readable format.
One way to do this is to format the field after the user leaves the input. Let’s assume you have an application that asks for a 10 digit phone number. The user inputs “1234567890” and, as soon as he leaves the input field, the field is translated to “(123) 456-7890”. This gives immediate feedback that the value the user entered is valid and improves the readability of the form.
The attached sample shows how this can be done. There is an extended property in the input field called “onfocusout” that is set to “this.value= formatPhone(this.value);”. This ensures that each time the user leaves the input the function “formatPhone” is called with the value of the input as parameter. The function then returns the value of the phone with the desired format. The “formatPhone” function is defined in the Web Screen JavaScript and supports both 9 and 10 digit phone numbers.
You can also add custom validations to these special inputs. Please refer to the “JavaScript Validation“ post to learn how to do this (
https://www.outsystems.com/NetworkForums/ViewTopic.aspx?Topic=JavaScript-Validation
)
FormatPhoneNumber.oml
Drew Casey
Hi,
I'm running version 5.0 and want to know is this still a valid way to handle this or is there another way ? I was unable to look at your example as its from version 3.0 and will not load.
AcacioPN
Staff
Hi Drew
With 5.0 and built-in AJAX, it is simpler to do now. Just:
-> Map the input field to a text variable;
-> Use the OnChange property of the input widget to reformat the value and refresh the widget.
I don't have a Service Studio available here, but the process should be straightforward. If you have any problems doing it, tell me so and I will later post an example.
Drew Casey
Hi Acacio,
Seems simply enough however I can't seem to get it to re-display the new re-formated value. Please send an example when you get time. - Thanks
João Carvalho
Hi Drew, you can't change the displayed value of an input box (using AJAX) while it is on focus. This might be your problem.
Evert van der Zalm
Â
MVP
Is there a way to pass this by?
The problem is I have one inputBox and need to change the input (if it's wrong).
I use the OnChange event and in the action I set the new value, do a axaj refresh but the old value (wrong one) is still being showed.
I use the input textBox for a integer value, but people can type 'a' or '-1' and I change those values, but the changed value isn't shown.
Hope there is a solution for this?
Kind Regards,
Evert
J.
Â
MVP
@Evert, try a different approach. just refuse the keys being placed there.
so check with onkeypress/keydown event if it's a number or a character. if it's a number, ok, if it's a non-number, ignore the keypress.
Evert van der Zalm
Â
MVP
Joos,
I could do that but the result will be the same. If a uer put's in a char and there will be done nothing, the char still keep standing in the field, thats the thing I don't want to do.
If the user input a wrong format, I want to show the default format again.
Kind Regards,
evert
João Carvalho
Hi,
im almost sure that you can do that with javascript (preventing from entering an invalid char).
Evert van der Zalm
Â
MVP
Hello,
I just don't want to use to much javascript (overview and
maintenance)
So hoped there was another way to do it.
Kind Regards,
Everl
J.
Â
MVP
quick example (not tested, just googled it :P )
<form>
<input type="text" name="yourInput"
onkeypress
="return
testForApostrophe(event);">
</form>
<script type="text/javascript">
function testForApostrophe(e) { // KEYPRESS event
var k;
if (e && e.which) { // NS
k = e.which;
} else if (window.event && window.event.keyCode) { // IE
k = window.event.keyCode;
}
return (!k || k != 39);
}
</script>
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
See the full guidelines
 Loading...