Set the style of an input field dynamically

Set the style of an input field dynamically

Hi all,

I've got a table recordlist with some input fields in it.
Depending on the content I'd like to color the input field at runtime.
(e.g. color orange in case of a warning; white in case of valid entry)

I can't use an "if statement" with two different input fields because I can
have only one input field in the table with the given variable name.

Is there another (read better) way to do this?


Hi Eric,

You can define the style as an extended property of the input.

Select the input in the table and add in the extended properties the pair: style, If(Warning, "color: orange;", "color: black;")

Hope this helps.

Hi André,

That's about what I was looking for.

Two questions concerning this method:
  1. I'm using the following IF structure now:
    If(TableRecords2.List.Current.PRODUCTCOMBINATION.MinimumAverageNettPerBundle = 0, "background-color: #CC3300;", "")
    This is referring by an absolute reference instead of an relative reference e.g. CurrentinputField.Value = 0
    Is there a way to create a relative reference? (I'm looking for that kind of reference in different situations actually, for it can and will save me time)
  2. Is there an easy way to 'refresh' the inputfield's extended properties 'check' after the content is changed? (An onchange won't detect a change for the current Tablerecords2 variable isn't updated on a 'onchange'). It would actually be nice to actually look at the webscreen variable instead of the Tablerecords2 variable (which is updated after a submit)

Hi Eric,

Actually you're facing a very common mistake. The Table Records is an iteration object, hence when you reference the Current of the List you're actually not making an absolute reference but a relative reference.
If you bind the onchange of the input to a screen this to will be a relative reference.
Bind the onchange of the input to a screen action. In this action put only an Ajax Refresh for that input (you'll have to name the input). This will refresh the related input in the webscreen including the extended properties.

Just cooked up an example for you.

Hi André,

At first thank you again for your reply.

Concerning the absolute and relative reference; I'm affraid we're both referring to different objects here.

The object I mean to refer to is only the input field - as eventually being an object on a webpage  -;
not the referred inputfield as part of a table and therefore representing the editable content of a recordfield.

I would like to be able to attach simple verifications, like  "check whether the input field's content is above 0" and simple feedback visuals like "color it's background orange"
this is something a javascript could take care of in a 'normal' .dynamic website.
Being all spoiled with the 'ease' and richness of Outsystems Service Studio, I'm looking for a way to attach verification functionality
directly to a field rather than through server-side ajax handling.

This could make a new type of input field (component) with a client-side, runtime, characteristics changer added to it.
(Perhaps I'm looking for too much functionality in a certain component but, I could really use something like this for visual syntactic feedback)

The reason why I want to bind this function to the field itself is because:
1. This is can be a (web)client-side action and will therefore be very responsive
2. This would enable me to 'copy' the component type rather than pushing me to creating absolute fieldwrappers and for each onchange of an input field absolute actions with absolute ajax 'refresh' components.
With absolute in the second point I'm referring to the Design side (Service Studio) copied / created object.
What I'm looking for is an input field with a visual verification as a 'warning / error / information' parameter this verification could be i.e. a Javascript regular expression; providing a very lightweight 'syntax check'

I think I'll try to create a Javascript doing what I've described above as soon as I've got some time left over. :)



Your input fields will be referable as long as you provide them with a Name property. This is commonly used to get the HTML element ids that are generated at runtime for feeding JavaScript, etc.. If you're aiming at client side validation, the element's ID will likely suffice.

However, for these elements, the provided properties are related more to the element itself and less to its feeding data, so you should use the tablerecord's current record for your server-side styling purposes.
Hi Eric,

I suggest you take a look at the Validation Tools eSpace.

The purpose of this eSpace is to provide some validations of common used numbers and values like Portuguese ID number and email.
All validations can be done in server-side or in client-side.

Hope you'll find it useful.



I have created an example piece of java coding that I would like to add to the input component;
I think I will be creating a new input field type to get this working.
In below field, if you type a zero (0) the field colours red through the onchange.
If you type a different value or leave it empty, the field background color stays white.

Click here to test it

<input id=2 type="text" name="TestName2" onChange="javascript:if(document.getElementById('0') {document.getElementById('#FF9999';} else {document.getElementById('#FFFFFF';}">

I've tried the Validation tool, but I would need to install version 4.2 and then upgrade to version 5 eventually.
Will your repository be able to store different types of OML's for different versions, enabling users to enter their OSS version?
Hi Eric,

Here's a 5.0.2 version of the ValidationTools.oml
Hint: You can install both Service Studio 4.2 and 5.0 to be able to upgrade eSpaces up to version 5.0.

As to create a new input this might not be a good idea since you'll have more work and trouble performing the bind. I suggest you look into the RichWidgets.oml to see how to do what you want.

My suggestion is: create a webblock with an InputParameter named 'WidgetId'. In this webblock you put an unescaped expression that does your javascript code.
This way all you have to do is to drag the webblock to your webscreens to add this feature to the input fields.

Thanks André,

I don't believe I've mentioned this before, but you're a great help!

I like the idea of the webblock and will try to use that and I'll check the ValidationTools.OML
Hi Miguel,

Thank you too for your input.
I'm trying to get as much input about this as I can.

You're much welcomed.

If you have trouble setting up the webblock post here someone will surely help you.